1. Collections List Page
   

The Collections List Page displays all collections in the store in a list format.

How to Create a Collections List Page:

1. Access the Collections List section.

2. Choose how to display collections in Sort Collections By (e.g., alphabetical A-Z, Z-A, date, month).

3. Select the image ratio under Image Ratio and set the number of columns displayed on desktop and mobile.

Breadcrumb Banner:

• Custom Title Page: Enter a title if applicable.

• Image: Choose a banner image.

II. Collections Page

To customize the Collection Page, go to Collections - Default Collection.

Collection Banner: This section uses information and images from each collection. Users should configure as follows:

• Image Ratio: Set the image ratio.

• Desktop Image Placement: Set the display position of the image in the section on desktop screens.

Breadcrumb Banner:

• Image Default: Select a default image (applies to all collections).

• Image Collection: Allows separate images for each collection. To use this, create a Metafield:

• Go to Settings → Custom Data → Collection → Add Definition.

• Enter a title for the name field and an optional description (namespace and key should match the name field by default).

• Under Select Type, choose File. In Validations, select Image.

• Save the settings.

Next, go to the collection where you want a custom banner image. Scroll down to the Metafield field with the name you created, select the image, and it will update as the collection banner.

Product Grid

Products in the collection are displayed in a grid format. Customize the number of products and columns displayed on the page.

• 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.

• Customize Filtering and Sorting:

• Enable Filtering: Check this to display product filters.

• Desktop Filter Layout: Choose filter position on desktop:

• Horizontal

• Vertical (on the left side of the screen)

• Drawer (displayed as a slide bar)

• Enable Sorting: Enable or disable sorting options (e.g., alphabetical A-Z, Z-A, date, price).

Customize product information displayed in the Product Grid section:

• Display options for product image ratio, product information (price, reviews), and quick display of the add-to-cart button.

Banner: Users can configure a banner image displayed alongside products. Follow the same steps as for the Breadcrumb Banner if you want the image displayed uniquely for each collection.

• Position: Select the banner display position within the product list.

• Number of Columns: Set the number of columns displaying the banner.

• Banner Link: Enter the link for the banner display.

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