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

# Custom CSS settings

> Add custom CSS to fully control bundle widget appearance

The Custom CSS settings allow you to add custom CSS code to style your bundle widgets beyond the built-in color and label options. This gives you complete control over the appearance and behavior of bundle elements.

## Accessing Custom CSS settings

1. Open the Product Bundles app
2. Click **Settings** in the left navigation
3. Select the **Custom CSS** tab

## CSS editor

The Custom CSS page provides a code editor where you can write CSS:

* **Syntax highlighting**: Makes code easier to read
* **Line numbers**: Helps track your code
* **Auto-completion**: Suggests CSS properties
* **Preview**: See changes before applying

## Available CSS selectors

Target specific bundle elements using these classes:

### Widget container

```css theme={null}
.trust-bundle-widget {
  /* Styles for the main widget container */
}
```

### Bundle title

```css theme={null}
.trust-bundle-title {
  /* Styles for the bundle heading */
}
```

### Product list

```css theme={null}
.trust-bundle-products {
  /* Styles for the product list container */
}

.trust-bundle-product {
  /* Styles for individual product items */
}

.trust-bundle-product-image {
  /* Styles for product images */
}

.trust-bundle-product-title {
  /* Styles for product names */
}
```

### Pricing

```css theme={null}
.trust-bundle-pricing {
  /* Styles for the pricing section */
}

.trust-bundle-original-price {
  /* Styles for regular price (before discount) */
}

.trust-bundle-discounted-price {
  /* Styles for bundle price (after discount) */
}

.trust-bundle-savings {
  /* Styles for savings amount */
}
```

### Button

```css theme={null}
.trust-bundle-button {
  /* Styles for the add to cart button */
}

.trust-bundle-button:hover {
  /* Styles for button hover state */
}

.trust-bundle-button:active {
  /* Styles for button clicked state */
}
```

### Cart banner

```css theme={null}
.trust-bundle-cart-banner {
  /* Styles for cart page banner */
}

.trust-bundle-cart-banner-content {
  /* Styles for banner content */
}
```

## Example customizations

### Rounded modern style

```css theme={null}
.trust-bundle-widget {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.trust-bundle-button {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
```

### Minimal clean design

```css theme={null}
.trust-bundle-widget {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #ffffff;
}

.trust-bundle-title {
  font-weight: 400;
  font-size: 20px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.trust-bundle-button {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0;
  text-transform: none;
}
```

### Vibrant bold style

```css theme={null}
.trust-bundle-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 24px;
}

.trust-bundle-title {
  color: white;
  font-size: 28px;
  font-weight: 800;
}

.trust-bundle-savings {
  background: #ffd700;
  color: #333;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

.trust-bundle-button {
  background: white;
  color: #667eea;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
```

### Animation and interactions

```css theme={null}
.trust-bundle-widget {
  transition: transform 0.3s ease;
}

.trust-bundle-widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.trust-bundle-product {
  transition: all 0.2s;
}

.trust-bundle-product:hover {
  background: #f9f9f9;
}

.trust-bundle-button {
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.trust-bundle-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
```

### Mobile-optimized

```css theme={null}
/* Desktop styles */
.trust-bundle-widget {
  padding: 24px;
}

.trust-bundle-title {
  font-size: 24px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .trust-bundle-widget {
    padding: 16px;
    margin: 0 -12px; /* Extend to screen edges */
  }
  
  .trust-bundle-title {
    font-size: 20px;
  }
  
  .trust-bundle-product {
    flex-direction: column;
    text-align: center;
  }
  
  .trust-bundle-product-image {
    margin-bottom: 8px;
  }
  
  .trust-bundle-button {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .trust-bundle-title {
    font-size: 18px;
  }
  
  .trust-bundle-product-title {
    font-size: 14px;
  }
}
```

## Best practices

<AccordionGroup>
  <Accordion title="Start simple" icon="lightbulb">
    Begin with small changes and test before adding complex styles. Build up gradually.
  </Accordion>

  <Accordion title="Use specific selectors" icon="crosshairs">
    Target bundle elements specifically (e.g., `.trust-bundle-button`) rather than generic selectors that might affect your entire site.
  </Accordion>

  <Accordion title="Test cross-browser" icon="browser">
    Check your custom CSS in Chrome, Safari, Firefox, and Edge. Some CSS properties behave differently across browsers.
  </Accordion>

  <Accordion title="Mobile first" icon="mobile">
    Always include mobile-specific styles. More than 50% of shoppers use mobile devices.
  </Accordion>

  <Accordion title="Performance matters" icon="gauge">
    Avoid complex animations or excessive CSS that could slow page load times.
  </Accordion>

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

## CSS tips and tricks

### Use CSS variables for consistency

```css theme={null}
:root {
  --bundle-primary: #8937EB;
  --bundle-radius: 12px;
  --bundle-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trust-bundle-widget {
  border-radius: var(--bundle-radius);
  box-shadow: var(--bundle-shadow);
}

.trust-bundle-button {
  background: var(--bundle-primary);
  border-radius: calc(var(--bundle-radius) / 2);
}
```

### Improve accessibility

```css theme={null}
/* High contrast for better readability */
.trust-bundle-widget {
  color: #333;
}

/* Clear focus states for keyboard navigation */
.trust-bundle-button:focus {
  outline: 3px solid #8937EB;
  outline-offset: 2px;
}

/* Larger touch targets on mobile */
@media (max-width: 768px) {
  .trust-bundle-button {
    min-height: 44px;
    padding: 14px;
  }
}
```

### Smooth transitions

```css theme={null}
.trust-bundle-widget * {
  transition: all 0.2s ease;
}

.trust-bundle-button {
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
```

## Saving and applying CSS

<Steps>
  <Step title="Write your CSS">
    Add your custom CSS in the editor
  </Step>

  <Step title="Preview (optional)">
    Use the preview feature to see changes before saving
  </Step>

  <Step title="Save">
    Click **Save** to apply your custom CSS
  </Step>

  <Step title="Test">
    Visit your store and check the widgets on product and cart pages
  </Step>
</Steps>

Changes apply immediately to all bundle widgets across your store.

## Troubleshooting

**CSS not applying**:

* Check for syntax errors (missing semicolons, brackets, etc.)
* Verify class names are correct
* Clear browser cache and check in incognito mode
* Check browser console for CSS errors

**Styles being overridden**:

* Your theme CSS might have higher specificity
* Try more specific selectors or use `!important` sparingly
* Inspect elements with browser developer tools to see which styles apply

**Mobile layout broken**:

* Add `@media` queries for responsive design
* Test on actual mobile devices
* Check for fixed widths that don't scale

**Performance issues**:

* Remove complex animations
* Optimize heavy styles
* Use simple CSS properties

## Getting help with CSS

If you need help with custom CSS:

* **Browser DevTools**: Use Chrome/Firefox DevTools to inspect elements and test styles live
* **CSS documentation**: Reference MDN Web Docs for CSS properties
* **Support**: Contact [support@getappfox.com](mailto:support@getappfox.com) for assistance

<Tip>Before adding custom CSS, explore the built-in color and label customization options. They're easier to maintain and work well for most needs. Use custom CSS only when you need styling beyond those options.</Tip>