"i only speak liquid" #9: Show discount on variant buttons 🛍

Written by Erin Vaage 🧙

Author

Erin Vaage
September 06, 2022

Hey all đź‘‹!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Erin) share learnings we face daily.

PS: I'm an expert on Storetasker and work with the best wellness, beauty, and food and beverage brands. Storetasker helps me to connect with awesome brands and work on projects I’m passionate about. Apply here if you want in.

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:

{% assign savings = false %}

{% assign option_variant = product.variants[forloop.index0] %}

{% if option_variant.price < option_variant.compare_at_price %}

{% assign savings = option_variant.compare_at_price | minus: option_variant.price | times: 100.0 | divided_by: option_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0' | append: '% Off' %}

{% endif %}

{% if savings %}

<div class="savings"></div>

{% endif %}

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 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.

One learning as a freelancer:

I’m sure you hear it all the time - you have to choose a niche! For years I thought “Shopify development” was enough of a focus.

Making Shopify my niche allowed me to understand the ins and outs of the platform and the people who use it. I became someone people want to work with and hire because I’m not a generic web developer. I uniquely understand my client’s problems and can offer the best solutions.

But this year I started to wonder - how well do I really know my client’s industries? Of course, most of my clients were e-commerce, but the problems a fashion brand faces are vastly different than a food brand.

So I decided to niche down even further! Now I work primarily with CPG brands and have an even better understanding of my client’s unique problems and needs. It also helps me stand out from the competition and become better known for what I do.

I hope you enjoyed my first edition! I would love to hear your feedback and thoughts.

Talk soon,