Overview
We're thrilled to introduce the Product Grid element! Showcase up to 20 unique products or up to 50 products from a Collection, with flexible grid and slider layout options. Enjoy efficient editing—modifications in one column are automatically applied to all, streamlining your workflow and maintaining consistency for a polished, professional look.
Adding the Product Grid
The Product Grid element can be added as a separate Section to your page by selecting it from the "Products" category of the page section library within the builder. There are two sections available that use the Product Grid element, each with a different Layout (Grid / Slider) preconfigured depending on your needs:
Alternatively, it can be added to an existing Section on the page (excluding "Product" sections) by clicking on an element, then on the blue ➕ button above/below the element. Then select "Grid" from the Products category of the elements popup:
Adding Products or a Collection to the Grid
At Main > Product source in the sidebar there are two options available to choose from:
Specific Product - Select up to 20 unique products to use in the grid
Collection - Select a Collection with the ability to display up to 50 products
📝No need to re-sync products - when making some changes in a Collection in Shopify admin, all changes will be synced on Pages automatically.
When adding the Product Grid section from the sections library, you then need to ensure that the "Product Grid" element is selected by clicking on it directly, or by clicking on the breadcrumb link in the header.
Next, click the "+ Add Product" or "Choose Collection" button (depending on the product source chosen) to open the "Product Select" or "Choose Collection" popup where you can select and add products or a collection.
Check the box next to each Product, or click on the name of the Collection, then click the Save button:
After products are added via the "Specific Product" product source, in the Main tab of the sidebar you can:
Drag & Drop the products into a different order using the ⋮⋮ button
Delete a product by clicking the 🗑 button
Expand the product list by clicking the "Show More" button
Add additional products by clicking the "+ Add Product" button
📝 You can also deselect product(s) via the "Product Select" popup shown when choosing this option
Layout Settings
Two distinct Layout settings are available for the Product Grid:
Grid - display products in a stacked grid layout
Slider - display products in a horizontal carousel layout
📝Different layout options and settings can be used on each edit mode (Desktop/Tablet/Mobile) independently
For the Grid option, you can:
Choose the device type to edit on (Desktop / Tablet / Mobile)
Set the "Products per line" value:
1-6 for Desktop
1-4 for Tablet
1-2 for Mobile
Set the "Product Spacing" value using predefined values (S/M/L/XL) or set a Custom value in px using the slider or input field
For the Slider option, in addition to the "Products per line" and "Product Spacing" settings, you can:
Toggle on "Swipe Assist Arrows" and/or "Dots" to more easily navigate the carousel items
Toggle on "Loop" and/or "Slideshow" options to have the carousel continuously cycles through the items without stopping
Important Notes
There is a limit of 20 unique products which can be added per page (Shopify limit) via the "Specific Product" product source. When the limit is reached, an error banner will be shown at the top of the builder. The page can't be published or updated until the product limit is addressed:
All changes made in 1 column will be automatically applied to the rest of columns (drag and drop elements, adding, removing etc)
Product Variant options are customized all in one place (in the sidebar)
Product Grid (Flexible)
The Product Grid element is designed for efficient management of all products in the grid simultaneously. However, if you need a 'Product Grid' with a few independent changes in one or more columns then it's recommended to use the "Product Grid (Flexible)" section:
This section features a row containing 8 columns, each with a Product element. This setup allows each product element to be edited independently within its respective column as needed.
You can also follow the quick and easy steps below to create a customized version if desired:
1. Add a new "1 Column" Section to your page from the "Layout" category of the section's library:
2. Click the "+ Add Element" button and select "Box" from the Product category of the elements popup:
📝You can also add the "Content Carousel" element instead, and the "Box" product element within if you'd like your new custom product grid to have carousel functionality.
3. Under the "Layout" tab in the sidebar, choose the "stack" option for the Product element:
4. Apply desired edits to the elements included in the Product Box such as:
Adjusting the Image size
Center-aligning the element(s)
Adding additional elements or removing unneeded ones
Etc.
5. Once the single Product Box is configured to your liking, click on the Row element that contains the Product Box, then duplicate the Column to add as many duplicates as desired:
6. Use the "Columns per line" setting available for the Row element to adjust how many columns are shown per line on each device type:
📝This setting is particularly helpful on the Mobile view, to show a grid style layout there by setting the "Columns per line" value to 2:
7. Duplicate the Row to add as many rows and product columns as desired:
8. You will now have a Custom "Product Grid" section configured. In this new custom grid, changes made within each product column are independent from one another. This means you can add, remove or rearrange elements within each product column without affecting any other column:
9. To connect a product to each product column, click on a product column to ensure the "Product" element is selected, then on the "Add Product" button to add a product. Repeat this process for all product columns in the new custom grid:
10. If certain style changes were made to elements in a product column after duplicating it (step 5 above), but you want those changes applied to other column(s) as well you can use the "Copy/Paste Element Styles" feature available in the builder.
Simply right-click on the element you want to copy the styles from and select "Copy styles":
Next, right-click on the element of the same type that you want to copy the styles to and select "Paste Styles":
