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.
Content
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 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 "Products in row" 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:
"Load more button". Adds a button to load additional products manually.
The example of the pagination type can be viewed on the DEMO.
"Infinite scroll". Automatically loads more products as the user scrolls down the page.
Check the following DEMO to view the example pagination type.
"Default". Displays numbered pages for navigation.
View the example of the described pagination type in the DEMO.
Products in row
Tip: Visitors can easily switch between 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:
Use the "Large devices (Desktop)" picker to arrange the number of products displayed in a row. The product grid can be negotiated to 2, 4, or 6 items in a row.
The "Medium devices (Tablet)" picker helps adapt the product grid to establish an appropriate number of products in a row equal to 2, 3, or 4.
The "Small devices (Mobile)" picker includes settings to display 1 or 2 products per row in a grid.
Product card
The "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle".
Use the "Information alignment" 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:
If you need to add an extra space between images, enable the "Add image padding" option.
The second image will be shown when hovering over the product card if the "Show second image on hover" option is enabled.
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:
Sorting
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. Find step-by-step instructions for setting up the sorting order in the admin in the original documentation.
Filtering
If you need to store filters on collection pages, tick "Enable filtering". The theme uses Shopify's storefront filtering. To set up filters, navigate to the Shopify admin -> Apps. Here you can use the Shopify Search & Discovery app. Learn more about filters here. This option activates additional settings related to the functionality.
Here is an example of how the filters might display on desktop view:
To display the product grid in full-width screen mode on the desktop view, enable the "Hide sidebar (filter) 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":
Enable sticky sidebar
Activate the option to showcase the filters sidebar when scrolling down to the bottom of the product grid section.
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":
Enable filters column limit
Switch on the option to reveal the filter limit settings below.
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 than you arranged on the scale, the button "More (option name)" will be added to view the remaining filter items from this category:
Swatches
Enable tooltip
Use the option to display a product variant name when the cursor is placed over it. The option will be applied to product cards throughout the store. Define the shape of the tooltips using the "Tooltip" in Theme settings -> Styles.
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 filter
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:
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.
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 "Change currency formatting" button.
This functionality works for the Price layouts: "Slider and inputs" or "Slider".
Tick the checkbox to deactivate 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.
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", "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.
Last updated