Customize appearance

Product Bundles offers extensive customization options to match your store’s unique look and feel. Customize colors, button text, labels, and even add custom CSS for complete control.

Customization options overview

Customize bundle appearance in two ways:

Global settings: Apply to all bundles across your store
Per-bundle styles: Override global settings for specific bundles

Accessing customization settings

Global settings

Go to Settings in the Product Bundles app navigation to access global customization options.

Per-bundle styles

When creating or editing a bundle:

Open the bundle
Click the Style tab
Customize appearance for this specific bundle
Save changes

Color customization

Available color settings

Widget background: Background color of the bundle widget container
Widget border: Border color around the widget
Primary text color: Product names and headings
Secondary text color: Descriptions and supporting text
Price color: Regular product prices
Discount color: Discounted prices and savings amount
Button background: Add to cart button color
Button text: Text color on buttons
Button hover: Button color when hovering

Color best practices

Match your brand colors

Use your store’s primary and secondary brand colors to maintain consistency across the shopping experience.

Ensure contrast

Text must be readable against background colors. Use high contrast for important elements like prices and buttons.

Make savings stand out

Use a distinct color (like green or red) for discount amounts so savings are immediately noticeable.

Button should be clickable

Use a bright, contrasting color for the button that clearly indicates it’s interactive.

Hex color codes

Enter colors using hex codes (e.g., #8937EB) or use the color picker to select colors visually.

Label and text customization

Customize the text that appears throughout the bundle experience.

Customizable labels

Access via Settings → Labels:

Bundle heading: Text above bundle widget (e.g., “Bundle & Save”)
Savings label: How savings are shown (e.g., “Save ” or “You save ”)
Add to cart button: Button text (e.g., “Add bundle to cart”, “Get this deal”)
Original price label: Label for regular prices (e.g., “Regular price”, “Usually”)
Bundle price label: Label for discounted price (e.g., “Bundle price”, “Your price”)
Quantity selector label: For Mix & Match and Volume bundles (e.g., “Choose quantity”)
Out of stock message: When products are unavailable (e.g., “Currently unavailable”)

Text variables

Use variables in your labels to display dynamic information:

{amount}: Savings amount ($15, £10, etc.)
{percentage}: Savings percentage (20%)
{price}: Product or bundle price
{quantity}: Number of products or items

Example: “Save ( off)” displays as “Save $15 (20% off)“

Multi-language support

If your store serves multiple languages:

Set up labels for your default language
Use translation apps or Shopify’s translation features
Labels will use Shopify’s locale system automatically

Custom CSS

For advanced customization beyond color and label changes, add custom CSS.

Accessing custom CSS

Go to Settings → Custom CSS in the Product Bundles app.

What you can customize with CSS

Widget layout and spacing
Font families and sizes
Border radius and shadows
Animation and transitions
Responsive behavior
Element positioning
Mobile-specific styles

CSS selectors

Target specific elements using these classes:

/* Main widget container */
.trust-bundle-widget {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Bundle title */
.trust-bundle-title {
  font-size: 24px;
  font-weight: 700;
}

/* Product items */
.trust-bundle-product {
  padding: 12px;
}

/* Price display */
.trust-bundle-price {
  font-size: 18px;
  font-weight: 600;
}

/* Savings amount */
.trust-bundle-savings {
  color: #28a745;
  font-weight: 700;
}

/* Add to cart button */
.trust-bundle-button {
  border-radius: 4px;
  padding: 14px 24px;
  font-size: 16px;
  transition: all 0.3s;
}

.trust-bundle-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

CSS examples

Rounded corners:

.trust-bundle-widget {
  border-radius: 16px;
}

.trust-bundle-button {
  border-radius: 8px;
}

Custom font:

.trust-bundle-widget {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

Larger button:

.trust-bundle-button {
  font-size: 18px;
  padding: 16px 32px;
}

Hide original price strikethrough:

.trust-bundle-original-price {
  text-decoration: none;
  opacity: 0.6;
}

Mobile-specific styles:

@media (max-width: 768px) {
  .trust-bundle-widget {
    padding: 12px;
  }
  
  .trust-bundle-title {
    font-size: 18px;
  }
}

CSS best practices

Test thoroughly

After adding custom CSS, test on different browsers and devices to ensure consistent appearance.

Use specific selectors

Target bundle elements specifically to avoid affecting other parts of your theme.

Keep it minimal

Only add CSS for elements you want to change. Excessive custom CSS can slow page load.

Comment your code

Add comments to explain what each section does for easier maintenance.

Responsive design

Always include mobile styles. Test on phones and tablets, not just desktop.

Per-bundle customization

Override global settings for specific bundles:

When to use per-bundle styles

Seasonal bundles: Special styling for holidays or events
Premium bundles: Distinctive appearance for high-value bundles
A/B testing: Test different styles to see what converts better
Category-specific: Different styles for different product categories

How to apply per-bundle styles

Edit the bundle
Go to Style tab
Toggle “Use custom styles for this bundle”
Adjust colors, labels, or CSS
Preview changes
Save

Per-bundle styles override global settings. Any setting not customized will use the global default.

Preview changes

Before saving customization changes:

Use the Preview button to see how changes look
Check both desktop and mobile views
Test different bundle types
Verify colors and text are readable

Preview updates in real-time as you make changes.

Reverting changes

To revert to default styles:

Global settings:

Go to Settings → Colors or Labels
Click Reset to defaults
Save changes

Per-bundle settings:

Edit the bundle
Go to Style tab
Toggle off “Use custom styles for this bundle”
Save

Custom CSS:

Go to Settings → Custom CSS
Delete your custom CSS
Save

Mobile optimization

Bundles are automatically responsive, but you can enhance mobile experience:

Mobile-specific considerations

Larger touch targets: Buttons should be at least 44px tall on mobile
Readable text: Font sizes should be 14px+ on mobile
Simplified layouts: Stack elements vertically on small screens
Faster loading: Minimize large images and heavy styles

Testing on mobile

Use browser developer tools device emulation
Test on actual phones and tablets
Check various screen sizes (320px to 768px width)
Verify buttons are easy to tap
Ensure text is readable without zooming

Troubleshooting

Changes not appearing:

Clear browser cache
Check in incognito/private mode
Verify you saved changes
Allow a few minutes for changes to propagate

Colors look wrong:

Check hex code format (#RRGGBB)
Verify contrast between text and background
Test in different browsers

Custom CSS not working:

Check for syntax errors
Verify class names are correct
Ensure no conflicting theme styles
Use browser developer tools to inspect elements

Mobile layout broken:

Add responsive CSS with media queries
Test on actual devices, not just desktop browser
Simplify complex layouts for mobile

Start with global style settings to establish your brand look, then use per-bundle customization for special offers or seasonal bundles that need unique styling.

Getting started

Bundle types

Merchant dashboard

Storefront

Settings

Help

Customization options overview

Accessing customization settings

Global settings

Per-bundle styles

Color customization

Available color settings

Color best practices

Hex color codes

Label and text customization

Customizable labels

Text variables

Multi-language support

Custom CSS

Accessing custom CSS

What you can customize with CSS

CSS selectors

CSS examples

CSS best practices

Per-bundle customization

When to use per-bundle styles

How to apply per-bundle styles

Preview changes

Reverting changes

Global settings:

Per-bundle settings:

Custom CSS:

Mobile optimization

Mobile-specific considerations

Testing on mobile

Troubleshooting

​Customization options overview

​Accessing customization settings

​Global settings

​Per-bundle styles

​Color customization

​Available color settings

​Color best practices

​Hex color codes

​Label and text customization

​Customizable labels

​Text variables

​Multi-language support

​Custom CSS

​Accessing custom CSS

​What you can customize with CSS

​CSS selectors

​CSS examples

​CSS best practices

​Per-bundle customization

​When to use per-bundle styles

​How to apply per-bundle styles

​Preview changes

​Reverting changes

​Global settings:

​Per-bundle settings:

​Custom CSS:

​Mobile optimization

​Mobile-specific considerations

​Testing on mobile

​Troubleshooting

Customization options overview

Accessing customization settings

Global settings

Per-bundle styles

Color customization

Available color settings

Color best practices

Hex color codes

Label and text customization

Customizable labels

Text variables

Multi-language support

Custom CSS

Accessing custom CSS

What you can customize with CSS

CSS selectors

CSS examples

CSS best practices

Per-bundle customization

When to use per-bundle styles

How to apply per-bundle styles

Preview changes

Reverting changes

Global settings:

Per-bundle settings:

Custom CSS:

Mobile optimization

Mobile-specific considerations

Testing on mobile

Troubleshooting