Design and Customize

Customize your Shopify bundle in Elite Bundle Builder — pick a template, then set the product catalog, steps, bundle cart, discount display, branding, and store-wide texts.

Every bundle is customized in the fullscreen bundle editor. You pick a template as a starting point, then adjust each part of the layout from the Design tab. Changes appear immediately in the live preview beside the settings.

Open the Editor

1. Open the app dashboard.
2. Click the bundle you want to edit.
3. The editor opens fullscreen, with the settings on the left and a live preview on the right.
4. Use the icon rail on the far left to move between tabs.
5. Save with the save bar at the top.

The Editor Tabs

Tab	What it controls
Template	The starting layout, and where the bundle appears
Build (Options for multi-option bundles)	The steps or options, and the products in each
Config	Bundle rules and where customers go after adding to cart
Offer	The discount itself
Design	How the bundle looks
Publish	Status, theme setup, and going live
Settings	Store-wide custom CSS and all storefront text

Start From a Template

The Template tab is where you choose the layout. A template is simply a set of starting values — after you pick one, every setting stays editable in the Design tab.

For build-your-own bundles:

Template	Layout
Standard	Product grid, numbered steps, slot-based cart
Classic	Tabbed steps, searchable grid, discount labels inside the box
Compact	Dense list rows and a segmented tier bar — good for long catalogs
Horizontal	All steps on one page with a side-scrolling cart strip
Grid	Compact product grid beside the product form, cart in a drawer
List	Product rows beside the product form, cart in a drawer

Standard, Classic, Compact and Horizontal are full-page layouts. Grid and List sit inside your theme's product page.

For multi-option bundles, the template chooses the option selector: Clean Dropdowns, Image Selector, or Product Cards.

Picking a template overwrites the Design settings with that template's values, so choose one before fine-tuning.

Where the Bundle Appears

For a full-page build-your-own bundle, the Template tab also sets Where it shows:

• Replace the product page — the bundle takes over its own product page.
• Dedicated page — the product page redirects to a standalone bundle page.

Multi-option bundles always render inside the theme's product page.

The Design Tab

Design is organized as a list of pages. Open one, adjust it, and use the back arrow to return.

Product catalog (build-your-own bundles)

How the selectable products are listed.

• Layout — Grid (image above the text) or List (image beside it)
• Search — show a search box above the products
• Hide sold-out products — drop them instead of showing them unavailable
• Text add button — a labelled button, or a compact icon button
• Variant picker — show one, and whether it is a dropdown or buttons
• Variant images — show thumbnails in the picker

Steps (build-your-own bundles)

How customers move between steps: Progress (numbered circles), Tabs, or Stacked (every step on one page).

Bundle cart (build-your-own bundles)

The running selection.

• Direction — a vertical list, or a horizontal scrolling strip
• Item style — Slots (squares counting toward the target) or Rows
• Slot image — an image from Shopify Files to fill empty slots
• Footer style — total and button on one line, or stacked
• Show savings — display the amount saved
• Drawer — on product-page layouts, collapse the cart behind a toggle

Discount display (build-your-own bundles)

How the tier offer is shown.

• Style — Box (one button per tier), Progress (a bar with tier markers), or Segmented (a split bar)
• Label placement — where a box shows its discount: inside, overlaid, or hidden
• Progress bar — add a bar beneath the boxes
• Savings hint — the "add 2 more to save 10%" message

Options display (multi-option bundles)

How each option is presented.

• Selector — Dropdown, Chips, or Cards
• Show product images — thumbnails on each choice
• Show each item's price
• Hide sold-out choices — drop them instead of showing them disabled
• Columns — a fixed column count for chips and cards, or Auto
• Discount badge — show the percentage saved beside the total

Branding

Colors and corner rounding for this bundle: Primary, Background, Surface, Text, and a border radius. Branding is per bundle, so two bundles can look different.

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.

1. Open the Settings tab in the editor.
2. Open Language & Texts.
3. Pick a language from the tabs. Your store's default sits alongside every published Shopify language.
4. Enter the translated text. If a field uses a token such as {percent} or {remaining}, keep the token in your translation.

The storefront renders the right language for each buyer automatically.

Settings → Custom CSS is also store-wide, for changes the Design tab does not cover.

Preview Before You Save

The preview beside the settings renders the real storefront components, so what you see is what customers get. Click a region of the preview to jump to the tab that controls it.

Preview at mobile width too — many customers build bundles on a phone. Check that:

• Product cards are easy to tap.
• Step or option navigation is visible.
• Variant selectors are usable.
• The cart does not hide important content.
• Text is readable without zooming.

Design Best Practices

• Match your store's colors and typography.
• Keep step names short and action-focused.
• Use high-quality product images.
• Keep the most important buying action high on the page.
• Make the discount messaging clear but brief.
• Preview after switching templates, since that resets the Design settings.

Design Launch Checklist

Before publishing, confirm:

• The bundle looks native to your store.
• Customers understand the first action immediately.
• The selection is visible as they build.
• Discount messaging is clear.
• The mobile experience is easy to complete.