The Design tab gives you full control over how your Hoppy Bundles offers look and feel on your storefront. From fonts and colors to borders, buttons, tier highlights, and product cards — almost every visual aspect of your offer widgets can be customized to match your brand.

We've provided a wide range of settings so you can either:

• Quickly launch using ready-made templates and themes
• Or deeply customize every detail to perfectly match your storefront

Most color-related settings include:

• A Color Picker (click the color swatch to open it)
• A Hex Code Input (type your exact brand color directly)

This makes it easier whether you prefer visual selection or exact brand colors.

⚠️ Before You Begin

To configure Design settings:

→ Open an existing offer → Or create a new offer first

Then open the Design tab inside the offer editor.

The Design tab is available for all offer types in Hoppy Bundles:

• Bundle Offer
• Quantity Break (Volume Discount)
• Build Your Own Bundle (BYOB)
• Product Addons
• Upsell Slider
• Category Quantity Break

ℹ️ The Design tab looks slightly different depending on the offer type — this guide covers every section and points out the differences as we go.

👀 Understanding the Design Tab

📍 Where it lives

Open any offer and you'll see tabs at the top of the editor — for most offer types these are General, Design, and Targeting & Placement. Click Design to open the styling settings.

• For BYOB offers, the tabs are General, Product Selection Logic, and Design.

🖥️ Live Preview

Every offer editor includes a live preview panel beside the settings, showing both a Desktop Preview and a Mobile Preview. As you change any design setting — a color, a font, a border — the preview updates instantly, so you always know exactly how your widget will look before saving.

ℹ️ The preview shows your styling changes with sample products. Always double-check the final look on your live storefront after publishing.

🎨 Templates & Themes (Quantity Break)

Quantity Break offers come with ready-made visual styles so you don't have to design from scratch.

🖼️ Offer Templates

• What it does: When you create a new Quantity Break offer, you start by picking a ready-made offer template under Select Your Preferred Offer. Each template comes with its own pre-styled design (colors, sizes, and styles) that you can fully customize afterwards.
• Available templates:
• • Bundle & Save – applies a fresh green color theme.
  • Limited Time Offer – applies a warm orange color theme.
  • Flash Sale Madness! – applies a bold pink color theme.
  • Yay! It's BOGO! – applies a vibrant violet color theme.
• How to use: Select a template and click Apply selected template. The template's design loads into the editor, and you can tweak everything from there.

📐 Template Layout

• What it does: Controls how the quantity tiers are arranged inside the widget.
• Options:
• • Vertical – tiers are stacked on top of each other.
  • Horizontal – tiers sit side by side.

🎨 Choose a Theme

• What it does: Lets you swap the whole color theme of the widget in one click.
• Options: Blue, Red, or Green.
• Note: This option only appears when the Vertical template layout is selected.

⚠️ Choosing a theme replaces all of your current design settings (colors, sizes, styles) with the theme's preset values. If you've customized individual settings, apply your theme first and fine-tune afterwards.

🔤 Typography & Colour

This is the main design card, available in the Design tab of every offer type. It's collapsible — click the arrow in the top-right corner to expand or collapse it.

🔠 Font

• What it does: Sets the font family used across the entire offer widget.
• How to use: Pick from 60+ built-in fonts — including classics like Helvetica, Arial, Georgia, and Impact, plus popular Google Fonts like Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, and many more.
• Default: Select Use your theme font to automatically inherit your store theme's font — the easiest way to make the widget blend in with your storefront.

ℹ️ Google Fonts are loaded automatically on the storefront when selected — no manual setup needed.

📝 Text Element Styling (Size / Style / Color)

Below the font picker, each text element of the widget gets its own styling block. Every block has three settings:

• Size (px): Controls the font size of that element.
• Style: Controls the weight and emphasis of the text. Options:
• • Light
  • Regular
  • Italic
  • Medium
  • Medium Italic
  • SemiBold
  • Bold
  • Bold Italic
• Color: Changes the text color using the color picker or hex input.

⚠️ Size cannot be greater than 20px — if you enter a larger value, you'll see a validation error.

The elements available depend on the offer type:

📦 Bundle Offer & Product Addons:

• Bundle Title – the main heading of the bundle widget.
• Product Name – the product titles inside the bundle.
• Product Price – the price shown for each product.
• Highlighted Tag – the badge text (e.g. "Combo") shown on highlighted products.
• Footer – the footer text at the bottom of the widget.
• Total Price – the combined bundle price.
• Button – the "Add to Cart" button text.

🏷️ Quantity Break:

• Block Title – the main heading above the tiers.
• Offer Title – the title of each tier (e.g. "2 Pair").
• Discount Label – the discount text on each tier (e.g. "Buy 2 Get 1").
• Price – the discounted price.
• Compare Price – the struck-through original price.
• Tag – the badge text on a tier (e.g. "Most Popular").
• Subtitle – the subtitle text on a tier.
• Gift Label / Gift Price / Gift Tag color – the text used for free gift items (when a free gift is configured).
• Footer – the footer text below the tiers.
• Highlighted Tag – the highlighted badge text.
• Button – the button text.
• Total Price – the total price display.

🧺 Build Your Own Bundle (BYOB):

• Block Title – the bundle page heading.
• Description – the description text under the heading.
• Offer Title – the product names in the bundle.
• Price – the product prices.
• Sticky Bar Text – the progress message in the sticky bar (e.g. "Need at least 3 from this group").
• Button – the main "Add Bundle to Cart" button text.
• Product Button – the "Add" button on each product card.
• Total Price – the running bundle total.

🛍️ Upsell Slider:

• Block Title – the slider heading (e.g. "Frequently bought together").
• Product Title – the product names in the slider.
• Price – the product prices.
• Button – the "Add to Cart" button text.

🗂️ Category Quantity Break:

• Same text elements as Quantity Break (Block Title, Offer Title, Discount Label, Price, Tag, Subtitle, Footer, Button, Total Price), without the gift and compare-price styling options.

🌈 Widget Colors (Quantity Break & Category Quantity Break)

This section controls the background and highlight colors of the tier bars. Each option is a single color picker with a hex input.

• Border color: The border color of the currently selected tier — makes the active choice stand out.
• Background color: The background color of the selected tier.
• Non-Selected Bar: The background color of all unselected tiers.
• Label background color: The background behind the discount label on each tier.
• Tag background color: The background of the tag badge (e.g. "Most Popular").
• Gift Background color: The background of free gift rows (Quantity Break only).
• Gift Tag background color: The background of the free gift tag (Quantity Break only).

💡 Tip: Use a subtle contrast between the selected and non-selected bar backgrounds — it helps shoppers instantly see which tier they've picked.

📏 Variant Size (Quantity Break)

• What it does: Controls the size of the variant selector shown on each tier when the product has variants.
• Options: Small, Medium, or Large — just click a badge to select it.

📐 Border

Available in the Design tab of every offer type.

• Border Width (0–10px): Adjusts the thickness of the border around the widget (and tier bars for Quantity Break). Set it to 0 for a borderless, flat look.
• Border Radius (0–50px): Controls how rounded the corners appear. Lower values give a sharp, modern look; higher values give a soft, rounded look.

🖌️ Background & Border Colors (Cards, Footer, Tags & Buttons)

Available for Bundle Offer, Product Addons, Upsell Slider, and BYOB. These blocks let you set both a Border Color and a Background Color for key visual blocks of the widget.

📦 Bundle Offer & Product Addons:

• Product – the product cards inside the bundle.
• Footer – the footer area at the bottom of the widget.
• Highlighted Tag – the highlighted badge.
• Button – the "Add to Cart" button.

🛍️ Upsell Slider:

• Product – the product cards in the slider.
• Button – the "Add to Cart" button.

🧺 BYOB:

• Button – the main "Add Bundle to Cart" button.
• Product Button – the "Add" button on each product card.

💡 Tip: For buttons, set the Background Color to your brand's primary color and match the Border Color to it for a clean, solid button.

⚙️ Appearance Toggles (Quantity Break – General Tab)

A few visual options for Quantity Break live in the General tab under Settings → Appearance and looks rather than the Design tab:

• Show unit price: Displays the per-unit price inside each tier, so customers can see exactly what each item costs.
• Show total price: Displays the total price for each tier.
• Hide header and footer lines: Removes the divider lines at the top and bottom of the widget for a cleaner, more minimal look.

ℹ️ BYOB offers also have a Template option in the General tab (Shelf Pick or Split Select) that changes the overall layout of the bundle page.

📌 Important Notes

• ⚠️ Themes overwrite custom styling. Applying a template or switching themes (Quantity Break) resets your design settings to the theme's presets. Always apply themes first, then customize.
• ⚠️ Text size limit. Individual text elements can't exceed 20px — larger values trigger a validation error.
• ℹ️ Font applies widget-wide. The Font setting affects all text in the widget; use the per-element Style setting (Bold, Italic, etc.) to emphasize specific elements.
• ℹ️ Theme font is the safest choice. "Use your theme font" guarantees the widget matches your storefront typography with zero effort.
• ℹ️ Design settings are per-offer. Each offer has its own independent design — styling one offer never affects your other offers.
• ℹ️ Preview vs. storefront. The live preview uses sample data. After saving and publishing, check the offer on a real product page to confirm spacing and fonts look right inside your theme.

💡 Examples & Use Cases

• Match your brand exactly: Enter your brand's hex codes into the Button, Block Title, and Highlight colors, then set the Font to the closest match to your theme font.
• Make the best tier pop (Quantity Break): Give your "Most Popular" tier a bold Tag style, a contrasting Tag background color, and a strong Border color so shoppers' eyes go straight to it.
• Clean minimal look: Set Border Width to 0, hide the header/footer lines, and use "Use your theme font" for a widget that looks native to your theme.
• High-contrast buttons: Dark Button background + white Button text + matching Border color = a button that gets clicked.
• Soft, friendly vibe: Bump Border Radius up (20–50px) and pick a pastel Background color for the selected tier.

🚀 Final Result

Once configured successfully, the Design & Styling settings help you create offers that look like a natural part of your store — not a bolted-on widget.

With proper styling in place:

✅ Offer widgets feel fully aligned with your store branding ✅ Discount tiers and bundle savings become easier to scan and understand ✅ The best-value tier and CTA buttons stand out visually ✅ Free gifts and highlighted tags draw shopper attention ✅ Offers look polished and consistent on both desktop and mobile ✅ Customers enjoy a smoother, more trustworthy shopping experience

Using these design and styling options effectively can greatly improve customer engagement, storefront presentation, and overall conversion potential ✨

Updated on: 31/07/2026