All Collections
Advanced Tutorials
How to add a volume discount selector on your product page
How to add a volume discount selector on your product page

A step-by-step guide to adding a volume discount selector on your Shopify store.

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

Do you want to show the volume discount on your eCommerce product page? This guide will teach you how to add a Planet selector to your Shopify eCommerce.

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

Configure your selector on Planet

Optionally, when configuring your volume discount, you can set up a banner or a selector to display the volume discount directly on your products.

As for the selector configuration, from Planet, you will be able to configure and customize the following items to adapt them to your store's style:


  • Title: name of the discount

  • Discount labels: text included within the discount, in which the quantity of products and the discount applied are determined as a recommendation

  • Buy button: text to add the product to the cart.

You can choose to add the variant selector in your widget. With this selector, your customers will be able to select which variants they want to combine to save when buying more than one unit.


  • Primary color: the color of the buy button and the selected option.

  • Secondary color: unselected options and comparative price.

  • Text color

  • Text color of the buy button

  • Border rounding: the amount of edge rounding in pixels or percentage.

Add the selector 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 selector to your product page.

To add the selector previously created with Planet to the product page, you must click on "add block" and add it to your theme.

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


Your volume discount will now be visible on the pages of the products or variants affected by the rule. You can choose where to place the selector 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 volume discount that affects that product or variant will automatically appear on the product page of your store.

Did this answer your question?