How to show % discount on a product using Luxe theme

Store Design
, , , , , , , , ,
1

I’m using the Luxe theme. Can someone guide me on how to display the percentage discount on every product, including product cards and product pages, instead of just showing ‘Sale’?

Website: https://flyuhpmj48fgyij1-86107750704.shopifypreview.com

2

Hi @Sivadarshan

If you don’t mind, please share the collab code so I can request access to your theme so I can check and do it for you.

3

Hi @Sivadarshan

The Luxe theme doesn’t have a built-in option to show the percentage discount on product cards, but it does support displaying it on product pages. Here are 2 simple steps to enable it on your product pages:

Step 1: Go to Customize in your Shopify admin and navigate to the Product page section.

Step 2: Select the Price block on the left side, then in the sidebar on the right, enable Show percent discount

(Screenshot example: [link])

Save your changes and check your product pages to see the percentage discount displayed.

Let me know if you need further help!

Best,
Felix

4

@GloboApps-Felix Thanks for the help, But I also want in all collection pages too

5

Are you using an app to manage the sale prices, @Sivadarshan ? If so — and if you’d rather not get your hands dirty — try reaching out to the app’s support team.

At Alpha Sale, we handle this kind of request all the time, and we do it free of charge :blush:

Let us know if we can help!

6

Hi @Sivadarshan

To display the percentage discount on every product in the Luxe theme—both on product cards and product pages—instead of just showing “Sale,” you’ll need to add some custom code to your theme’s Liquid templates and update the styling.

Here’s how it works:
We calculate the discount percentage by comparing the original price and the sale price, then display that value dynamically wherever you want.

Example code snippet to add inside your product price section (like product-card.liquid or product-template.liquid):

{% if product.compare_at_price > product.price %}
  {% assign discount = product.compare_at_price | minus: product.price %}
  {% assign discount_percentage = discount | times: 100 | divided_by: product.compare_at_price | round %}
  <span class="discount-percentage">-{{ discount_percentage }}%</span>
{% endif %}

Suggested CSS for styling the discount badge:

.discount-percentage {
  background-color: #e63946;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

This snippet will show a red badge with the percentage off whenever the product is on sale.

Let me know, if you have any questions!