> For the complete documentation index, see [llms.txt](https://docs.elitebundleapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elitebundleapp.com/customize-and-publish/design-and-customize.md).
# Design and customize
Customize Shopify bundle pages in Elite Bundle Builder: templates, product cards, steps, bundle cart, discount display, branding and custom CSS.
Every bundle is styled in the fullscreen editor: pick a template as a starting point, then adjust each part in the **Design** tab while the preview updates beside the settings.
① A Design page, ② the Product data hint, ③ the live preview
## The editor
Open a bundle from the dashboard. Settings are on the left, the live preview on the right, and the icon rail on the far left switches tabs. One save bar at the top covers every tab.
| Tab | What it controls |
| -------------------------------- | ----------------------------------------------------------------- |
| Template (not for fixed) | Starting layout, and where the bundle appears |
| Build (Options for multi-option) | Steps or options, and their products |
| Config | Rules, subscriptions, upsells |
| Offer | The discount, and bundle and product add-ons |
| Design | How the bundle looks |
| Publish | Status, theme setup, going live |
| Settings | The parent Shopify product, store-wide custom CSS, the shop texts |
{% hint style="success" %}
Hover a region of the preview to see which Design page controls it, and click to open that page. A **+** or a [product data](/customize-and-publish/product-data.md) spot opens its popover instead.
{% endhint %}
## Templates
A template is a set of starting values. After you pick one, every setting stays editable.
| Template | Layout | Where |
| ---------- | ---------------------------------------------------------------- | ----------------------- |
| Standard | Product grid, numbered steps, slot cart | Full page |
| Classic | Tabbed steps, searchable grid, discount labels inside the box | Full page |
| Compact | Dense list rows and a segmented tier bar, good for long catalogs | Full page |
| Horizontal | All steps on one page with a side-scrolling cart strip | Full page |
| Grid | Compact grid beside the product form, cart in a drawer | Inside the product page |
| List | Product rows beside the product form, cart in a drawer | Inside the product page |
{% hint style="warning" %}
Picking a template overwrites the layout settings (Product card & variants, Steps, Bundle cart, Discount display) with that template's values, so choose one before fine-tuning. Branding, variant display, quick view, the banner, your product data spots and the add button's **Button text** are kept.
{% endhint %}
For a full-page bundle the Template tab also sets **Where it shows**: **Replace the product page**, or **Dedicated page** (the product page redirects to a standalone bundle page).
### Multi-option layouts
Multi-option bundles always render inside the product page, so their Template tab picks a layout instead:
| Layout | Looks like |
| -------------- | --------------------------------------------------------- |
| Stacked cards | White cards on one panel, joined by a plus |
| Divided list | Catalog rows: a big image, the price in its own column |
| Numbered cards | An outlined card per item with its number and a big image |
| Tinted cards | Cards filled with a tint of your primary colour |
| Grid | Two cards per row with the image on top |
The layout and card style are set here only. Picking one also resets the item header and switches off prices inside the choices, since each item's header shows its price; both stay editable in Design → Choices. Hiding sold-out choices and the discount badge keep your settings.
## Design pages
Design is a list of pages. Open one, adjust it, use the back arrow to return.
{% tabs %}
{% tab title="Build your own bundle" %}
### Banner
Heading and subheading, each with its own **Translate** button, desktop and mobile images, and a style: **Split**, **Centered overlay** or **Full background**.
### Product card & variants
* **Text add button**: a labelled button, or a compact icon button. With it on, **Button text** under it sets this bundle's label ("Add to box"), on the cards and in quick view, with its own **Translate** button
* **Hide out of stock items**
* **Show each variant as its own card**: every size or colour becomes a card instead of a picker
* **Show variant picker** on the card
**Options display** styles the picker one Shopify option at a time. Click **Fetch variant options** to load every option in the bundle (Colour, Size), then per option choose a **Style** (Label, Swatch, Dropdown) and **Content** (text, image and text, colour and text, or image or colour only for swatches). Set a picture or colour per value; unset values fall back to the variant's own image or a grey chip. These settings survive a template switch.
① Fetch variant options, ② Colour, shown as swatches, ③ Size, shown as labels, ④ the picker on the card
### Steps
* **Steps shown as**: Progress (numbered circles), Tabs, or Stacked
* **Lock icon**: on steps shown locked until their condition is met (see [Rules](/create-bundles/build-your-own-bundle.md#config-tab-rules)). Our padlock, or your own from Shopify Files. It stays when you switch templates.
* **Product search** above the products
* **Quick view button**: opens a modal with gallery, description, variant picker, add-ons, quantity and add button. Default eye icon or your own from Shopify Files. It stays on while [add-ons](/create-bundles/build-your-own-bundle.md#offer-tab-add-ons) are on, since shoppers fill them in there.
* **Image slideshow** (grid layout): arrows on each card's image let shoppers browse the product's photos. They show on hover, and always on touch screens. It stays when you switch templates.
### Bundle cart
* **Direction**: vertical list or horizontal strip
* **Item style**: Slots (squares counting toward the target) or Rows
* **Slot image** from Shopify Files for empty slots
* **Footer style**: total and button on one line, or stacked
* **Show savings**
* **Drawer**: on product-page layouts, collapse the cart behind a toggle
### Discount display
* **Style**: Progress (bar with tier markers), Segmented (split bar), or Box (one button per tier; quantity triggers only. The shopper picks a box size, the cart cannot hold more, and choosing a smaller box drops the last-added items).
* **Label placement** for boxes: inside, overlaid, or hidden
* **Progress bar** beneath the boxes
* **Savings hint**: the "add 2 more to save 10%" line
{% endtab %}
{% tab title="Multi-option bundle" %}
### Variant display
Click **Fetch variant options** and every option appears: a product's own Shopify options (Colour, Size) for *Product with options* choices, and a **Product choices** row for *Products* choices. Each gets a **Label**, **Swatch** or **Dropdown** style, a content type, and per-value images or colours.
### Choices
The layout itself is picked in the Template tab. This page sets what every option shows:
* **Item header**: show the image, product title, price and compare-at price. The header follows the shopper's pick, so the image and price change with the variant, using the images set in Variant display.
* **Show each item's price** inside the choices
* **Hide sold-out choices**
* **Show a discount badge** beside the total
* **Show + between products** (not in Grid)
{% endtab %}
{% endtabs %}
### Product data
Product data has no page of its own: the Design list shows a **Product data** hint instead. In the preview, hover a product card, the cart, an option (multi-option) or "In this bundle" (fixed) and click **+** at a spot to show the SKU, vendor, stock left, savings or a text, number, date, URL or colour metafield there, plus add-on labels on build your own bundles. The bundle cart also takes lines about the whole bundle, with cart variables such as "Add 2 more for 10% OFF". For quick view's spots (build your own), switch the preview from **Bundle** to **Quick view**. See [Product data](/customize-and-publish/product-data.md).
### Branding
Per bundle, so two bundles can look different.
| Group | Settings |
| ------------------------------ | ---------------------------------------------------------- |
| Brand colours | Primary, Background, Surface, Text |
| Corners & buttons | Corner radius; pill or rounded buttons |
| Product cards (build-your-own) | Card size, image ratio and fit, swatch and thumbnail sizes |
| Side cart (build-your-own) | Slot columns, item thumbnail size |
| Quick view (build-your-own) | Modal width, gallery image ratio |
| Option pickers (multi-option) | Swatch and thumbnail sizes |
Buttons, chips and the quick view modal pick up these tokens automatically.
## Text and translations
Shop texts, such as the cart title, Total and the offer hints, live in **Settings → Language & Texts** and apply to every bundle, so one translation pass covers them. Texts that belong to one bundle (step titles, the banner, the add button's label, free gift labels, product data lines, add-on labels) are edited where they're set, each with its own **Translate** button. The Language & Texts page lists only the texts this bundle's type uses: a fixed bundle shows just "In this bundle", a multi-option bundle its total, badge, sold out and subscription texts. The add button's label is under **Design → Product card & variants → Text add button**.
{% hint style="info" %}
**Click a text in the preview to edit it.** Texts such as the cart title, Total, the item count, savings, Sold out and the offer hints show an outline on hover; a click opens Language & Texts at that text's field. Buttons open their design settings instead.
{% endhint %}
{% stepper %}
{% step %}
Open the **Settings** tab, then **Language & Texts**.
{% endstep %}
{% step %}
Pick a language tab. Your store's default sits beside every published Shopify language.
{% endstep %}
{% step %}
Enter the translation. Keep tokens such as `{percent}`, `{remaining}` or `{step}` in place. The **Unlock hint** texts are the line on a locked step ("Add 2 more in Candles to unlock").
{% endstep %}
{% endstepper %}
The storefront renders the right language for each shopper. Product data lines are not in Language & Texts: translate each one with the **Translate** button on its text box (see [Product data](/customize-and-publish/product-data.md#translate-the-text)). **Settings → Custom CSS** is also store-wide, for anything Design does not cover.
## Check at mobile width
Many shoppers build bundles on a phone. Switch the preview to mobile and check:
* [ ] Product cards are easy to tap
* [ ] Step or option navigation is visible
* [ ] Variant pickers are usable
* [ ] The cart does not hide important content
* [ ] Text is readable without zooming
{% hint style="info" %}
Nothing reaches the storefront until you save. Keep the bundle **Unlisted** while you work on the design.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.elitebundleapp.com/customize-and-publish/design-and-customize.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
