Customizing the Widget
The appearance editor gives you full control over how the Frequently Bought Together widget looks on your storefront — no CSS knowledge required. Every change is reflected instantly in the live preview panel before you save.
Accessing the Appearance Editor
Click Settings in the left sidebar of the app
Click Frequently Bought Together (or the appearance card)
The editor opens with a settings panel on the left and a live preview on the right.
Preview Modes
Use the Desktop and Mobile toggle buttons at the top of the preview panel to switch between desktop and mobile views. The preview updates immediately as you change any setting, so you can see exactly how the widget will look on different screen sizes before saving.
The preview uses sample products. Your actual storefront widget will display your real products and prices.
Settings Sections
Layout
Controls the overall spacing of the widget block:
Padding (top / bottom) — space above and below the entire widget
Padding (left / right) — space on the sides of the widget
Heading
The main title displayed above the widget (e.g. "Frequently Bought Together"):
HTML tag — choose H1 through H4 for correct heading hierarchy on your page
Color — heading text color
Font weight — normal or bold
Text transform — none, uppercase, lowercase, or capitalize
Subheading
The subtitle or tagline below the heading (e.g. "Save money buying these products together"):
Font size — size in pixels
Font weight — normal, medium, semibold, or bold
Font style — normal or italic
Color — subheading text color
Bundle Product Layout
Controls the card/container that wraps each product in the bundle:
Padding — inner spacing within each product card
Border radius — how rounded the corners of each card are
Border color — the color of the card border
Border width — the thickness of the card border (set to 0 to remove the border)
Product Details
Controls how individual product information is displayed:
Product Image:
Width / Height — image dimensions in pixels
Border radius — how rounded the product image corners are
Border width / Border color — image border styling
Scale contain — toggle to fit the full image within the frame without cropping
Product Name:
Color — name text color
Bold — toggle bold styling
Max length — truncate long product names after a set character count
Variant Selector:
Text color — color of the variant dropdown text
Border color — dropdown border color
Background color — dropdown background
Pricing:
Sale price color — color shown for discounted prices
Regular price color — color for non-sale prices
Compare-at price color — color for the struck-through original price
Ratings:
Star size — size of the review star icons
Star color — filled star color
Review count color — color of the "(3 reviews)" text
Buttons
Controls the "Add Selected to Cart" button:
Background color — button fill color
Hover color — button color when hovered
Text color — button label color
Border radius — how rounded the button corners are
Border color / Border width — optional button outline
Navigation Arrows
The left/right arrows used to scroll through recommendations in carousel mode:
Size — arrow icon size
Color — arrow icon color
Background color — background circle color behind each arrow
Separator
The "+" icon or line displayed between products in the bundle:
Enable / Disable — toggle the separator on or off
Color — separator icon or line color
Size / Thickness — separator dimensions
Checkbox
The checkbox each customer uses to select or deselect a recommendation:
Color — checkbox fill/check color when selected
Saving Your Changes
Click Save at the top of the page to apply your changes. Click Discard to revert to the last saved state.
Changes are saved per-shop and apply to the widget on all product pages. There is currently one appearance configuration per store.