Skip to main content
Product Grid [Zipify Pages]

Introducing the Product Grid element - Showcase up to 20 unique products with flexible and efficient grid and slider layout options!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

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:

  1. Drag & Drop the products into a different order using the ⋮⋮ button

  2. Delete a product by clicking the 🗑 button

  3. Expand the product list by clicking the "Show More" button

  4. 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

  1. 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:

  2. All changes made in 1 column will be automatically applied to the rest of columns (drag and drop elements, adding, removing etc)

  3. Product Variant options are customized all in one place (in the sidebar)

  4. The ability to select a Shopify "Collection" for the Product Grid will be added soon! Key features:

    1. Ability to select the Collection and all products will be pulled from Shopify automatically

    2. No need to re-sync products when some updates are made on the Shopify side

Did this answer your question?