Hey! Shopify community, I have created the discounts using discount code. Now i want to get the discounted percentage using liquid and discount code. How i can do that??
This is Amelia from PageFly - Landing Page Builder App
You can calculate the discount percentage based on the original price and the discounted price. Here’s how you can do it:
-
Calculate the Discount Percentage:
- You can use Liquid to calculate the percentage discount by comparing the original price (compare_at_price) and the discounted price (price).
-
Add the Code to Your Theme:
- Go to your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code.
- Open the file where you want to display the discount percentage. This could be product-template.liquid, collection-template.liquid, or another relevant file.
-
Insert the Liquid Code:
-
Add the following Liquid code to calculate and display the discount percentage:
{% if product.compare_at_price > product.price %} {% assign discount_percentage = 100 | times: (product.compare_at_price | minus: product.price) | divided_by: product.compare_at_price | round %} <span class="discount-percentage">{{ discount_percentage }}% OFF</span> {% endif %}
-
-
Customize the Display:
-
You can style the discount percentage using CSS to match your store’s design. For example:
.discount-percentage { color: red; font-weight: bold; }
-
Example Implementation
Here’s an example of how you might integrate this into a product page:
<div class="product-price">
<span class="original-price">{{ product.compare_at_price | money }}</span>
<span class="discounted-price">{{ product.price | money }}</span>
{% if product.compare_at_price > product.price %}
{% assign discount_percentage = 100 | times: (product.compare_at_price | minus: product.price) | divided_by: product.compare_at_price | round %}
<span class="discount-percentage">{{ discount_percentage }}% OFF</span>
{% endif %}
</div>
You should remember that:
- Ensure compare_at_price is Set: This calculation relies on the compare_at_price being set for your products. Make sure this field is populated in your product data.
- Test Your Changes: After making these changes, test them on your store to ensure they display correctly and calculate the discount accurately.
Hope that my solution works for you.
Best regards,
Amelia | PageFly