The Product List is a repeater-based element that displays products from your store in a list layout. It automatically generates a tile for each product based on the connected data source and any filters you apply. Each tile is a Product Div, which you can fully customize with elements like images and text. Any dynamic data added to these tiles will automatically reference one of the many products in the list.
Product list allows you to create separate tile designs for Simple and Variable products. To do this, locate the Product Div nested inside the list in the right-hand sidebar under the Structures tab. Use the dropdown to switch the Product Div between Simple and Variable, then design each version separately. Builder will apply your design to all products of that type.
The Editor tab controls which products appear in the list.
Order by – Choose how to sort products: by name, price, or other available attributes.
Order – Set the direction of the sort: ascending or descending.
Query buttons – Filter your list to show:
All – All products
On Sale – Only products with sale pricing
Categories – A specific subset of categories (selectable from the dropdown below)
The Styler tab controls the visual layout and styling of the Product List element. You can configure spacing, borders, shadows, size, and background color. This affects how the entire list appears in your flow.
Aside from styling the list itself, each tile (Product Div) inside the grid can be styled independently, just like a normal Div Container.
At the top of the Styler tab, you can define how the list appears in different states:
Default – Normal appearance
Hover – When hovered over
Active – When tapped or clicked
Disabled – When the list is inactive
Each state can have its own styling applied.
Space between rows – Defines vertical spacing between product rows in the list. You can use px or % units.
Background Color – Apply a solid background color to the list. Supports static, global, and dynamic values.
Height and Width – Controls how the list fills space in its parent:
Fill – Expands to fill the parent container
Fit – Shrinks to match the content
Scroll – Enables scrollbars if content exceeds size
Custom – Set a fixed pixel or percentage value
Spacing controls the outer and inner space of the element:
Padding – Adds space inside the element (between the content and border).
Margin – Adds space outside the element (between this and surrounding elements).
You can apply padding and margin:
Per side (top, right, bottom, left)
Or use Apply All to apply the same value everywhere
Radius – Rounds the corners of the grid. Set each corner or use Apply all for uniform rounding.
Styling – Choose which borders to show (all, none, specific sides).
Border width – Set thickness in pixels.
Border color – Supports static, global, or dynamic values.
Border style – Select from solid, dashed, or dotted borders.
Shadows – Adds depth to the grid using drop shadows. You can:
Adjust X and Y offset
Set blur and spread
Choose a shadow color
Use Clear all shadows to remove them
The Advanced tab provides options for adding custom styles to the product list.
Use this field to apply custom CSS rules to the entire product list. These styles override any settings configured in the Styler tab. This affects the list as a whole and not individual tiles within it.
