Custom CSS settings

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

Open the Product Bundles app
Click Settings in the left navigation
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

.trust-bundle-widget {
  /* Styles for the main widget container */
}

Bundle title

.trust-bundle-title {
  /* Styles for the bundle heading */
}

Product list

.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

.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

.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 */
}

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

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

Example customizations

Rounded modern style

.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

.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

.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

.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

/* 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

Start simple

Begin with small changes and test before adding complex styles. Build up gradually.

Use specific selectors

Target bundle elements specifically (e.g., .trust-bundle-button) rather than generic selectors that might affect your entire site.

Test cross-browser

Check your custom CSS in Chrome, Safari, Firefox, and Edge. Some CSS properties behave differently across browsers.

Mobile first

Always include mobile-specific styles. More than 50% of shoppers use mobile devices.

Performance matters

Avoid complex animations or excessive CSS that could slow page load times.

Comment your code

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

CSS tips and tricks

Use CSS variables for consistency

: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

/* 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

.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

Write your CSS

Add your custom CSS in the editor

Preview (optional)

Use the preview feature to see changes before saving

Save

Click Save to apply your custom CSS

Test

Visit your store and check the widgets on product and cart pages

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 for assistance

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.

Getting started

Bundle types

Merchant dashboard

Storefront

Settings

Help

Accessing Custom CSS settings

CSS editor

Available CSS selectors

Widget container

Bundle title

Product list

Pricing

Button

Cart banner

Example customizations

Rounded modern style

Minimal clean design

Vibrant bold style

Animation and interactions

Mobile-optimized

Best practices

CSS tips and tricks

Use CSS variables for consistency

Improve accessibility

Smooth transitions

Saving and applying CSS

Troubleshooting

Getting help with CSS

​Accessing Custom CSS settings

​CSS editor

​Available CSS selectors

​Widget container

​Bundle title

​Product list

​Pricing

​Button

​Cart banner

​Example customizations

​Rounded modern style

​Minimal clean design

​Vibrant bold style

​Animation and interactions

​Mobile-optimized

​Best practices

​CSS tips and tricks

​Use CSS variables for consistency

​Improve accessibility

​Smooth transitions

​Saving and applying CSS

​Troubleshooting

​Getting help with CSS

Accessing Custom CSS settings

CSS editor

Available CSS selectors

Widget container

Bundle title

Product list

Pricing

Button

Cart banner

Example customizations

Rounded modern style

Minimal clean design

Vibrant bold style

Animation and interactions

Mobile-optimized

Best practices

CSS tips and tricks

Use CSS variables for consistency

Improve accessibility

Smooth transitions

Saving and applying CSS

Troubleshooting

Getting help with CSS