Brooklyn Theme - Customize price display and sales

Solved
Highlighted
New Member
2 0 0

Hello, 

 

Could please someone tell me which code & where needs to be changed in the Brooklyn theme in order to:

1. Remove the circle on product pictures that are on sale on the collection pages

 

2. I would also like to know how to invert the price order on product pages as the current price is displayed on the right and the regular price is on the left (see picture).

inverted prices.png

3. Finally, I want the the price to be displayed everywhere as it is on product pages (screenshot of point 2), with the corrected behavior. Right now, only the current price is displayed in collections and home page, coupled with the sale circle that I want to remove. 

 

Cheers,

Bastien

0 Likes
Highlighted
Shopify Partner
591 84 127

Please provide website url and if your store is password protected then also provide password

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Shopify Partner
1145 230 298

This is an accepted solution.

Hello Bastien,

1) Hide save badge
Add this css in theme.scss.liquid, you can find this file under Assets and you have to paste this css at bottom. 
Note add it without breaking existing css otherwise layout will break.

.grid-product__on-sale {
    display: none;
}


2) Edit product-price.liquid under Snippets
Find this code and cut copy it 

 <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}"
    {% unless variant.available %}aria-hidden="true"{% endunless %}>
    {{ variant.price | money }}
  </span>

now paste it after  this line

<div class="price-container{% if variant.available and variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>


3) Use this code and use according to your need. 

  {%- if variant.compare_at_price > variant.price -%}
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
  {%- endif -%}



Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
2 Likes
Highlighted
New Member
2 0 0

Thanks a lot @Guleria, that's a huge help! I was able to implement 1) and 2) easily.

 

However I couldn't figure out where I should paste your code for 3). If I want the old price to be displayed with a strikethrough not only on product pages, should I paste it in theme.liquid? I tried a few things but nothing changed.

 

Cheers

0 Likes