Collection body

On this section (located on the Collection page) customers can see products from the collection. Customers can use filters to show the products they are looking for.

Adding a Section

The section is static on the collection page template, it was added initially and cannot be removed.

Section settings

General

  1. Filters type - setting allows choosing the view of filters: “Sidebar” or “Horizontal”. Setting works only for desktop resolution. On the mobile filters will be always in the “Drawer” view;

  2. Show grid buttons - the setting displays a certain number of cards per page. The minimum number is 12, the maximum number is 50;

  3. Show color swatch in filters - if checked, the filter group with name, specified in the Theme settings / Product / Swatch option ("Color" by default) will show a checkbox like color swatch;

  5. Disble lazy-load- the setting is responsible for disabling lazy-load for the first two products. Use this if you hide the collection image banner;

  6. Paginate by - the setting is responsible for displaying a certain number of cards per page. The minimum number is 12, the maximum number is 50;

  7. Pagination type - the setting is responsible for the type of loading of product cards. Can be “Pagination”, “Load more”, or “Infinity scrolling”.

Blocks settings

Layout

  1. Container width - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;

  2. Desktop offset top - the top indent of the section on the desktop;

  3. Desktop offset bottom - the bottom indent of the section on the desktop;

  4. Mobile offset top - the top indent of the section on the mobile;

  5. Mobile offset bottom - the bottom indent of the section on the mobile.

General

  1. Image - the setting is responsible for the banner image;

  2. Heading - the setting is responsible for the banner heading;

  3. Button label - the setting is responsible for the banner button label;

  4. Button link - the setting is responsible for the banner button url.

Colors

  1. Background - the setting is responsible for the banner background color;

  2. Text - the setting is responsible for the banner text color;

  3. Button label - the setting is responsible for the banner label color;

  4. Button background - the setting is responsible for the banner button background color;

  5. Button border - the setting is responsible for the banner button border color;

  6. Button label (hover) - the setting is responsible for the banner button label color on hover;

  7. Button background (hover) - the setting is responsible for the banner button background on hover;

  8. Button border (hover) - the setting is responsible for the banner button border color on hover.

Additional information

  1. Shopify Filtering Tutorial: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters

PreviousFeatured productNextCollection header