Combo Bundles

Custom CSS Guide

Fine-tune any widget typography, borders, and animations using scoped CSS design tokens.

Combo Bundles widgets are built with modern CSS custom properties (variables) and scoped styles. You can customize colors and typography via the app's visual Appearance tab, or inject custom CSS overrides in Settings > Branding > Custom CSS or within individual bundle settings under Advanced > Custom CSS.

Shopify Admin / Combo Bundles
📸 Screenshot Placeholder

Custom CSS Editor in Combo Bundles

Adding scoped CSS rules in the Combo Bundles Advanced tab.

📍 Screenshot Target:Shopify Admin > Apps > Combo Bundles > Bundle Editor > Advanced tab > Custom CSS

Core CSS Variables & Design Tokens

The following CSS variables are applied at the root of the widget container (.bb-bundle-widget and .bb-widget):

  • --bb-accent: Primary accent color used for active borders, radio checks, and savings highlights (default: #3B82F6).
  • --bb-selected-bg: Background fill for selected tier cards (default: #EFF6FF).
  • --bb-card-bg: Background color for unselected tier cards (default: #FFFFFF).
  • --bb-borders: Border color for tier cards and dividers (default: #E5E5E5).
  • --bb-headings: Text color for titles and tier names (default: #303030).
  • --bb-secondary-text: Muted subtitle and description color (default: #616161).
  • --bb-corner-radius: Corner roundness for bundle cards (default: 16px).
  • --bb-btn-corner-radius: Border radius for buttons and badges (default: 16px).

Example CSS Snippets

  • Add a subtle hover lift to tier cards:
    .bb-tier-item { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .bb-tier-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
  • Custom savings badge gradient:
    .bb-badge { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; color: #FFFFFF !important; font-weight: 700; }
  • Custom Buy Button pulse effect:
    .bb-sticky-bar-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
PreviousCart Drawer & Dynamic EventsNextAnalytics