> ## Documentation Index
> Fetch the complete documentation index at: https://bundles-docs.getappfox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize appearance

> Match your store's branding with custom colors, labels, and CSS

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:

1. **Global settings**: Apply to all bundles across your store
2. **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:

1. Open the bundle
2. Click the **Style** tab
3. Customize appearance for this specific bundle
4. 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

<AccordionGroup>
  <Accordion title="Match your brand colors" icon="palette">
    Use your store's primary and secondary brand colors to maintain consistency across the shopping experience.
  </Accordion>

  <Accordion title="Ensure contrast" icon="circle-half-stroke">
    Text must be readable against background colors. Use high contrast for important elements like prices and buttons.
  </Accordion>

  <Accordion title="Make savings stand out" icon="dollar-sign">
    Use a distinct color (like green or red) for discount amounts so savings are immediately noticeable.
  </Accordion>

  <Accordion title="Button should be clickable" icon="hand-pointer">
    Use a bright, contrasting color for the button that clearly indicates it's interactive.
  </Accordion>
</AccordionGroup>

### 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 {amount}" or "You save {amount}")
* **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 {amount} ({percentage} off)" displays as "Save \$15 (20% off)"

### Multi-language support

If your store serves multiple languages:

1. Set up labels for your default language
2. Use translation apps or Shopify's translation features
3. 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:

```css theme={null}
/* 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**:

```css theme={null}
.trust-bundle-widget {
  border-radius: 16px;
}

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

**Custom font**:

```css theme={null}
.trust-bundle-widget {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
```

**Larger button**:

```css theme={null}
.trust-bundle-button {
  font-size: 18px;
  padding: 16px 32px;
}
```

**Hide original price strikethrough**:

```css theme={null}
.trust-bundle-original-price {
  text-decoration: none;
  opacity: 0.6;
}
```

**Mobile-specific styles**:

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

### CSS best practices

<AccordionGroup>
  <Accordion title="Test thoroughly" icon="flask">
    After adding custom CSS, test on different browsers and devices to ensure consistent appearance.
  </Accordion>

  <Accordion title="Use specific selectors" icon="crosshairs">
    Target bundle elements specifically to avoid affecting other parts of your theme.
  </Accordion>

  <Accordion title="Keep it minimal" icon="minimize">
    Only add CSS for elements you want to change. Excessive custom CSS can slow page load.
  </Accordion>

  <Accordion title="Comment your code" icon="comment">
    Add comments to explain what each section does for easier maintenance.
  </Accordion>

  <Accordion title="Responsive design" icon="mobile">
    Always include mobile styles. Test on phones and tablets, not just desktop.
  </Accordion>
</AccordionGroup>

## 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

1. Edit the bundle
2. Go to **Style** tab
3. Toggle "Use custom styles for this bundle"
4. Adjust colors, labels, or CSS
5. Preview changes
6. Save

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

## Preview changes

Before saving customization changes:

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

Preview updates in real-time as you make changes.

## Reverting changes

To revert to default styles:

### Global settings:

1. Go to **Settings** → **Colors** or **Labels**
2. Click **Reset to defaults**
3. Save changes

### Per-bundle settings:

1. Edit the bundle
2. Go to **Style** tab
3. Toggle off "Use custom styles for this bundle"
4. Save

### Custom CSS:

1. Go to **Settings** → **Custom CSS**
2. Delete your custom CSS
3. 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

1. Use browser developer tools device emulation
2. Test on actual phones and tablets
3. Check various screen sizes (320px to 768px width)
4. Verify buttons are easy to tap
5. 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

<Tip>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.</Tip>