change SALE position

Highlighted
New Member
4 0 0

Schermata 2020-04-03 alle 20.58.09.png

 

hi, I would like to change the position of 'SALE' badge and put it under the price 34.90$... 

I'm using Minimal theme 

this is the code 

.badge--sale {
top:0%;
right: 50%;
font-family: $headerFontStack;
background-color: #50B83C;
width:20px;
height:11px;
border-radius: 0;

 

 

if I change only top and right, it fits on desktop but when I visit the website on mobile it does not fit right.. how can I do it ?

0 Likes
Highlighted
Shopify Partner
87 29 23
.badge--sale {
    display: block;
    position: relative;
margin: 0px auto; }

That may work for you!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
Highlighted
New Member
4 0 0

with this code

.badge--sale {

display: block;
position: relative;
margin: 0px auto;
font-family: $headerFontStack;
background-color: #50B83C;
width:20px;
height:11px;
border-radius: 0;

 

 

this is the result Schermata 2020-04-03 alle 21.15.14.png

0 Likes
Highlighted
Shopify Partner
87 29 23

Would need a link to that page to do anything other than guess at what would work!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
Highlighted
Shopify Partner
87 29 23

You'd have to move the element with the class "grid-link__sale_price" out of the paragraph tags( <p></p>) that it shares with the regular price, and place it after those paragraph tags with the regular price.

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
Highlighted
New Member
4 0 0

.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}

 

.grid-link__unit-price {
font-size: 1em;
}

 

.badge--sale {
font-family: $headerFontStack;
background-color: #50B83C;
width:20px;
height:11px;
border-radius: 0;

}

 

I do not know why but like this it does not work 

0 Likes
Highlighted
New Member
4 0 0

and also if I put the code you sent, the badge goes up on the left (left upper corner of the image)

 

 

0 Likes
Highlighted
Shopify Partner
216 17 82

Hey @strikkers 


I noticed that you wanted to apply product badges/stickers on your catalog images, but you're facing issues with getting it placed properly. Hope your issues were solved.

Well, with our app (Modemagic) that we recently developed you won't have to be stuck in getting the right code for your sticker placement! Our app will help you add product stickers/badges on your catalog within seconds. And we have an extensive collection of customised stickers based on different occasions (Sale & Discounts, Pre-Order, Trust Badges and much more)

No complex edits, no back & forth with designers. Update your store within a few minutes! 

undefinedundefinedundefined

Don’t find a sticker that meets your need, reach out to us on chat for a custom design! We also create stickers in various languages. Check out this app on Shopify here.

Hope this helps :) 

Fayaz

ModeMagic
Featured on Shopify Staff Picks
0 Likes