Brooklyn Theme - Customize price display and sales

Store Design
1

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

  1. 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

2

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

3

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;
}
  1. Edit product-price.liquid under Snippets
    Find this code and cut copy it

    {{ variant.price | money }}

now paste it after this line
  1. Use this code and use according to your need.
{%- if variant.compare_at_price > variant.price -%}
      
        {{ variant.compare_at_price | money }}
      
  {%- endif -%}

Thanks

2 Likes
4

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

5

Hey Gloria - what if instead of save XX - I want it to show the discount % - like " 20% OFF " on product image left top

6

Hi Guleria, I’m wanting to do exactly this but the coding looks different now. Looking on snippets - product-grid-item.liquid but not sure which bit to change. Thanks

7

Hello @cathryne ,

Yes now theme is updated you can get idea from the solution but you have to find the code files your own or you can go with a developer.

Thanks