Product grid

In this section, you can configure the content that should be displayed on the collection page, manage the sidebar and decide what it should display: various filters, promo boxes, pages, subscription.

Collections -> Product grid

IMPORTANT! This section required saving changes by pressing the “Save” button to view customizations on a collection page.

The Sidebar positioning and the visibility settings you can check in the Theme settings -> Collection Page. How to configure these settings you can read here.

In this section, you can manage your content for the sidebar by adding the content blocks. There are 9 content blocks available for the sidebar. Three of them can be added only once: “Current filters”, “Parameters”, and “Filters”. The other six can be added several times: “Filter settings”, “Tag”, “Products”, “Custom HTML”, “Promo Box (Banner)”, and “Subscription”.

Product grid

In this section, you can decide the “Content width” that should be used on collection pages and can be set as s “Boxed” or “Fullwidth”:

The “Products per page” scale from 4 to 24, enables one to set the number of products that will be displayed on a collection page:

Filtering

Here you can decide which filter option to use: “Filters” or “Tags”. By default, the theme shows filters configured in Shopify Admin -> Online Store -> Navigation -> Collection and search filters -> Shopify search & Discovery app. If you want to show filters by tags (“Tags” block) configured in the theme editor - untick the option “Enable default filtering”.

Please note, only one option can be used in the Sidebar: “Filters” or “Tags”, the other method will be disabled.

In this subsection, one can configure the general settings regarding the “Filters” block that will be applied for the filters. How to configure the “Filters” block, you can read here.

If you enable the option “Show selected filters counter & button "Reset”, the filter counter and the button “Reset” will be shown for each filter block:

In order to show the number of products available for each product variant in the Sidebar, enable the option “Show the count of products on the filter”:

The option “Hide disabled filters”, enables one to hide out-of-stock product variants or to show them as unavailable:

Once you enable the option “Make availability filter as rounded checkbox”, the “Availability” filters design will be changed from the list to a rounded checkbox:

In the “Price filter type” dropdown, you can apply settings for the price filter visibility whether to show it as “Slider & Inputs”, “Slider”, or “Inputs”.

Please note, if the option “Enable legacy method of the currency conversion” is enabled in Theme settings -> Currency, the only option “Slider” can be applied for the price filter.

Sort By

This subsection enables you to show the “Sort” option “Only on desktop” or “Desktop and mobile”. Customers will be able to sort products in the collection by featured, best-selling, price ascending, price descending, etc. You may choose the “Hide” option if you do not want to show the “Sort” on your store.

Information

Here you can decide if to display the number of the results “Only on desktop” or “Desktop and mobile”. Or set the option “Hide” to disable showing information on the collection page.

Grid

In this subsection, you can decide if to “Show grid buttons” on desktop and mobile or disable an option.

The grid view button options will be shown on the collection page: 1 product per row, 2 products per row, 3 products per row, 4 products per row, 6 products per row, and a list. You can decide whether all of them, some, or one should be displayed, simply by enabling the “Show button 1-6 items per row” or “Show button “List”:

Product 'List' design

The theme includes two list designs:

Enable tooltip

If you enable this option, the tooltips will be displayed for the grid buttons on the collection page.

Default products per row (Extra large)

Here you can choose how many products should be displayed on the extra large screen by choosing the proper option from the dropdown list.

Default products per row (Large)

Here you can choose how many products should be displayed on the desktop by choosing the proper option from the dropdown list.

Default products per row (Medium)

Here you can choose how many products should be displayed on the laptop by choosing the proper option from the dropdown list.

Default products per row (Small)

Here you can choose how many products should be displayed on the tablet by choosing the proper option from the dropdown list.

Default view grid (Extra small)

Here you can choose how many products should be displayed on the mobile by choosing the proper option from the dropdown list.

Current filters over the products grid

In case you need to show selected filters on desktop, mobile, or both, you may choose one of the options from the dropdown list: “Only mobile”, “Only desktop”, or “Desktop and mobile”. Or disable the option by choosing “Hide”.

Filters section

In this subsection, you can decide whether to display the filter titles in uppercase by enabling the “Uppercase filters section title” option. In order to separate each filter block with the border, tick the “Show filters section border” option.

This is how a collection page may look like when one enables both of these options:

Last updated