How to show discount on variant buttons on Shopify

What I’ve been thinking about:

A common request I get is to show the discount percentage for variants. If you’re using variant buttons, it’s helpful to display the discount above the button. This lets customers know they’ll receive a discount for purchasing the higher quantity without having to click on the button and see the updated pricing.

This modification works for products that have one option (e.g. Packs) and multiple option values. For example, a merchant might sell a 4, 6, and 12-pack of soda. The 6-pack has a 10% discount and the 12-pack has a 15% discount.

Here’s how to accomplish this:

First, we need to put the discounted variants on sale for a lower price. To show a sale price in your online store, your variant needs to include a sale price and the original price, called the compare at price.

Next, you’ll need to find the code for variant buttons in your theme. In Dawn, you can find this in main-product.liquid. Then you’ll add the following code inside the variant label:

‍

‍

See the code better via this link

After this code has been implemented, style with custom CSS to achieve your desired look. Now you have variant buttons that show a discount!

3 links you can’t miss:

• Commerce Cream: Need some inspiration? Browse the most beautiful Shopify online stores.
• Product CSVs: Sometimes you may need to set up a development store to test new features or assess your work. Shopify provides high-quality product data for design and testing purposes.
• Shopify Analyzer: A page speed tool built specifically for Shopify stores. This tool not only identifies performance issues but also gives recommendations to fix them.

One app I like:

Bundles.app | Inventory Sync by Gazebo

Bundles are a great way to boost sales and increase your AOV, but inventory management can be a pain. Many merchants resort to manually adjusting stock for each product in the bundle.

I have a better solution: Bundles.app | Inventory Sync. This app automatically syncs inventory for any bundled products that you create within your store.