Bundle Bee Offers the unique ability to display your bundles on any page in your store with no coding required.
In order to display an offer on a Collection page, the first step is Selecting the Specific Pages option under Bundle Display. This will generate a drop-down menu where you can select from a list of all your Collections.
Once you're finished with the bundle creation and design, the last page ( Customize and Launch) will look slightly different. The Display Relative to Add to Cart Button positioning option will not be available. The recommended method is to position your bundle using the dynamic selector.
As shown in the image below, there is now a separate line added that allows you to use the selector to position your bundle anywhere on the collection page ( or pages) of your choice.
If you’ve chosen to also display the bundle on product pages, this will require its own separate positioning using the selector. The dynamic selector will work as usual and redirect you to a product page so that you may position your bundle in the desired placement.
NOTE! Product pages have more elements on them and the injector is better suited to make the integration seamless in the storefront.
When using collection pages where in most themes the page is more bear, the injector may not necessarily work as well simply because there are enough uniquely identifiable elements to display it relative to them. What we recommend in this case is to edit the theme and add elements to make it easier to make a seamless integration. Here we introduce from the theme editor first an element to introduce bundle offers relative to which we will be able to display the bundles.
Now moving back to the injection, we can use the div element under the header from the element we just created to create a final look bundle injection that integrates seamlessly on the collection page.
Once the selection is done you’ll be redirected to bundle creation to save and launch your offer. Clicking the green Go to Collection Page button will redirect you to your storefront so that you can check the look and placement of your bundle are as expected.
Please note: if you’ve chosen multiple collection pages, the dynamic selector will only redirect you to one page to choose the position of the bundle. This will remain consistent, and the bundle will be displayed relative to the same element on all collection pages selected.
Injecting bundles on Collection Pages can also be done using App Blocks if you have a Shopify Theme 2.0 theme on your store. You can check the injection method via App Blocks in the article here.