All Collections
Bundle Positioning
How to change the Bundle position on the Product Page
How to change the Bundle position on the Product Page

The easiest way to change the bundle position on product pages is by using the dynamic element selector

Ana Bunaiasu avatar
Written by Ana Bunaiasu
Updated over a week ago

Bundle Bee Bundles Builder's flexible positioning options give you the ability to place your bundles anywhere on the Product Page. In order to change the position of an existing bundle, go to either the Homepage or the Bundles tab inside the app, choose the bundle that you want to reposition and click the edit icon on the far right. You’ll be redirected to the first page of bundle creation and design.

Head over to the Bundle Display Settings and make sure that the bundle is being shown on all your chosen store pages. In our example, the bundle is only being displayed on the product pages for the products included in the offer. We change this to also be displayed on one of our collection pages.

Please note: once you select the Specific pages display option that will help you position your offer on different pages of your website, the bundle will no longer automatically be displayed on the product pages included in the offer. These must also be selected individually from the Display on Page(s) drop down.

Once your selection is completed and you are happy your bundle will be displayed on the correct pages, to change its position, go to the final section of bundle creation: Customize and Launch. Please note: This article will focus solely on repositioning the bundle on the product pages. For more information, please check our articles on: How to show Bundle(s) on Collection pages and How to show Bundle(s) on the Home Page.

Please note: If you choose to display the bundle on more than just the default product pages, the display relative to add to cart positioning option will not be available. You can still use the dynamic injector to position your bundle above or below the add to cart button on the product pages.

Scenario 1: Bundle is being displayed only on the default product Pages (products included in the bundle)

The Customize and Launch page should look like in the image below. In order to change the position of the bundle, select Display Relative to Custom Element Position and click Open Dynamic Selector. This will redirect you to the product page where you can choose a new placement for the bundle.

Once you’ve confirmed your selection and are redirected back to the Customize and Launch page, click the green Save and Launch button. For more information on using this placement method please check out this article.

You can also use the Display Relative to (above or below) the Add to Cart Button for a quick and simple positioning of your bundle. Don’t forget to click Save and Launch Bundle once you’ve made your changes.

Scenario 2: The bundle is also being displayed on other pages in the store

The Display Relative to Custom Element Position will have several options depending on how many pages the bundle is being displayed on as shown below. To change the position of the bundle on the products page, simply select the Product Page line and click Open Dynamic Selector.

Once you’ve made your changes, click Save and Launch Bundle.

Scenario 3: The bundle was positioned using appblocks.

As the Bundle Injection via AppBlocks settings are global in the sense that changing the placement of the app block on the Product Page will impact ALL bundles displayed using this method. To change an individual bundle’s position without impacting the others, simply use a different injection method i.e: the Dynamic Selector.

In order to change the position of all your your product page bundles displayed using app blocks, head over to the Settings Tab and select Bundle Injection via App Blocks.

Click the green Go to Shopify 2.0 Injection button and you’ll be redirected to your theme editor. Select the Product Page from the dropdown at the top of the screen. From the menu on the left hand side, select your Bundle Bee app block and drag and drop it into the new desired position. Once done, click the green Save button in the top right hand corner of your screen. For more information on setting up and using this positioning method, please check out the following article.

Did this answer your question?