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

## 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 (build-your-own only)   | Starting layout, and where the bundle appears                          |
| Build (Options for multi-option) | Steps or options, and their products                                   |
| Config                           | Rules, custom data on cards                                            |
| Offer                            | The discount                                                           |
| Design                           | How the bundle looks                                                   |
| Publish                          | Status, theme setup, going live                                        |
| Settings                         | The parent Shopify product, store-wide custom CSS, all storefront text |

{% hint style="success" %}
Hover a region of the preview to see which Design page controls it, and click to open that page.
{% 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 and quick view 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 bundles have no Template tab; they always render inside the product page.

## 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, subheading, desktop and mobile images, and a style: **Split**, **Centered** or **Background**.

### Product card & variants

* **Text add button**: a labelled button, or a compact icon 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.

### Steps

* **Steps shown as**: Progress (numbered circles), Tabs, or Stacked
* **Product search** above the products
* **Quick view button**: opens a modal with gallery, description, variant picker, quantity and add button. Default eye icon or your own from Shopify Files.

### 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

* **Show each item's price**
* **Hide sold-out choices**
* **Show a discount badge** beside the total
  {% endtab %}
  {% endtabs %}

### 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

All storefront text lives in **Settings → Language & Texts** and applies to every bundle in the store, so one translation pass covers everything.

{% 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}` or `{remaining}` in place.
{% endstep %}
{% endstepper %}

The storefront renders the right language for each shopper. **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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.elitebundleapp.com/customize-and-publish/design-and-customize.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.