Showing sale percentage on products Brooklyn Theme

Boarder
Tourist
6 0 3

I'd like to show the sale % and not the savings amount on both the product pages and collection pages in the Brooklyn theme. Any idea how to do that would be super helpful! I'd also like to show the crossed out price on the collection page not just the product page.

Gareth_Dowdeswe
New Member
1 0 0

+1 on this topic... please

0 Likes
Boarder
Tourist
6 0 3

Any reply would be helpful :)

0 Likes
Faiq_Adam1
Shopify Partner
97 0 9

Simple Step to update percentage live demo http://brooklyn-customize.myshopify.com/collections/all

1.  In your Shopify Admin, go to Themes > Template Editor > product-grid-item.liquid 

Line 41

      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}

Change to

      {% elsif on_sale %}
      	<div class="grid-product__on-sale">
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
           {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
          </p>
          
        </div>
      {% endif %}

2.  Themes > Template Editor > product.liquid 

     Insert this code Line 50

       <div class="grid-product__on-sale">
           <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
            {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
           </p>
          
        </div>

After   {% if product.compare_at_price > product.price %}

 

3. Update some css in  theme.scss.liquid

.product-single {
      position: relative;
}
.product-single  .grid-product__on-sale{
   top:0;
   left:0;
}

 

Thank You

Faiq Adam

openshopify.com

Shopify Expert/ Shopify Support
Boarder
Tourist
6 0 3

This worked thanks a ton!

0 Likes
lysan
New Member
1 0 1

I have non-sale & sale products on my webstore, how can I selectively show the sale percentage only on sale products?
After I edited the code, my non-sale product page looks like this with "Save 0%", which looks really odd. Please help. 

lysan_1-1598320183593.png

 

caleguer7
New Member
1 0 0

Hey thanks for the help the discount percentage, how can I make it show only when there is a discount and not a 0% Off 

Thanks!

0 Likes