Product - Bundle Pro
The Bundle Pro snippet allows you to offer product bundles on your product page with full visual control, pricing logic, and discount support. Bundling products boosts your average order value while offering shoppers a cleaner, value-driven way to buy more at once.
❗❗Custom Placement Required❗❗
To manually change the position of this bundle snippet on your product page:
Add a new block: Custom Liquid inside the product information section.
Paste the following snippet code:
liquidCopyEdit<div id="ecomz-bundle"></div>Move the block up or down to control its exact position on the page, then click Save.
Section-Level Spacing & Background
Background Color (Section) Defines the section’s background color. Use transparent or light grey for subtle contrast.
Margin Top / Bottom (rem) Controls vertical spacing outside the section.
Padding Top / Bottom (rem) Controls vertical spacing inside the section (default: 5rem).
Section Width & Padding
Max Width (rem) Set the maximum width for desktop and mobile independently (default:
120rem).Left / Right Padding (px) Control the horizontal spacing inside the bundle container (default:
0px).
Bundle Card Styling
Each product in the bundle appears inside a “bundle card,” which you can style:
Background Color / Hover Set a card background color and an optional hover state (e.g.,
#F7F7F7→#F8F8F8).Border Color / Weight / Radius Customize borders and roundness. Use a visible border when selected (e.g., checked color
#232323).
Bundle Title
Bundle Title Text The main title that appears above the bundle cards (e.g., “STARTER COMBO” or “50 Days Supply”).
Font Settings Set font size, color, and optionally enable a custom font (e.g.,
Roboto).
Product Assignments
You can bundle up to 4 products. For each one, select the product and optionally set a custom title override (e.g., "Blade Razor + 2 Soaps").
Override Titles
Font Size & Color Customize text appearance for individual override titles inside cards.
Value Labels
Label Text & Colors (e.g., “Value”) – these appear near prices to indicate worth.
Pricing Settings
Final Price Text Adjust font size and color of the main price.
Save Message Show a message like “You save 50%” next to the price. Customize its font, color, and boldness.
Discount Coupon Logic
Discount Coupon Label Add a short text above the code input (e.g., “Discount Coupon”).
Coupon Code Text Enter the code (e.g.,
DISC120) you’ve created inside Shopify Admin → Discounts. This code must match what you generated.Discount Percentage (%) Display the discount percentage applied to the bundle (e.g.,
50%).
⚠️ Important: After setting your bundle, go to Shopify Admin → Discounts and create the actual discount code (e.g.,
DISC120). The user must manually enter this code at checkout for the discount to apply. The snippet only displays the code and price—not enforce the logic.
Growth Guarantee Text (Optional)
You can optionally include reassurance messaging like a "Growth Guarantee":
Text Colors / Size Customize active and disabled states (e.g.,
#C4C3C3,#4F5150).Clicked State Color Change color after clicking (e.g.,
#FF0000).
Checkbox Settings
Checkbox Size (Desktop & Mobile) Customize the selection box next to each bundle item (default:
20px).
Summary
The Bundle Pro snippet gives you a fully customizable layout to create irresistible bundles with real discounts. Great for increasing AOV, launching promos, or showcasing themed packs. Make sure the discount code is correctly created in Shopify and clearly communicated in the snippet.
Last updated