Overview
We're thrilled to introduce the Product Grid element! Showcase up to 20 unique products 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 to the Grid
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 (1).
Next, click the "+ Add Product" button (2) to open the "Product Select" popup where you can select and add products:
After you add the Grid element from the elements popup, you will automatically be prompted to select products from the "Product Select" popup. Up to 20 unique products can be added. Just check the box next to each product, then click the Save button:
After the products are added, 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). 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)
The ability to select a Shopify "Collection" for the Product Grid will be added soon! Key features:
Ability to select the Collection and all products will be pulled from Shopify automatically
No need to re-sync products when some updates are made on the Shopify side
Creating a Custom "Product Grid"
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, follow the quick and easy steps below to create a customized version:
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:
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":
