Collections List Page

1. From your Shopify admin, go to Online Store > Themes.
2. Click on Customize on the theme you want to edit.
3. On the theme editor, click the dropdown at the top of the page, and select Collections list page.
4. You will now be able to customize the page:
5. Sort Collections By: Choose how collections are displayed (e.g., alphabetically A-Z, Z-A, by date, or by month).
6. Image Ratio: Select the aspect ratio for collection images (e.g., square, landscape, portrait).
7. Columns: Set the number of columns to display on desktop and mobile devices.

Customize the Breadcrumb Banner: A breadcrumb banner is a navigation aid, that helps users understand where they are in your website by showing a trail of the pages that were visited, usually on top of the main page content. To customize your breadcrumb banner:

1. Custom Title Page: Enter a custom title for this page (if applicable).
2. Image: Choose a banner image for the page.
   

Collection Page

To access this page for customization, go to the Theme Editor and on the dropdown at the top of the page, select Collections > Default collection.

1. Image Ratio: Select the aspect ratio for the collection banner image (e.g., square, landscape, portrait).
2. Desktop Image Placement: Select the desired placement of the image on desktop (e.g., left, right, top, bottom).
   

Customize the Breadcrumb Banner: The breadcrumb banner helps users understand where they are on your website by displaying a navigation trail on the top of the page. You can choose to use a default banner or set a custom image for each collection using metafields.

1. Default Banner Image: Select a default banner image that will be displayed for all collections that don't have a specific image set.
2. Custom Banner Images (Metafields): To use a custom banner image for each collection:
1. Go to Settings > Custom Data > Collection > Add Definition.
2. Enter a title (e.g., "Collection Banner Image") and an optional description. (The namespace and key should match the name field by default).
3. Under Select Type, choose File.
4. In Validations, select Image.
5. Save the settings.

Next, go to the collection you want to customize.

1. Scroll down to the Metafields section with the name you created.
2. Select the desired image, and it will update as the collection banner.
   

Product Grid

1. Enable Grid/List Button: Check this to display the grid icon and list button. Clicking the grid icon shows products in grid form, while the list button displays them in a one-by-one list format.
   
2. Customize Filtering and Sorting: 
   
1. Enable Filtering: Enable product filters, to allow users to filter the products on the page based on different criteria.
   
2. Desktop Filter Layout: Choose the layout of the product filters on desktop: Horizontal, Vertical (on the left side of the screen), or Drawer (displayed as a slide bar).
   
3. Enable Sorting: Enable sorting options, which allow users to sort the products based on different criteria (e.g., alphabetically A-Z, Z-A, by date, or by price).
   

Customize product information displayed in the Product Grid section: You can select options for the display of the product image aspect ratio, product information (price, reviews), and add a button that will allow the user to add the item to the cart directly from the collection page.

1. Customize the Product Banner: You can choose to display a banner alongside the products, to give more context about the collection:
   
2. You can choose to display a custom banner, by using the metafield settings, following the same steps as for the Breadcrumb Banner.
   
3. Position: Select the banner display position within the product list.
   
4. Number of Columns: Set the number of columns for the banner display.
   
5. Banner Link: Enter a link for the banner.
   

Note: Set product detail displays in Theme Settings. All products in the store will display details as set in Theme Settings.