How do I customize the bundle display design?

Introduction

Roadmap bundles are created as native Shopify products, which means they automatically inherit your store’s theme styling. By default, Roadmap uses the same product form and style elements from your PDPs when rendering the bundle add-to-cart form.

This ensures bundles look and feel consistent with the rest of your storefront, without requiring custom design work.

Default Styling (No Extra Setup)

When you create a bundle:

• The add to cart form inherits your PDP styling, including:
  • Button design
  • Fonts and colors
  • Quantity selectors
  • Input fields and layout
• The bundle PDP uses the same structure as any other product page in your theme.

👉 This means bundles blend in seamlessly with your store right away.

Customizing the Bundle PDP

Since bundles are Shopify products, you can edit their PDP like any other product:

• Title → Comes from the bundle name you set in Roadmap.
• Description → Add savings callouts or list what’s included.
• Images / Media → Upload custom bundle images or lifestyle photos.
• Collections → Assign bundles to curated groups (e.g., “Gift Sets”).
• Metafields → Add extra details (e.g., “Includes: Candle, Mug, Tea”).

Customizing Cart & Checkout Display

Bundles appear in cart and checkout as a parent product with sub-items.

• Roadmap provides app blocks you can add via the Shopify theme editor.
• Options include:
  • Showing bundle savings messages.
  • Styling how sub-items appear under the parent.
  • Adding promotional text like “🎁 Bundle & Save!”.

👉 Customers always see the same consistent parent + sub-item structure.

Customizing Mix & Match Bundles

If you’re offering mix & match bundles:

• Roadmap’s selection form also inherits PDP styling (buttons, grids, dropdowns).
• You can control whether customers pick items via dropdowns or grid layouts.

👉 Example: Display “Choose 3 snacks” in a grid with product images, styled exactly like your theme’s product form.

Advanced Styling with Theme Editor & CSS

• Since Roadmap relies on Shopify’s theme system:
  • All global design settings (colors, fonts, button styles) apply automatically.
  • Developers can add custom CSS for unique styling.
  • You can reorder or reposition bundle blocks within PDP, cart, and checkout.

Why This Matters

• ✅ On-brand by default → Bundles match your PDP style automatically.
• ✅ Consistent UX → Add-to-cart form feels identical to normal products.
• ✅ Flexible merchandising → You can still customize PDP content/images as needed.
• ✅ No developer required → Most merchants don’t need custom coding.

Common Questions

• Do bundles use my store’s theme styles automatically?
  • Yes — Roadmap inherits your PDP form and styling by default.
• Can I add “Bundle & Save” text or badges?
  • Yes — use theme editor or metafields to add custom callouts.
• Can I style how sub-items appear in cart/checkout?
  • Yes — via Roadmap’s app blocks in the theme editor.
• Do I need a developer to match bundles to my brand?
  • Not usually — most design is inherited automatically from your theme.

Cross-Feature Links

• How do I display bundles on product pages?
• How do I display bundles in the cart or checkout?
• How do customers redeem bundle offers?

Summary

Roadmap bundles automatically inherit PDP styling, including product form elements, buttons, and layout — so they look on-brand out of the box. You can further customize PDP content, cart/checkout display, or mix & match layouts via the Shopify theme editor or CSS.