Product grid
In the "Product grid" section you can apply layout settings to collection pages.
Last updated
In the "Product grid" section you can apply layout settings to collection pages.
Last updated
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.
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", "Bottom", or "Both". 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.
Adjust the "Bottom spacing" scale from 0 to 100 pixels to either reduce or expand the margin beneath the "Product grid" section.
Turn on the "Enable grid buttons" option to display the grid view buttons at the top of the product grid. Once activated, the grid buttons will appear centered, and the product quantity will be aligned to the right on the desktop and tablet. On mobile, the grid view buttons will be set to the right, while the product quantity will be moved to the left of the screen. These buttons allow visitors to toggle between displaying the number of products per row. Set the desired default parameters for different devices using the "" options.
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.
Using the "Pagination type" drop-down, set how products are loaded on the page:
"Default". Displays numbered pages for navigation.
"Load more". Adds a button to load additional products manually.
"Infinite scroll". Automatically loads more products as the user scrolls down the page.
Tip: Visitors can easily switch between the preferred grid modes if the "Enable grid buttons" option is turned on. The grid view buttons on different devices correspond to the options available in each picker:
The default number of products per row on the desktop can be set in the "Products in row" picker. Choose whether to display 2, 4, or 6 items in each row.
The "Products in row (Tablet)" picker includes three options to set the default grid view of products in a row on tablets. Select one of the options: 2, 3, or 4.
In the "Products in row (Mobile)" picker, decide whether to display 1 or 2 products in a row by default on mobile.
The "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle".
Use the "Information align" picker to arrange the product card details to the "Left", "Center", or "Right" on all screen sizes.
Enable or disable each option described below to decide on the necessary functionality for collection pages:
The second image will be shown when hovering over the product card if the "Show second image on hover" option is enabled.
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.
Turn on the "Enable quick view" picker to display the "Quick View" button when hovering over a product card.
In the following examples, you can view how the page might look on desktop and mobile:
Here is an example of how the filters might display on desktop view:
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:
On mobile view, the filters will be shown in the slide-out popup when you press the button "Show filter"/"Filter":
Default filter state
Use the provided drop-down to arrange the default state of filters in the sidebar. Choose whether to display filters "All open", "First open", or "All close":
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 color"
If you need to display option values as round colors instead of the color list, paste the option names into 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 into the "Options for type "Round color" input field using commas as separators.
Check the following example of how this functionality works on the page:
Options for type "Rectagular picture"
To display option values as rectangular colors/pictures, paste the option names into the provided input field. Separate each new product option with a comma.
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 only to the desktop.
In the following examples, you can view the difference in settings on the desktop view:
The input fields for the price selector will be displayed on mobile by default, regardless of the settings applied in the Theme Editor:
Hide cents in price slider
Note! The coins will be displayed in the price slider if you set decimals in your Shopify admin -> Settings -> General -> Store defaults. There you can edit the Currency formatting by pressing the three dots [...], then the button "Change currency 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 tooltip
Enable sticky sidebar
Activate the option to showcase the filters sidebar when scrolling down to the bottom of the product grid section.
View the example of the described pagination type in the .
The example of the pagination type can be viewed on the .
Check the following to view the pagination type example.
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 the Shopify admin -> Apps. Here you can use the Shopify Search & Discovery app. Learn more about filters .
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 on how to customize the sorting order in your admin.
Use the option to display a product variant name on hover. The option will be applied to product cards throughout the store. Define the shape of the tooltips using the "Tooltip and button border radius" in Theme settings -> .
