Showing discount on Product Page (without Compare price)

Store Design
1

Hey,

I have created an Automatic Discount that applies to a specific Collection. The discount rule is 40% on all products within that collection.

The discount is visible when i add the product to the cart and view it in the cart. But i am not able to figure out how to get the discount to show on the product page.

All the articles i have read seem to apply to products that have a different compare price.

Ex. https://www.blackbeltcommerce.com/shopify-how-to-show-percentage-discount-saved/

But i am not changing the compare price since i am using the Automatic Discount. Is there a way to do this? Or do i need an app?

2

Hello Brando1,
Online Store-> Themes → Edit code->Sections->product-template.liquid

Search this code:

Add below code after that: 
{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}

3

Hey oscprofessional,

This doesn’t work since i don’t have Compare Price on the products. I am only using the Automatic Discount rule.

4

Not 100% sure, but my understanding is that you (I mean your theme code) can’t know what discounts apply until you add item to cart and only then this information is available, as not all discounts are as simple as yours.

With some hackish javascript your can do it in background and update the data displayed on the product page, but …

In your case you may be better off by simply outputting the {{ product.price | times: 0.6 | money }} (and so on) based on some condition?

5

Hey Tim,

Yeah. That seems right. I am using the debut theme currently.

That seems like a really clever trick. How would i apply it only to a single collection though?

My guessing is something like this:

{{ if product.type == ‘shoes’ }}

code

{{ endif }}

But it seems like the built in discount system has it’s limitations. Is there a recommended app for setting more advance discount?

Because changing the Compare Price on each product is not really an option when you have hundreds of products.

6

Approximately:

{% if product.type == "shoes" %}
  {{ product.price | times: 0.6 | money }}
{% else %}
  {{ product.price | money }}
{% endif %}

However, if your products has variants, it’s a bit more complex and will need javascript modification as well.

Shopify Discounts have limitations, but I see a reason why Auto discounts applied in cart only, because some may apply only if entire order is more than threshold.

You may consider using an App, general automation app like Arigato or Mechanic, or some discount app.

Say, you can instruct the app to loop over products in particular collection and assign compare_at_price to be product.price * 1.4 :slight_smile:

Sorry, I am not a good help when selecting a discount app.

7

Im running into the same situation. We run x% off collections/certain products/etc.
Anyone know of (or willing to write) and app I can turn off and on that will read the active discounts using shopify discounts
I still can’t believe this isnt a core feature (like it is on so many other carts)
The problem with editing the code alone is everytime we run a sale we’d have to edit the code, worse yet some of our products have up to 55 variations.

8

Thanks Its working fine but i want it in bold and in dark color.

Thanks!

9

Hello.

I know what you mean.

you can modify on the top of file(product-price.liquid)

Pay attention to this： {%- assign money_price = price | money -%}

You can define a new variable to store the price displayed after the discount

For example:
{%- assign New_money_price = price | times: 0.6 | money -%} //the price you want to show.

You can visit my website（casefyi ）, and that’s how I do it.

10

same problem here

11

Hi, can you provide more step by step instructions on how to input the code so that the percentage discount shows on the product page?

12

Hi have the same problem here. Somebody can help me?

13

I don’t think that qualifies as a solution- Shopify is supposedly an ecommerce platform and they do not even give the basic ability to post SALE PRICES without some bunch of BS and modification of code? This is getting to be a bit much. I mean, FOR GOD’S SAKE- THIS IS AN ECOMMERCE PLATFORM WITHOUT THE ABILITY TO SHOW SALE PRICES- GTF REAL… Have you taken this up with Shopify? What is the giant scam here that they REFUSE TO IMPLEMENT THINGS THAT ARE STANDARD ELSEWHERE?

14

2 things:

What would you put as the code if you want the price to update when they pick 3 on the quantity picker? I guess like a quantity break, eg buy 3 get 20% off

And where would the code go

Thanks in advance :slightly_smiling_face:

15

When I added the code, it shows 0% OFF

16

I installed the Vela app and it lets me bulk edit products for free. I can add/remove text to product pages for items that are on sale, such as BOGO 50% OFF.

17

In the Debut theme, I changed the product-price.liquid file and it worked perfectly .. just 2 line changes:

This is the first 10 lines of the file. In bold is what needs to be changed.

---------ORIGINAL--------------

{% if variant.title %}
{%- assign compare_at_price = variant.compare_at_price -%}
{%- assign price = variant.price -%}
{%- assign available = variant.available -%}
{% else %}
{%- assign compare_at_price = 1999 -%}
{%- assign price = 1999 -%}
{%- assign available = true -%}
{% endif %}

The following changes in red make every single product be 20% off which is what I needed. If I want to change it to 10% off I change the “times: 0.8 => times: 0.9”. This causes the original price to have a line through it then the sale price is next to it with the word “Sale”. Note: I already had created a 20% discount on the Discounts page which already makes the discount in the cart. If you don’t want it to show any sale price, just change the “times: 0.8 => times: 1.0”. This change below now shows the discount on the collection pages and on the product pages.

---------CHANGES IN RED--------------

{% if variant.title %}
{%- assign compare_at_price = variant.price -%}
{%- assign price = variant.price | times: 0.8 -%}
{%- assign available = variant.available -%}
{% else %}
{%- assign compare_at_price = 1999 -%}
{%- assign price = 1999 -%}
{%- assign available = true -%}
{% endif %}

Note: I have no idea how to only change some of the products and not all. I also suspect there is a way to tap into the actual discount you created like variant.discount or something like that but I did not investigate that because this solution solved my problem. I agree it should definitely be easier but this method sure beats changing the compare to prices on all the listings. Hope this helps someone else.

Here’s what it looks like. Your colors will vary depending on how you have your shop set up.

Paula-Daniel_0-1614558614400.png
Paula-Daniel_0-1614558614400.png1062×481 322 KB

18

Hi there!

I’m also trying to apply this discount display, however when I search

, nothing comes up.

Is this because we are using a different theme? Can someone tell me how this display might be possible on our website?

Using Debut theme.

Thanks!

19

Thank you for sharing this Paula! This was a huge help. Are you aware of any way we can show the discount price on the category page as well? I imagine we would need to modify another liquid file. Just not sure which one, kind of new to this.

20

Hi @Brando1 , I’m not sure if this is what you are looking for but this app Codeboost I use let’s you promote discount codes across your website really well. You can add custom messages including the percentage the discount code will apply on the eligible products, fully customizable.

I like it because I do not have to modify any theme code.

Description from marketplace:

Codeboost will allow you to display badges and messages above eligible products in the collections page, product page and cart page. Additionally you can only show these promotions selectively and privately to specific customers!

Hopefully this helps!