Product cards
Choose a card layout, set how many fit per row, and style the add button.
Product cards are what customers click to add items to their bundle. Style them in Design → Product Card Template.
1 the template picker, 2 the desktop and mobile Cards Per Row sliders, 3 the card colours.
Choose a template
Open your builder and go to the Design tab.
Click Product Card Template to expand it, then click Choose Template.
Under the template you want, click Select Template. The window closes on its own — or close it with Close.
| Template | Layout | Best for |
|---|---|---|
| Template 1 — Standard Card | Image on top, details below. An optional quantity stepper sits above the add button. | Most catalogues. |
| Template 2 — Horizontal Card | Image beside the details. | Long product names, size pickers. |
| Template 3 — Centered Card | Centered content. | Small, image-led catalogues. |
The card shows Current: Template 1 - Standard Card so you always know which is active.
What customers see on a card
- The price, with the original price crossed out when the product has a compare-at price. Templates 1 and 2 also show an N% OFF badge.
- A dropdown when the product has more than one variant. If the chosen variant has its own image in Shopify, the card photo switches to it.
- In Templates 2 and 3, the add button turns into a quantity stepper once the product is in the box.
- Prices and stock come live from Shopify each time the page loads, in the customer's own currency.
Set cards per row
Layout Settings has two separate sliders — desktop and mobile are set independently.
| Slider | Range | Default |
|---|---|---|
| Cards Per Row | 1–4 | 2 |
| Cards Per Row (Mobile) | 1–2 | 2 |
On desktop:
| Per row | Reads as |
|---|---|
| 2 | Generous. Good with large product photos. |
| 3 | Balanced. The usual choice. |
| 4 | Dense. Only with a wide layout and simple images. |
On mobile — screens up to 768px wide — you only get 1 or 2. Two fits more on screen and suits simple square images; one gives each product real space and works better when your cards carry a variant picker or a long title. Template 2's horizontal cards are the exception: they always take a full row on mobile, whatever the slider says.
Set the mobile one deliberately
Most Bundle Builder traffic is mobile. Four cards per row looks great on your desktop and tells you nothing about what the majority of your customers see — check both.
The add button
Under Button Customization:
| Setting | What it does |
|---|---|
| Button Text | The label. Defaults to Add. |
| Add to Kit Background / Add to Kit Text | Button colors. |
| Button Border Color / Radius / Width | Button shape. Radius runs 0–50px (default 8), width 0–10px (default 0). |
| Button Text Font Size / Style | Button typography. Defaults to 14px, Bold. |
| Out of Stock Label | What the button says, switched off, when a product or variant is unavailable. Defaults to Out of Stock. |
Further down the same card: 1 the quantity selector, 2 the add button, 3 the out-of-stock label.
Quantity selector
Template 1 can show a quantity stepper above the button, so customers add several of one product at once. The Quantity Selector section only appears while Template 1 is selected.
Find the Quantity Selector section.
Tick Enable quantity selector. It's on by default.
Style it with Quantity Background, Quantity Text, Quantity Border Color, Quantity Border Radius, and Quantity Border Width.
A high border radius gives you the pill shape most stores use — it's the default, at 50px.
Colors and typography
Product Card Colors covers card background, card border, product title, and product price. Product Typography sets the size and style of the title and price.
Borders or no borders
If your product images already have a white background, drop Border Settings → Border Width to 0 and let the images breathe. Bordered cards suit mixed or transparent imagery.
Need a layout none of the three templates give you?
You can write the card's markup yourself with Custom templates, the Custom design template row on the Design tab — the app keeps handling variants, pricing, stock, and the cart.