How to inject the bundle offer with the Shopify 2.0 widget blocks

If you upgraded to a Shopify 2.0 theme then you will be able to use the app block widgets to insert the bundle you created anywhere in your store from the theme editor. To use this feature you will start creating a bundle offer as usual and go through each step such as creating the offer and customizing the look until you get to the Bundle Display Position step.

In this step, you will have to choose the last option in the list, Display with Shopify Theme 2.0 Placeholder Widget.

With any new bundle you create, BundleBee automatically generates a unique code in this section that you can copy if you want to embed it with the widget app blocks. You should click the green button to Copy the code and once that is done, the message will change to Copied to confirm this has been done. Using the Shopify Theme 2.0 Customization button you will be able to create and insert the Bundle Bee block.  

Now that you are in the customization mode you will see every element on the page in the menu on the left. You have the option to add a new block anywhere you want and connect it to the newly created bundle. By hovering over specific elements in the menu, the corresponding area on the page will get highlighted so you know exactly where you can place your bundle. 

In this example we are going to place it on the Home Pag, however, at the top of the screen you will be able to choose any page in your store and inject your offer.

Please note: If at the start you selected to publish the bundle on specific product pages you will also have to select the Products page and insert the app block there. You can also insert this bundle on any other page in your store.

You will be able to see the BundleBee app as a block at the end of the left-hand side menu. If by any chance it is not visible you can click on Add Section → Add Block and choose the BundleBee app from the list of apps that are integrated with your theme.

By clicking and dragging the element that contains the Bundle Bee block you can move it in the menu to the exact placement on the page you want. You can place it anywhere by pasting the unique code that BundleBee generated, in the input box in the right-hand side menu bar. After pasting the code and clicking save the bundle will automatically appear on the page. 

All that is left to do is click Save &Launch Bundle and confirm the live store displays your offer as you intended and you are done. The same ID can be used any number of times and you can display it on multiple pages in your store making this option very versatile and easy to use.