How to custom embed a bundle offer

One option to inject the bundle offers you create is by using the custom code generated by our app that you can copy and paste into the liquid file of your store.

We don’t recommend using this feature unless you are proficient in editing and writing custom code.

To start with, when building a new bundle offer, you will need to select the “None - this applies for custom embedded code only” option from the Bundle Display card

You can then create your offer and customize your bundle look as you would normally. Because you selected the custom embedded code, when you reach the the last step, Bundle Bee will generate a custom code that can copy. The code represents the div element to be included in your theme’s liquid files and has the following format:

<div id="bundlebee-custom-code-1663011392" data-bundleid="1663011392"></div>

With the custom code copied, you can browse through the liquid files of the store and injected wherever you want this displayed. In the below example, we injected the code into the footer of the store. After doing so, go to any page in the store and confirm that the bundle is displayed correctly. You will need to go to Online Store → Actions → Edit Code.

This will open the liquid files and we can go under Sections in the right-hand side menu to the footer file

Now we can inject the code next to an element displayed in the footer such as the “Powered by Shopify” text. Remember to click SAVE after embedding the code then check the front end of the store to confirm the bundle is showing correctly.

Please note that using the bundle redirect link in the last step of the bundle creation won’t work with a custom code embed. So you will have to check the placement on your live store separately and confirm if it is displayed correctly.