All Collections
Tutorials
Advanced Tutorials
How to add a bundle widget on your product page
How to add a bundle widget on your product page

A step-by-step guide to adding a bundle widget on your Shopify store.

Inma Spínola avatar
Written by Inma Spínola
Updated over a week ago

Do you want to show the bundle widget on your eCommerce product page? This guide will teach you how to add this widget to your eCommerce.

⚠️ You can access the tutorial "How to create a bundle" to learn how to create your bundle discount on Planet.


1. Configure the widget on Planet

When you create a bundle discount, you can add a bundle widget optionally. In this way, your customers could see the bundle discount on your eCommerce.

To customize the bundle, you can select:

Texts

  • Discount title

  • Buy button: text and redirect to the cart page option.

Design

  • Appearance: title color, background color, and widget border.

  • Product cards: title color and price color.

  • Buy button: background color, text color, and border rounding.

2. Add the widget to your Shopify store

Step 1. Log in to your online store on Shopify

To add your custom widget, you must log in to your online store through the Shopify dashboard.

Step 2. Customize your theme

Once inside your online store, on the theme page, click on "customize".

Now, you'll just need to look for the "products" page at the top of the Shopify theme editor.

Step 3. Add the widget to your product page.

To add the bundle widget to the product page, you must click on "add block" and add "Planet - Product Bundle" block to your theme.

You will only need to perform this action once, as it will automatically give Planet permission to display bundle discounts on your product page when a product or variant is affected by a bundle discount.

Ready!

Your bundle widget will now be visible on the pages of the products or variants affected by the rule. You can choose where to place the widget in your store to make it even more personalized. Simply move the block to the desired section and place.

Just click on save and the bundle discount will automatically appear on the product page of your store.

🙏 If you find our app useful, help other merchants find it by leaving us an honest review on the Shopify app store! It means the world to us.


Did this answer your question?