There are two ways to show and sell products on a page. The Product List element is the fast one: drop it in, it renders the step’s products with prices, images and variants, no configuration beyond its settings. A custom product list is the flexible one: with data binding, any container you design becomes a selectable product entry, any layout you can build can sell.
Product data exists on checkout, upsell and downsell steps. Both approaches below assume one of those.
Creating the products themselves, prices, subscriptions, variants, is covered in Adding Products to Your Funnels. This guide is about how they’re displayed.
The Product List element
Drag the Product List widget onto the page and it renders the products attached to that step.
One product list per step, visible or hidden.
What each line renders:
-
The product title if one is set, otherwise the product name. Use the title for buyer-facing copy (“3-Pack — Save 20%”) while the name stays your internal label
-
The displayed price if one is set, otherwise the actual price. The displayed price is free text, so it can say “$19.99 (50% OFF)” while the real price does the charging
-
The product image, and the variants selector when the product has variants
Product display settings
Each product’s Settings control how its line behaves in the list:
-
Required purchase: the item is always in the order (off by default)
-
Hidden: the line doesn’t show
-
Highlight: a colored background on the line
-
Top tag: a short pitch above the line (“MOST POPULAR”), with its own background color and size (small or big)
-
Side tag: a single word beside the line
Tags plus the highlight are the cheapest conversion lever in the list: put “BEST VALUE” on the bundle you want picked and highlight the same line.
How variants render
A product with variants gets an expandable options selector in the list. Each variant can carry its own image and price (set on the product, default price applies where you leave the variant’s price blank):
When the buyer picks a variant, the line’s image and price update to match:
Selling on Shopify? Dynamic variants map these options to your Shopify variants automatically.
The list’s own settings
Click the list once for its settings: the usual styling tools (fonts, spacing, borders, backgrounds), plus two that matter:
Manage Products opens the step’s products for editing without leaving the page:
Selection type decides how much a buyer can take, for the whole list:
-
Single checkout: one item of one product (a bag of coffee or a set of cups)
-
Multi-checkout: one item of several products at once (coffee and cups)
-
Multi-Quantity: bulk quantities (up to 10) of several products at once
Custom product lists with data binding
When the classic element’s layout isn’t your design, build your own: any container bound to a Product becomes a selectable product entry. Cards, comparison tables, image-first tiles, whatever you can build in the editor can sell.
Turn a container into a product entry
-
Design the entry: a container with the image, name, price and whatever else the offer needs
-
Select the container, open the Data tab, and under Data bindings click the Dataset slot
-
Choose Product and pick which product from the dropdown, then Save
The container is now that product’s entry, and it’s selectable as-is: an element bound to a Product implicitly behaves as if it holds a radio button bound to that product. Clicking the card selects it, and selecting another product-bound card deselects this one. Zero form elements needed for single-select.
Product-bound containers also get a Selected state in the style panel, design the chosen look there (border, background, badge) so buyers see which package they picked.
Multi-select: add a checkbox
The implied behavior is single-select. To let buyers select several products at once, explicitly add a Checkbox form element inside each bound container, it can be visually hidden, the card stays the click target.
Bind the content inside
Elements inside the bound container can pull the product’s own data instead of static text. Click an element, open Data → Data Binding, and bind it to:
- Product title, Price, Displayed price, or Product image
Leave “Fallback to default data if no value” on: if the product has no image or no displayed price, the buyer sees the static content you designed instead of a blank, so design that static content as a believable placeholder.
Generate the whole list with a repeater
One card per product by hand works for two or three packages. For a whole catalog, bind a Repeater to the Products collection, design a single card inside it, and every product on the step gets one, the card’s elements bind to the collection’s fields (shown as Inherit from parent).
The collection binding can filter what shows: include or exclude order bumps, hidden products and subscription products, and cap the count with max.
If a card won’t select
The container needs either a Product binding (or a products-collection card), or a form field bound to Product ID inside it. And if you built explicit radios across separate containers, give them all the same radio group name so picking one clears the others.
Preview and test
Save, preview, and click through as a buyer: select each entry, check the Selected state shows, pick variants and confirm prices update. Then run a test payment before real traffic.
Keep learning
-
Page Builder overview: the map of the whole editor and every element
-
Payment Form: the element that charges for what’s selected here
-
Adding Products to Your Funnels: creating products, prices, subscriptions and variants
-
Repeater & Carousel: the element behind generated product lists
-
Want a proven offer layout? Clone a funnel from Templates
Questions? Reply below or ask in Ask the community.
Missing an editor feature? Suggest it in Feature requests — the most-voted requests shape the roadmap.