Re: How to show percentage of discount beside price for PRODUCT PAGE only

How to show percentage of discount beside price for PRODUCT PAGE only

clayinfo
Explorer
81 0 17

Hi, I would like to add the sale percentage beside my price on product page only. Could anyone help me? Additionally I want to also swap my discounted price with my old price. Please see photo for reference. 


Old layout :

Screen Shot 2024-09-20 at 3.46.25 PM.png


Desired layout:

1.jpg



www.constructionlayers.com

 

 

Replies 4 (4)
clayinfo
Explorer
81 0 17

please try constructionlayers.com

Arif_Shopidevs
Shopify Partner
263 37 36

You can try to insert this code in snippets/price.liquid if you are using dawn theme line 126 then it will show like save 11% for me with background

          <span style="background-color:red;color:#FFF">
{% if compare_at_price > price %}
  {% assign compare_at_price_float = compare_at_price | divided_by: 100.0 %}
  {% assign price_float = price | divided_by: 100.0 %}

  {% assign price_difference = compare_at_price_float | minus: price_float %}

  {% assign discount_percentage = price_difference | divided_by: compare_at_price_float | times: 100.0 %}

  <p>Save {{ discount_percentage | round }}%</p> <!-- Prints the rounded percentage saved -->
{% endif %}



              </span>
Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

suyash1
Shopify Partner
9994 1241 1579

@clayinfo  it will need code editing, then it can show like this site

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

MateoRossini
Tourist
5 0 1

Hi @clayinfo 

I strongly recommend using the Discounty App, where you can take advantage of sale badges, discount badges, and apply discounts to compare-at prices. Check out Discounty app!