How to Position bundles on your product page
Kefi Bundles offers several ways to control where the bundle widget appears on your product page. You can choose from quick placement options that apply instantly with a single click, use custom placement, or take full control through the Shopify Theme Editor.
In this guide, we’ve used the Standard Bundle as an example to demonstrate bundle position placement. Once you've configured your bundle’s content and design, you'll unlock access to the Advanced settings. This is where you’ll find the options to control the widget's position on the product page.
Use the Widget position to decide where your bundle will appear on the product page. Here are your options:
Quick placement options:
Below Add-to-Cart form - The default option, our app will try to automatically detect the main cart form in your product page and add the Bundle below it.
Above Add-to-Cart form - Applying this option, the bundle will appear above the Add-to-Cart form.
Custom placement option:
Below Custom Element - You can use this option if you want to custom-position the bundle widget below a specific element.
Above Custom Element - - You can use this option if you want to custom-position the bundle widget above a specific element.
To display your bundle above or below a specific element on your product page, follow these simple steps:
STEP 1: Identify the elements
Inspect your product page and pick the class or ID of the element where you want the bundle to appear.
STEP 2: Choose the position in the app:
Open the Kefi Bundles app and go to the Design tab. Under the Widget Position section, select either:
Above custom element or
Below custom element
STEP 3: Paste the class or ID:
In the provided field, paste the #id or .some-class of the selected element from your store and click on Save.
After completing these steps, visit the product page to verify the bundle’s position.
Visual placement option:
Select Position Visually with Shopify Theme editor - With Kefi Bundles, you have full control over where your bundle widget appears on the product page. Using the Shopify Theme Editor, you can manually place the bundle exactly where you want it, ensuring a seamless shopping experience for your customers.
Follow these steps to set up your bundle position visually:
STEP 1: Enable the customizable positioning option
Go to the content tab in the Kefi Bundles app.
Select the option to Select position visually with Shopify Theme Editor and save the changes.
STEP 2: Access the Shopify theme editor
Navigate to Online Store > Themes > Customize in your Shopify dashboard.
STEP 3: Choose a product page
In the Theme Editor, go to Home Page > Products and select a product.
STEP 4: Select the placement area
Locate the section where you want to display the bundle.
Click the "+" icon to add a new app block.
STEP 5: Add the bundle widget
Click Apps, then select the bundle type you want to display.
A placeholder for the bundle widget will be placed in the selected position.
Step 6: Add multiple bundles at the same location
If you want to display multiple bundles at the same location, click the + icon again and select another bundle type. Multiple placeholders for different bundles will appear at that position.
STEP 7: Save your changes
Click Save to confirm your widget placement.
STEP 8: Check the product page
Visit the product page to see the bundle displayed exactly where you positioned it.
This method allows you to customize your bundle placement effortlessly, ensuring that it appears in the most effective position for your store’s design.
For further assistance feel free to contact us:
Live Chat: Available via the Kefi Bundles app or website.
Email: [email protected]