The Widget Customization page lets you control how your bundle widget looks across your store. Changes reflect instantly in the live preview on the right.
General Settings
Start here to set the overall visual style of the widget.
Select template — Choose a pre-built design template as a starting point.
Custom colors — Pick a preset color theme.
Accent color — Set a HEX color applied to buttons and key UI elements.
Layout — Display products in a Grid or List layout.
Corners — Choose between Rounded or Sharp corners.
Widget
Control the widget container's appearance and placement.
Title — Set the widget title text, font size, and color. Add an optional description and toggle Uppercase formatting.
Background & border — Set the background color, border color, and border radius.
Global display — Control where the widget appears (product pages, bundle pages) and its position on each page type.
Product
Style how individual products appear inside the widget.
Product title — Set font size, weight, color, and title template. Enable link to product to make titles clickable.
Image — Set image border radius and image type (e.g. variant image).
Variant selection — Set text color, font size, display style, and selector border radius.
Price
Total price — Choose the price view (with or without discount), alignment, and colors for the bundle total.
Product price — Set individual product price view, font size, price color, compare-at color, and free text color (shown when a product is included for free).
Add to Cart Button
Set button text, text color, background color, border radius, and width. Choose where the button appears — on product pages, bundle pages, or both.
Badges & Icons
Quantity badge — Style the badge that shows item quantity per product.
Free price badge — Style the badge shown when a product is free in the bundle.
Mix & Match / Product groups template — Set the selector style for Mix & Match bundles.
Timer — Show a countdown timer on the widget. Requires an end date to be set on the bundle. Set the title text, title color, and countdown color.
Customer reviews — Display reviews inside the widget. Requires a connected review app. Set the display template, star color, and font size.
Additional Elements in Widget
Toggle optional elements on or off. Each element expands to reveal its settings when enabled.
Product description — Shows each product's description. Works with List layout only. Set the "Read more" link color and text size.
Stock level — Displays available stock per product.
Custom button — Adds a secondary button to each product card (e.g. a size guide). Set the button text, text color, font size, and the JavaScript event it triggers on click (e.g. showSizeGuide).
Share links — Adds social sharing icons to the widget. Enable platforms individually (Facebook, Twitter, LinkedIn, Pinterest) and paste a custom SVG icon for each.
Other Elements
Widget footer messages — Set colors for success messages, error messages, and the cart link. Add an optional text note. Toggle to hide the footer on bundle pages.
Plus sign between products — Set the "+" icon color and optionally hide it on mobile.
Several widgets display — When multiple widgets appear on one page, choose Slider/Carousel or stacked layout. Set the arrow color.
Upsell popup — Set the title for the popup shown after a bundle is added to cart.
Text Settings
Edit all customer-facing text labels in the widget — stock status, price labels, button text, action links, and more. Use the language selector to manage translations, and click Add language to add additional languages.
Screen Reader Text
Set accessible text for screen readers for strikethrough prices and the Mix & Match selector. Use {price} to insert the compare-at price dynamically.
AI Style Assistant
Describe your desired widget style in plain text and the AI applies the changes automatically. Usage resets daily.
Custom CSS / Custom JS
Add custom code to extend or override the widget's default styling and behavior.
