Creating a full-page Dynamic Bundle takeover on your Shopify Product Detail Page (PDP) using Rebuy's Dynamic Bundle Widget involves customizing your Shopify theme and the widget itself. This setup allows customers to select product variants and add them to the cart directly from the bundle interface, enhancing the shopping experience and potentially increasing average order value.
Step 1: Create an Alternate Product Page Template in Shopify
To apply a unique layout to specific products, you'll need to create an alternate product page template:
1. Access the Theme Editor:
In your Shopify admin, navigate to Online Store > Themes.
Click Customize on your current theme.
2. Create a New Template:
At the top of the editor, click on the page selector dropdown and choose Products > Default product.
Click Create template
Name your new template (e.g., `rebuy-bundle`) and select Create template.
3. Customize the Template:
Remove or hide existing sections that you don't want to display.
Add a Custom Liquid section, or a Rebuy App Block where you plan to insert the Rebuy Dynamic Bundle Widget.
Creating & Preparing the Alternate Product Page Template - Watch Video
4. Assign Products to the New Template:
Go to Products in your Shopify admin.
Select the product you want to assign to the new template.
In the Online store section, use the Theme template dropdown to select your new template.
Click Save.
Assign the Alternate Page Template to your "Bundle Product" - Watch Video
Step 2: Customize the Rebuy Dynamic Bundle Widget
Next, modify the Rebuy Dynamic Bundle Widget to focus solely on variant selectors (if applicable) and the Add to Cart button:
1. Access the Widget Settings:
Log in to your Rebuy Dashboard.
Navigate to the Merchandising Widgets section and select the Dynamic Bundle Widget you want to customize.
2. Modify Widget Appearance:
In the widget settings, go to the Styles tab.
Add widget-specific custom CSS to hide elements like product images, descriptions, and prices. For example:
/* Hide product images */
#rebuy-widget-XXXXX .rebuy-product-image {
display: none;
}
/* Hide product descriptions */
#rebuy-widget-XXXXX .rebuy-product-description {
display: none;
}
/* Hide product prices */
#rebuy-widget-XXXXX .rebuy-product-price {
display: none;
}
Replace `XXXXX` with your widget's ID.
3. Remove the PDP Item from the Widget:
To prevent the widget from automatically including the current PDP item - the 'dummy' bundle product itself, add the following JavaScript snippet to the Advanced > Ready section in the widget settings:
/* Removes PDP item from widget */
widget.data.products.shift();
This code removes the first product (the PDP item) from the widget's product list so that the 'dummy' product associated with the bundle doesn't get added to the cart.
Configure and Customize the Dynamic Bundle Widget - Watch Video
Step 3: Integrate the Widget into the Alternate Template
Finally, embed the customized widget into your alternate product page template:
1. Install the Widget:
In your Shopify theme editor, navigate to the Custom Liquid or Rebuy App Block section you added earlier.
For Custom Liquid sections, insert the Dynamic Bundle widget's embed code, which you can find in the widget's settings under Placement.
For Rebuy App Block sections, insert the Dynamic Bundle widget's ID.
2. Save and Test:
Save your changes in the theme editor.
Preview the product page assigned to this template to ensure the Dynamic Bundle Widget displays as intended, showing only the variant selectors, Add to Cart button and any other elements you want to keep visible.
PDP Dynamic Bundle Full Page Takeover - See It In Action - Watch Video
By following these steps, you can create a streamlined, full-page Dynamic Bundle experience on a PDP.
For more detailed customization options, refer to Rebuy's help center articles:
Rebuy Support Policy For Customizations
Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page