Design and Customize

Use the drag-and-drop bundle page editor in Elite Bundle Builder to customize Shopify bundle layouts, product grids, discounts, buttons, images, videos, and mobile design.

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.