Need Help Displaying Discount Percentage in Be Yours Theme

[Digital_Imran]

I’m using the Be Yours theme. On the product page, there’s no option to display the discount as a percentage. It only shows the price and the compare-at price, but not the percentage of the product that is discounted.

I’ve attached a screenshot for reference.
I would really appreciate any help or guidance on this. Thank you!

Store URL: shop.capilactive.ch

[Dotsquares]

Hi @Digital_Imran

Thanks for reaching out Shopify community !

Be Yours theme doesn’t show the discount percentage by default on the product page. However, you can add this with a bit of custom code.

Here’s a quick guide to show the discount percentage next to the price:

1. From your Shopify Admin, go to Online Store > Themes.

2. Click Actions > Edit code on your Be Yours theme.

3. In the Sections folder, open main-product.liquid (or product.liquid, depending on your theme version).

4. Look for where the price and compare-at price are displayed. Right below that, add the following code:

{% if product.compare_at_price > product.price %}
  
    Save {{ ((product.compare_at_price | minus: product.price) | times: 100.0 | divided_by: product.compare_at_price) | round }}%
  
{% endif %}

5. Save the file and preview your product page.

You may need to adjust the styling with some CSS to match your theme’s look.

[tim_tairli]

The code suggested by @Dotsquares is fine, but it would only show product minimal price and would not update when new variant is selected on product page.

I’d be adding code like this:

{%- liquid
  assign v = product.selected_or_first_available_variant
  if v.compare_at_price > v.price
    assign savings = v.compare_at_price | minus: v.price | times: 100.0 | divided_by: v.compare_at_price | round: 2
  endif
-%}
{%- if savings %}
  
    Save {{ savings }}%
  
{% endif -%}

Ideally, somewhere inside the element highlighted on the screenshot – this way it will be updated by the theme JS:

This solution will be acceptable if you already have modified your theme code, or your theme is not from theme store because editing theme code will make it difficult to update in future.

In this case, another option is to use “Custom liquid” block if your theme has it.

[Digital_Imran]

Thank you so much! I’m sorry, but I couldn’t find where to add this code. Could you please tell me exactly where I should place it? I really appreciate it

[Digital_Imran]

@tim_1 Thank you, Tim! However, I couldn’t find where exactly to add this code in the theme files. If I share the code from my main-product.liquid, would you be able to help me place it in the right spot?

[tim_tairli]

Yes, sure.

The highlighted code should look like this in your Liquid file:

[Digital_Imran]

Thank you so muc @tim_1 let me try