How To Show Discount on Product Page Ride theme

Store Design
1

Hello, how can you show discount on product page (I’m using ride theme).With multiple varients

2

Hello there

To show the discount on a product page in the Shopify “Ride” theme, you can use the following steps:

  1. Navigate to the theme editor in your Shopify store’s admin panel.

  2. From the “Sections” directory, select the “product-template.liquid” file. This file contains the code for the product pages in your store.

  3. Scroll down to the section of the code that displays the product price. It should look something like this:

{% if product.compare_at_price > product.price %}
  Regular price
  ~~{{ product.compare_at_price | money }}~~
  {{ product.price | money }}
  Sale
{% else %}
  {{ product.price | money }}
{% endif %}
  1. Within the “else” block, add a line of code to calculate and display the discount as a percentage. Here is an example of how you can do this:
{% else %}
  {% assign discount = (product.compare_at_price | minus: product.price) %}
  {% assign discount_percent = (discount | times: 100) | divided_by: product.compare_at_price %}
  {{ product.price | money }}
  {{ discount_percent | round }}% off
{% endif %}

Save your changes and publish the theme to apply the discount to the product page.

I hope these steps help you show the discount on a product page in the Shopify “Ride” theme! Let me know if you have any questions.

3

Hello I don’t find the file: product-template.liquid