Page builder apps are drag-and-drop tools that enable the design and customization of pages, including home, product, and landing pages, without any coding knowledge. The Fast Bundle app integrates with the Ecomposer and Pagefly apps, where Fast Bundle Blocks are available. These blocks make it easy to add or reposition bundles on any page.
For other page builder apps that do not support Fast Bundle Blocks, you will need to manually use the HTML code of each bundle to add or adjust their placement on pages.
Is Using Bundle Blocks or HTML Codes Necessary to Display Bundles?
By default, bundles are expected to display correctly on any page builder app. However, sometimes a bundle may appear in an unsuitable spot or fail to load due to differences in the page’s code structure. In such cases, you can use Bundle Blocks or HTML Codes to display the bundle exactly where you want it, or to inject a bundle onto a page where it wasn’t previously present.
⚠️ Important Note: The "All Your Bundles" and "Specific Bundles" codes are designed to add bundles to a page, not to reposition them. Using these codes on a page where the bundle already exists will result in duplication.
List of HTML Codes for Bundles:
1. Related Bundles to a specific product page
Reposition all bundles that are connected to a product on its product page.
Fast Bundle will detect the product and its related bundles automatically (except for the Frequently Bought Together, Volume, and Add-on / Buy X Get Y bundle)
In other words, this code repositions every bundle that includes that product.
<div class="rbrProductBundlePosition"></div>
2. Insert all your bundles at once
Insert all of the bundles that you've made with Fast Bundle.
This will work the same as the "Bundles page" in Fast Bundle.
<div class="rbrFastBundlePage"></div>
Please note that this code will only load bundles that have already been added to the bundles page through Fast Bundle > Boosters > Manage Bundles page.
(This code doesn't include FBT, Volume discounts bundle on all products or collections, Add-on, Buy X Get Y, and Tiered Mix and Match bundles, as these bundles cannot be displayed on the Bundles page.)
3. Showing a Bundle Anywhere You Wish
You can use this HTML code to add any specific bundle to any page you like. If you want to place a bundle on other product pages, you will also need the Bundle ID. To learn how to find the Bundle ID, please refer to this article.
Once you have obtained the Bundle ID, replace the "BUNDLE ID" text in the code below with your actual Bundle ID, and then paste the code into the Custom Code section of your page builder app:
<div class="rbrFastBundlePage" bundle-ids="BUNDLE ID"></div>
(This code doesn't include FBT, Volume discounts bundle on all products or collections, Add-on, and Buy X Get Y bundles because they can only be shown on the main product pages.)
4. Volume Discounts Bundle
This code will reposition the Volume discount bundle related to a specific product.
<div class="rbrVolumeContainer"></div>
5. Frequently Bought Together Bundle
Reposition the Frequently Bought Together (FBT) bundle on its main product page. (The bundle won't show on the offered product pages)
<div class="rbrFBTPosition"></div>
This code can only work if inserted on the "main product" page for FBT; for example, the product shown below:
6. Add-on or Buy X Get Y Bundle
Use this code to change the position of the Add-on or Buy X Get Y bundle on its main product page. (The bundle won't show on the add-on items / Y product pages)
<div class="rbrAddOnContainer"></div>
8. 'Bundle Builder' in Mix and Match Bundles:
If your Bundle Builder page appears empty, it may be because its code has been removed from your Bundle Builder page. To fix this:
Go to Shopify > Online Store > Pages > Mix and Match
Click the Show HTML button
Add the following code in the Content field:
<div class="rbrBundleBuilder"></div>
If this code is already present but the Bundle Builder page content does not appear, this indicates another underlying issue. In that case, please refer to this article, which explains all possible reasons for the Bundle Builder page appearing empty and provides solutions.
⚠️ Important Notes:
When a bundle is displayed on a page — including pages created with page builder apps — its layout depends on the available space. If there is enough space, the bundle will be displayed horizontally; otherwise, it will be displayed vertically. If you would like the bundle to always appear vertically, please contact our 24/7 support team.
In the editor page of page builder apps, the bundle will not be visible, and it will also not appear when previewing the page inside the page builder apps. The bundle will only be visible when you view the page on your live online store.
We hope this article has been helpful! If you have any further questions or need additional assistance, don’t hesitate to reach out to the Fast Bundle support team. You can contact us through the following options:
Live Chat: Get instant help via live chat on our website or through the Fast Bundle admin panel in your Shopify dashboard.
Email: Send your inquiries to Support@fastbundle.co, and our team will respond as quickly as possible.
We’re always here to assist you!