Customizing Bundle Appearance

Make your bundles feel like a natural part of your store with these visual customization options.

Quick Brand Matching

Color coordination: The fastest way to integrate bundles with your theme:

• Primary color - Used for buttons and highlights (typically your brand color)
• Background color - Widget background (usually white or your theme's product background)
• Text color - Main text (should match your theme's product text)

Preview changes instantly: Every adjustment shows in the preview panel so you can see exactly how it will look to customers.

Layout Options

Spacing and alignment:

• Compact - Minimal spacing, great for mobile or product pages with limited space
• Standard - Balanced spacing for most stores
• Spacious - Extra breathing room for premium or minimalist themes

Content positioning:

• Left aligned - Traditional layout, works with most themes
• Center aligned - Modern look, great for mobile-first stores
• Right aligned - Matches product pricing on some themes

Typography Settings

Font coordination: Match your theme's typography for seamless integration:

• Font size - Scale bundles to match your product details text
• Font weight - Light, normal, or bold to match your theme's hierarchy
• Font family - Bundles inherit your theme's fonts automatically

Text visibility: Ensure bundles stand out appropriately:

• Use bold for savings amounts if your theme emphasizes promotions
• Use normal weight for subtle integration that doesn't compete with product details

Display Elements

Show or hide information based on what works for your store:

• Individual prices - Show per-unit cost (good for comparison shopping)
• Tier totals - Show total cost for quantity selected (clearer for customers)
• Savings amounts - Highlight discounts (increases conversion)
• Compare prices - Show original vs. bundle price (builds urgency)

Badge styling: Make discount badges match your promotional elements:

• Rounded corners - Modern look, matches current design trends
• Sharp corners - Clean, professional appearance
• Border width - Subtle outline or bold frame depending on your style

Theme-Specific Tips

Minimalist themes: Use clean fonts, subtle colors, and show only essential information like tier totals and savings.

Bold themes: Match strong colors, use bold fonts, and show all pricing information to complement the theme's detailed style.

Mobile optimization: Test on mobile devices - compact spacing and center alignment often work best for smaller screens.

Testing Your Changes

Before publishing:

1. Check the preview for each change you make
2. Test on mobile using your phone or browser dev tools
3. View on actual product pages to ensure integration looks natural
4. Ask team members or customers for feedback on readability

Common adjustments: Most stores need only 2-3 tweaks - primary color, spacing, and one text setting - to achieve perfect integration.

Need More Control?

For advanced customization beyond these options, contact support. We can help with specific theme integrations or custom styling requirements.