Skip to main content

Collection

The collection page shows an overview of products within a specific category. This is a crucial page where visitors need to be able to quickly find the right product using filters and sorting.

General Layout & Design​

Customize the basic display of the collection via the section settings:

  • Remove bottom margin (No margin bottom): Check this to reduce the space directly below the collection (handy if you want to place another section tightly against the collection page).
  • Show collection image: If you have added an image to the collection in the Shopify Admin, you can choose here whether it should be shown:
    • Always show (All): Visible on all devices.
    • Desktop only: Hides the image on mobile to save space.
    • Never show (None): Hides the image completely.
  • Color schemes: Independently set the color scheme for the Information card (which contains the title and description) and for the Filters (the sidebar).
  • Title Formatting: Determine the font size (H1 to H6 or display), the alignment, and the font weight (normal or bold) of the collection title.

Product Display (Grid)​

Determine how many products are visible on the page at the same time:

  • Products per row on desktop: Choose whether you want to show 3 or 4 products next to each other on large screens.
  • Products per page: Determine the maximum number of products loaded before the visitor has to click to the next page (pagination) (adjustable between 1 and 50 products).

Filters & Sorting​

With these settings, you determine how visitors can navigate through your assortment:

  • Filter display:
    • Sidebar: Shows the filters in a traditional, vertical bar on the left side of the products.
    • Row: Places the filters in a horizontal bar above the products (in the information card).
    • None: Hides the filters completely.
  • Mobile Filter Button (FAB): If you use the filters as a sidebar, a Floating Action Button appears on mobile to open the filters. You can adjust the color scheme of this button and determine its exact position (number of pixels from the bottom of the screen) so that it doesn't overlap with a potential chat widget.

Short Description​

This is a short introductory text shown right below the title, in the eye-catching information card above the products.

  • Enable: Check or uncheck whether you want to show a short description.
  • Truncate character count: Determine after how many letters the text should be truncated (for example, after 150 characters).
  • 'Read more' button: If you enable this and the text is longer than the threshold, a clickable "Read more" link appears. This scrolls the visitor directly to the full description at the bottom of the page. Note: if this is disabled, the text will not be truncated.
  • Metafield link (optional): By default, the theme takes the text from your normal collection description. Do you want a specifically different, short intro text? Then link a Shopify Metafield (enter the metafield key).

Comprehensive Description​

  • Activate full description: Check this to show the complete collection description (which you wrote in the Shopify Admin) at the very bottom of the page, beneath all products. This is often very important for SEO (Search Engine Optimization) purposes, without it getting in the way of navigation at the top of the page.