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:

General configuration

  • Title (optional)

  • Options: the text and label included in each of the options can be customized independently. In addition, one of the options can be preselected by default to stand out from the rest.

Remember that you can include variables within the text and labels to show the amount of discount, products and the price per unit in each option.

  • Buy button (optional): you can customize the text displayed to add the product to the cart and include variables. In case one of the quantity selector options does not have a discount, you will be able to modify the text for this option independently.

In addition, you will be able to choose optionally:

  • Add the variant selector: with this selector, your customers will be able to select which variants they want to combine to save when buying more units.

  • Show the quantity selector in the last option: to facilitate the purchasing process, customers will be able to add more units and select variants directly from the quantity selector.

  • Show the compare at price: shows the total price without discount.


You will be able to edit the colors, font size and rounding of the different sections of the quantity selector to adapt the design 100% to that of your store.

In addition, you can optionally add a background to the quantity selector.


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?