Brooklyn Theme Changing Sale Badge / Emblem

Tourist
52 0 3

Hi,

 

I'm a bit inexperienced when it comes to coding and I was hoping someone would be able to assist me.

 

I was hoping to change 3 things:

1.) The color of the emblem from red to grey

2.) Make the emblem's circle a sold circle instead of an outline

3.) Use the percentage difference instead of the price such as 10% Off

 

 

 

 

 

Thank you ! :)

 

www.CarterSupplyCo.com
1 Like
Highlighted
Shopify Expert
2686 67 683

Hi James!

To change the colors of the badge you should add the following at the end of your theme.scss.liquid file in Assets folder:

.grid-product__on-sale {
  color: white;
  border: none;
  background: grey;
}

To show percentage instead of saved amount you should open a product-grid-item.liquid in your Snippets folder and replace these lines 

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

with the following

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

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
5 Likes
Highlighted
Tourist
52 0 3

Tim, thank you so much! Can't believe I got help on Christmas.

Happy Holidays!

www.CarterSupplyCo.com
0 Likes
Highlighted
New Member
2 0 0

Hi thanks for that tip, how do you change it to a circle please?

Thanks

Steve

0 Likes
Highlighted
Shopify Expert
2686 67 683

Hi Steve,

I see what you mean -- those ovals do not look cool at all.

This happens because the text you put in those labels is too long. Initially, the size of the labels was calculated to be approximately square 50px by 50px, then the element's CSS property border-radius was set to be 25px to round the corners of this block so much that it became a circle. However long text makes this element rectangular, not square. 

You can either play with padding to make it square again and set a proportionally higher border-radius, or ditch this rounding altogether and settle with rectangular labels by adding this at the bottom of your theme.scss.liquid Asset:

.grid-product__sold-out, /* will change sold-out label as well */ 
.grid-product__on-sale{
    border-radius: 0;
    box-shadow: 1px 1px 1px rgba(50,50,50,0.5); /* decorate it with the shadow instead*/
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
2 Likes
Highlighted
New Member
2 0 0

Hi tim

Thats brilliant, thanks I will give it a try, they do look ugly. So may change the format to a % discount instead.

 

Regards

Steve

0 Likes
Highlighted
New Member
1 0 0

How do I get the sale to be on the right side instead of the left

0 Likes
Highlighted
Shopify Expert
2686 67 683

HI David,

this CSS code will do it:

/* --tim: move labels to the right */
.grid-product__sold-out, .grid-product__on-sale{
    left:auto;
    right:-8px;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
4 0 0

Hey Tim, thank so much for all of this. How can I make the " SAVE" amount a rectanle. but not see through and also I want it to be on the middle, righthand side of each product.

I want it to be like a badge, a rectangle in shape. all black with white text.

 

Thanks!

0 Likes
Highlighted
Shopify Expert
2686 67 683

Just combine all the CSS codes above:

.grid-product__sold-out,
.grid-product__on-sale {
    /* --tim: make badges square  and decorate with the shadow instead*/
    border-radius: 0;
    box-shadow: 1px 1px 1px rgba(50,50,50,0.5);
    /* --tim: make them white text on black bg */
    color: white;
    border: none;
    background: black;
    /* --tim: move labels to the right and approx. middle */
    left: auto;
    right: -8px;
    top: 50%;
    /* --tim: want it to look more like label? */
    top: 0;
    padding-right: 8px;
    border-radius: 5px;
    transform: rotate(-20deg);
}
/* --tim: label hole */
.grid-product__sold-out::after,
.grid-product__on-sale::after {
    content: "";
    position: absolute;
    right: 4px;
    background: white;
    width: 7px;
    height: 7px;
    top: 4px;
    border-radius: 10px;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like