Collections Page

Collections Page

Collections List Page

The Collections List Page displays all of your store's collections in a list format.
collections-list-page

Customize 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-collections-list-page
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.
access-default-collection

Customize the collection banner: The Collection Banner displays an image and information related to the specific collection being displayed. These options apply to the collection banner:
  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-collection-banner
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.

custom-data-collection

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.
collection-metafield-definition



Product Grid

Products in the collection are displayed in a grid format. Customize the number of products and columns displayed on the page.
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).
filtering-and-sorting
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.

    • Related Articles

    • Contact Page

      The Contact Us page is divided into two sections: the left side displays the contact form and information, while the right side shows the store's location. Creating a Contact page Go to Online Store in Shopify Access Pages Click Add Page and enter a ...

    • Blog Page

      Create the Blog Page Go to Online Store in Shopify. Access Pages. Click Add Page and enter a title. Add introductory text or information for your blog page in the Title and Content field. Add a Title and Description in Search Engine Listing to see ...

    • Compare Page

      A Compare Page allows customers to view a comparison of different products in your store. Customers can add products to the comparison list by clicking the compare icon (two opposite arrows ?) on the product image. With each product image, when ...

    • About Page

      An "About" page is a dedicated section of your website that tells your brand's story, introduces your team, and explains your mission, values, and what makes your business unique. It's an essential tool for building trust, connecting with your ...

    • FAQ Page

      An FAQ (Frequently Asked Questions) page is a dedicated section of your website that answers common questions customers may have about your products, services, policies, or company. It's a valuable tool for providing quick and accessible information, ...