Change “Sale” button to % discount (Spotlight Theme)

Shopify3.PNG
Hello,

I’d like to change the content of the “Sale” button on my product page to show the % discount I’m applying.

I’m not familiar with coding and I’m using the Spotlight theme.

Thanks for your help.

Hey @Elies216
Firstly, a warm welcome to the community. Could you please add us as a collaborator account to edit the theme code?
https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts

DM me the collaborator code and we’ll get this fixed for you. Also send over the link to your store.

@Elies216 Hey, thanks for posting here.

can you please use this code?

{% assign original_price = product.price %}
{% assign sale_price = product.compare_at_price %}

{% if sale_price > original_price %}
  {% assign discount = sale_price | minus: original_price %}
  {% assign discount_percentage = discount | times: 100 | divided_by: sale_price | round %}

  

Save {{ discount_percentage }}%!

{% endif %}

I hope it will help you; otherwise, contact me. Thanks.

Hi @Elies216

You can follow my post to do that

https://buymeacoffee.com/dandong910/change-sale-badge-text-percentage-discount-shopify-free-themes

Hi @Elies216 ,

As you don’t know how to code, I suggest using a product badge app on Shopify App Store. I can recommend the Fordeer Product Labels & Badges app. I will guide you on how to proceed for free.

Step 1: Install and embed the app.

Step 2: Create a text badge. In the text content section, click on the ellipsis and select variables, then choose {discount_percentage}.

The app will automatically calculate and display based on the compare at price and the price you initially set.

Step 3: In the general settings section, select the page where you wish to display your badge: product pages