> 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

Elite Bundle Builder includes a drag-and-drop visual editor so you can build a bundle page that feels native to your storefront without custom code.

You are not limited to a fixed template. Start from a template, then drag sections into the canvas, reorder them, adjust spacing, change styling, and save a custom storefront layout for each bundle.

## Open the Design Editor

1. Open the app dashboard.
2. Select the bundle you want to edit.
3. Click **Edit design**.
4. Drag blocks into the canvas or select existing blocks to edit them.
5. Reorder sections from the layers panel when needed.
6. Customize layout, colors, text, spacing, and bundle sections.
7. Save your changes.

## Drag-and-Drop Blocks

The editor includes reusable blocks that you can drag into the bundle design.

For Build Your Own Bundle pages, available block groups include:

| Group    | Blocks                                       |
| -------- | -------------------------------------------- |
| Layout   | Container                                    |
| Commerce | Step Container, Side Cart, Discount          |
| Content  | Heading, Text, Divider, Button, Image, Video |

For Multi-Option Bundle pages, available block groups include:

| Group   | Blocks                                       |
| ------- | -------------------------------------------- |
| Layout  | Container                                    |
| Bundle  | Option Selector, Price Display, Add to Cart  |
| Content | Heading, Text, Divider, Button, Image, Video |

Use containers to structure the page, then place commerce and content blocks inside that layout.

## What You Can Customize

Depending on the bundle type and template, you can customize:

* Page background, width, and padding
* Section layout, including vertical stacks, horizontal rows, columns, and grids
* Section spacing, margins, padding, borders, border radius, shadows, and backgrounds
* Headings and text
* Font size, weight, alignment, line height, color, and text styling
* Product grid layout and step presentation
* Product card appearance
* Cart or selected-items area
* Discount display, progress bar, tier labels, colors, and messages
* Buttons, including text, style, colors, borders, spacing, shadows, and opacity
* Images, including image URL, alt text, sizing, object fit, radius, and shadow
* Videos, including YouTube, Vimeo, or MP4 URLs, sizing, autoplay, loop, mute, and controls
* Mobile layout behavior

The bundle products, options, prices, cart contents, and discount tiers still come from your bundle setup. The design editor controls how those elements are arranged and presented to customers.

## Multilingual Support & Translations

Elite Bundle Builder natively supports translating storefront text directly within the visual design editor for a localized shopping experience.

When editing text fields like headings, buttons, custom labels, and discount badges:

1. Look for the **Translate** button next to supported text fields in the right sidebar.
2. Click the button to open the translation panel.
3. You will see your store's default language alongside any additional published Shopify languages.
4. Enter translated text for any language you want to support. If a field uses dynamic tokens (e.g., `{percent}` or `{remaining}`), be sure to include those as it is in your translated text.
5. The storefront will automatically render the correct language based on the active buyer's locale.

## How to Think About Layout

Use this simple structure for most bundle pages:

1. Add a heading or short intro at the top.
2. Place the bundle selection area where customers can start quickly.
3. Keep the cart or selected-items area visible.
4. Add discount messaging near the selection area.
5. Use images, video, or extra text only when they help customers decide.

Containers are the main layout tool. Use them to create:

* A full-width section
* A two-column desktop layout
* A stacked mobile layout
* A grid for grouped content
* A sticky side cart area

## Design Best Practices

Use these rules to make the bundle feel trustworthy and easy to buy:

* Match your store's colors and typography.
* Keep step names short and action-focused.
* Use high-quality product images.
* Make the add-to-cart button easy to find.
* Put the most important buying action high on the page.
* Keep mobile layouts clean and compact.
* Avoid too many decorative sections before the customer can start choosing.
* Preview after large layout changes, especially when moving cart or discount blocks.

## Template Changes

Changing the selected template can reset the bundle design to that template's default layout. Before switching templates, make sure you are comfortable rebuilding any custom design changes.

## Mobile Review

Always preview the bundle on mobile before launch. Many customers will build bundles from their phone, so check:

* Product cards are easy to tap.
* Step navigation is visible.
* Variant selectors are usable.
* The selected-items cart does not hide important content.
* Text is readable without zooming.

## Design Launch Checklist

Before publishing, confirm:

* The bundle looks native to your store.
* Customers can understand the first action immediately.
* The selected-products/cart area is visible.
* Discount messaging is clear.
* The mobile experience is easy to complete.


---

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