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

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

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

The question should be specific, self-contained, and written in natural language.
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.