Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
This is an accepted solution.
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?
Hello Brando1,
Online Store-> Themes -> Edit code->Sections->product-template.liquid
Search this code:
<h3 class="h1 product-single__title">
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 %}
Hey oscprofessional,
This doesn't work since i don't have Compare Price on the products. I am only using the Automatic Discount rule.
This is an accepted solution.
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?
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.
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 🙂
Sorry, I am not a good help when selecting a discount app.
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.
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 🙂
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?
so true. it is so basic thing and we are already in 2023 and still without this ability . ridiculous for a platform which meant for online shops.
Agree, total BS, I used VPCart (old platform) and it allowed to create discounted "Collections" and the discount showed on Product pages.
Hi!
I have the same issue, but not sure I understood the solution you gave. I have a Collection with 15% automatic discount active for 24 hours. Id really like to learn how to show my automatic discounts on product and collection pages since it is a tool I use often. Thank you.
Hi @elisajordan, Ill give to you straight because I know there is a lot of chatter on this topic across the community forums. There is NO solution to the problem you are describing. I am a Shopify App developer and I can attest to the fact that there is no app or themes which will accomodate what you are describing.
What I described was an app that can help you promote a discount "codes" (not automatic discounts) in the collection page, product page, and cart page. Now I know you are looking for an app or theme modification that can acomodate "automatic discounts", unfortunately this does not exist (I am investigating intensily a way to get this done dynamically for every theme but it is not easy).
So if you are open to creating a discount CODE (instead of automatic discount) for the collection you have, then you will be able to design a badge with the percentage discount on every eligible product in the collection page using Codeboost. Additionally you will be able to do this privately to customers (which automatic discounts do not allow). This means that 1 customer might see eligible products while another might not, this can help you increase loyalty for your most VIP customers.
Happy to answer any questions you might have about the app if you are willing to try it 🙂
same problem here
Here is a suggestion. You can use the suggested code but make a separate template for items you want on sale.
Thanks Its working fine but i want it in bold and in dark color.
Thanks!
When I added the code, it shows 0% OFF
Hi there!
I'm also trying to apply this discount display, however when I search <h3 class="h1 product-single__title">, 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?
thekalmstore.com
Using Debut theme.
Thanks!
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.
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?
Hi have the same problem here. Somebody can help me?
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.
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--------------
<!-- snippet/product-price.liquid -->
{% 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--------------
<!-- snippet/product-price.liquid -->
{% 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.
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.
Thank you Paula, that worked great and was very helpful. I figured out how make it only apply to specific products. It does take some legwork though. I did this by creating a new theme template for the items I didn't want the sale to show on. Right now, I only have my products split into two categories (on sale and not on sale). My solution would be tedious for more numerous splits. I am using Debut theme.
I first made a copy of three properties: product.liquid under Templates folder, product-template under Sections folder, and product-price.liquid under Snippets folder. I named them product.alternate.liquid, product-alternate.liquid, and product-price-alternate.liquid respectively. I used these as my non-sale templates, so the code was identical to how it worked before Paula's solution.
I then went into each of the new files and found where they reference the original properties and referenced the new properties.
Template:
{% section 'product-template' %}.
Swapped to {% section 'product-alternate' %}.
Section:
{% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
Swapped to {% include 'product-price-alternate', variant: current_variant, show_vendor: section.settings.show_vendor %}
Snippet:
I didn't change this because I used these as my non-sale items. If you wanted to make these your sale items and the original properties your non-sale, you make Paula's change above to get the discount to show.
After all this, you exit the liquid area and go into each product you want to show your sale under Theme Template and select your newly created template.
It seems to be working for us so far. I plan on building out more of these properties on the backend so we can easily shift from sale-to-sale. As I said before, this would be cumbersome for someone who wanted to display a large variety of discounts on multiple groups of products, but it could be done.
Also you can also use minus: XXXX to do flat dollar amount discounts with Paula's code above.
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!
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024