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.
Layout
Use the "Dividing line" drop-down to specify whether to add the line separator on the top or bottom of the "Product grid" section. If you need to use the line, select its position as "Top" or "Bottom". To hide the dividing line, use the "None" option.
The "Top spacing" option controls the space between the collection name and the "Product grid" section. Use the scale from 0 to 100 pixels to set the desired parameter.
Handle the parameters on the "Bottom spacing" scale from 0 to 100 pixels to add or remove the space at the bottom of the "Product grid" section.
Content
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 number of products per row on the desktop can be set in the "Products in row" drop-down. Choose if to display 2, 4, or 6 items in each row. The option is preset for a mobile view to show two products in a row by default.
The "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle".
Use the "Information align" drop-down to arrange the product card details to the "Left", "Center", or "Right" for the desktop and mobile modes.
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.
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 (option name)" 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:
Hide cents in price slider
Note! The coins will be displayed in the price slider if you set decimals in your Shopify admin -> Settings -> Store details -> Store currency. There you can edit the Currency formatting by pressing the button "Change formatting".
This functionality works for the Price layouts: "Slider and inputs" or "Slider".
Tick the checkbox to deactivate the decimal numbers for the price so only the integers can be shown in the slide. To display the fractional part of the price after the decimal point, untick the 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
