Product grid
In the "Product grid" section you can apply layout settings to collection pages.
Tip: Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide the section.
On the "Products per page" scale, set the number of products from 8 to 24 (with the four steps in between) to display on collection pages.
Product card
The "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle".
Enable or disable each option described below to decide on the necessary functionality for collection pages:
The second image of a product will be displayed on hover over the main image with the ticked "Show second image on hover" option.
If you need to add an extra space between images, enable the "Add image padding" option.
To display a brand for each product, tick the "Show vendor" option.
If you need to post product ratings below the image and product information, enable "Show product rating". This option requires installing a third-party app. Choose any app from the Shopify App Store.
In the following examples, you can view how the page might look on desktop and mobile:
Filtering and Sorting
To display the product grid in the full width of the screen on the desktop view, enable the "Hide filters by default" option. The filters sidebar will be shown by hitting the "Show filter" button:
If you need to store filters on collection pages, tick "Enable filtering". The theme uses Shopify's storefront filtering. To set up filters, go to Shopify admin -> Online Store -> Navigation -> Collection and search filters. Here you can use the Shopify Search & Discovery app. Learn more about filters here.
Here is an example of how the filters might display on desktop view:
On mobile view, the filters will be shown in the slide-out popup when you press the button "Show filter":
Default filter state
Use the provided drop-down to arrange the default state of filters in the sidebar. Choose if to display filters "All open", "First open", or "All close":
The sorting order drop-down will be displayed on a page if you tick "Enable sorting". The sorting order of each collection depends on the settings you set in Shopify admin -> Products -> Collections. Read step-by-step instructions in the initial documentation on how to customize the sorting order in your admin.
Max filters in column
This option allows handling the visible number of filter items displayed in one column. Set the limit for the number of items displayed in a column on a scale from 0 to 25. If you have more items as you arranged on the scale, the button "More type" will be added to view the remaining filter items from this category:
Options for type "Round colors"
If you need to display color variants as round colors instead of the color list, paste the product variant names to the input field (for example "Color"). If you use more than one product option name for various products in your admin (for example "Color", "Pattern", "Material", etc.), insert each option name to the "Options for type "Round colors" input field using the line break as a separator.
Check the following example of how this functionality works on the page:
Price layout
To change the price layout, choose one of the options in the drop-down: "Slider and inputs", "Slider", or "Inputs". The settings can be applied to the desktop only.
The input fields for the price selector will be displayed on mobile by default:
In the following examples, you can view the difference in settings on the desktop view:
Show price slider coins
This functionality works for the Price layouts: "Slider and inputs" or "Slider".
In the drop-down, one can choose whether to use decimal numbers for the price or display only the integers in the slider using the options: "No ($100)" or "Yes ($100.00)". To display the fractional part of the price after the decimal point, use the "Yes ($100.00)" option:
Price slider step
Control the step of the price slider using one of the suggested options. The drop-down includes the list of values to change the step from 1 to 100, such as 1, 2, 5, 10, 20, 50, and 100.
Enable sticky sidebar
Activate the option to showcase the filters sidebar when scrolling down to the bottom of the product grid section.
Last updated