Articles on: EB - Storefront Display & Customization for Bundles

Enabling Product Slots in full page bundle builders - Discount placeholders

Enable Product Slots: Go to your Bundle's settings. Enable Product Slots and click Save.
Set a Quantity Condition: In Category Rules, add a condition where the quantity is a specific number (e.g., Quantity equals 4).
Add the Code: Copy the provided code snippet. Paste it into the bundle settings > Custom CSS and click Save.

Customize Placeholders: To change the discount or text, modify the code directly. For instance, replace "child one" with "child three" to apply the same discount to a different slot. [check the video for how the code works]
Preview: Check the bundle preview to ensure the slots and discount placeholders (e.g., 5% off) are correct. [screenshot of a bundle preview showing enabled slots and discount text]

This video will guide you on Enabling Product Slots in Footer section in bundle builder with discount placeholders in the footer section

Make sure the discount you've set up in the Bundle Discount is reflected in the content section (5%off, 10$off) of the code below, based on the discount you've created in Easy bundles.

Note : Product slots only work when you have set up Equal to condition at step level in the Bundle

You can paste the following CSS code in the Easy Bundle > Additional Configuration > Bundle Level CSS section.

.gbbSlotFooterProductContainer:has(.gbbSlotFooterProductImage)::before {
    content: "" !important; /* Empty the content if the condition is met */
}

.gbbSlotFooterProductContainer {
    font-size: 0px; /* This hides the original content */
}

.gbbSlotFooterProductContainer::before {
    font-size: 14px; /* Set the font size for the ::before content */
}

.gbbSlotFooterProductContainer:nth-last-child(1)::before {
    content: "5% off";
}

.gbbSlotFooterProductContainer:nth-last-child(2)::before {
    content: "5% off";
}

.gbbSlotFooterProductContainer:nth-last-child(3)::before {
    content: "15% off";
}

.gbbSlotFooterProductContainer:nth-last-child(4)::before {
    content: "15% off";
}

Updated on: 14/08/2025

Was this article helpful?

Thank you!