Product Upsells & Add-ons: Customizing Product Bundle Display Styles

The Custom Style feature in the Product Upsells & Add-ons app gives you greater control over how your product bundles appear on your store’s product pages. With this feature, you can easily personalize the layout, colors, fonts, buttons, and more to better showcase your bundles and enhance the shopping experience.

In this guide, we’ll walk you through how to access and use the Custom Style options to customize your product bundles effortlessly.

How Bundle Styles Are Applied: Rules and Logic

Before you begin customizing the display styles for your product bundles, it's important to understand how the styling settings are applied. This section outlines the key rules and conditions that affect your style configurations to help ensure your customizations work as intended.

Style Customization Conditions

Only bundle campaigns that enable Follow advanced settings in the Style setting section can apply the style configurations set in the Custom style feature.

CSS Code Priority

If custom CSS code is added, it takes priority and will override the style settings configured through the custom template.

Example: If you set the button color to red in the custom style configuration but include .bundle-product-title { color: blue; } in your CSS code, the button will display as blue.

Display of Multiple Matching Campaigns

When a product matches multiple campaigns that "use the same template" (for example, if all these campaigns either follow the Advanced settings in the Style setting or none do but use the same template), the display configuration under Custom style > Multiple bundles will apply.

Example:

Product Bundle	Style Settings	Apply 【Multiple Bundles】 Display?
A	Both A and B follow the Advanced settings	Yes
B
A	Both A and B use Full width, under product module	Yes
B
A	A follows the Advanced settings, and selects the Below 'Add to cart' button: Integrated template in Custom style.	No. The two bundle campaigns will be displayed in different styles on the same product page based on their respective settings.
B	B uses Full width, under product module

Bundle Display Placement 

When a bundle campaign is set to Follow advanced settings, its display placement will be determined by the Style setting option in the Advanced settings section.

• If Automatically embed widget is selected, the placement follows the template chosen in the Custom style section.
• If Manually add Product bundles block to your theme is selected, the placement follows the layout configured in the theme editor.

Configuring Custom Style Settings

After understanding how the styling setting is applied, you can begin customizing templates for eligible bundle campaigns.

1. Open your Product Upsells & Add-ons app and go to the Product bundles tab. Locate the Custom style section and click Set now.
   

2. Customize the bundle templates:
   
   To configure the template for a single bundle, adjust the following settings in the Single bundle section. You can preview your changes in the Single bundle panel.

   Note: If you’ve selected Manually add Product bundles block to your theme in the Advanced settings, the bundle placement will follow the component styling defined in the theme editor and will not be affected by the template set in the Custom style settings.

• Template: Choose from:
  • Below 'Add to cart' button: Integrated
  • Below 'Add to cart' button: Split
  • Below the product: Full width
• Title desktop font size: Set the font size for the bundle title on desktop view.
• Title desktop font size: Set the font size for desktop view.
• Title mobile font size: Set the font size for the bundle title on mobile view.
• Title color: Customize the title color. If you want it to match your store’s theme, check Follow theme colors.
• Title font weight: Check Bold font to make the title bold.

For products matching more than one bundle campaign, you can further configure their display. Adjust the settings in the Multiple bundle section and preview the changes in the Multiple bundle panel.

• Template: Choose how you want to display the bundles:
  • Tab mode: Bundles will be displayed as tabs that users can switch between. If you select this option, you can further configure:
    • Tab title: Name the titles for each bundle set.
    • Tab title font size (Desktop): Set the font size for the tab title on desktop view.
    • Tab title font size (Mobile): Set the font size for the tab title on mobile view.
    • Tab title color: Customize the tab color. If you want it to match your store’s theme, check Follow theme colors.
    • Tab title font weight: Check Bold font to make the tab titles bold.
  • Tiled mode: Bundles will be displayed in a tiled layout.

3. Configure settings related to the products included in the bundle(s) in the Products bundles section:

• Product image ratio: Set the ratio for the product images.
• Image display rules: Choose between Auto-adjust and Padding. 
• Color: Customize the colors for the Product title, Sale price, and Discount amount or percentage. If you want the colors to follow the store’s theme, check Follow theme colors.
• Selected products: Customize the Highlight color for selected items.

4. Configure settings related to the buy button in the Buy button section:

• Button text desktop font size: Set the font size for the buy button text on desktop view.
• Button text mobile font size: Set the font size for the buy button text on mobile view.
• Button color: Customize the colors for the Button background and the Button text. If you want the colors to follow the store’s theme, check Follow theme colors.
• Button border radius: Adjust the border-radius style of the buy button. To match your store’s theme, check Apply the theme’s border radius settings.

5. If you have a coding background and are comfortable with CSS, use the Custom CSS section to customize your bundle display.

   Notes:  If custom CSS code is deployed, it takes priority and will override any conflicting settings configured through Custom style. The preview will not reflect the effects of your CSS configurations. Please save your settings and visit the storefront to view the result.

   

6. Switch between the desktop and mobile modes to preview the effect. When you're satisfied with the result, click Update to save and apply your settings.