d
Topic
Posts:
6
Last edited October 15, 2015
g
1
upvotes

Showing sale percentage on products Brooklyn Theme This post is outdated

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.

i
Replies
Posts:
1
October 15, 2015

+1 on this topic... please

Posts:
6
October 16, 2015

Any reply would be helpful :)

Faiq Adam Shopify Partner
Posts:
99
Last edited October 16, 2015
g
1
upvotes

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
Posts:
6
October 20, 2015

This worked thanks a ton!