Showing sale percentage on products Brooklyn Theme

Highlighted
Tourist
6 0 1

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.

1 Like
New Member
1 0 0

+1 on this topic... please

0 Likes
Tourist
6 0 1

Any reply would be helpful :)

0 Likes
Shopify Partner
100 0 7

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
1 Like
Tourist
6 0 1

This worked thanks a ton!

0 Likes