How can I move 'sale' badge to alternate position??

Solved
PatrickCook
Excursionist
39 0 14

hi, 

I would like to move the 'sale' badge to sit in the top left corner of the product image, instead of below the price. 

I would like to do this for the collection grids on the home page. 

thanks, Patrick. 

Accepted Solution (1)

Accepted Solutions
Savior
Navigator
288 63 90

This is an accepted solution.

@PatrickCook 

1. Go to your store click on Actions > Edit Code

2. Assets > theme.css add below lines at the bottom of the file.

.price__badges--listing {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
}

Twinkle_34_0-1636960905646.png


If helpful then please Like and Accept Solution.

View solution in original post

Replies 9 (9)
Zworthkey
Shopify Partner
3502 414 800

Hii, @PatrickCook 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PatrickCook
Excursionist
39 0 14
Savior
Navigator
288 63 90

This is an accepted solution.

@PatrickCook 

1. Go to your store click on Actions > Edit Code

2. Assets > theme.css add below lines at the bottom of the file.

.price__badges--listing {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
}

Twinkle_34_0-1636960905646.png


If helpful then please Like and Accept Solution.

View solution in original post

Zworthkey
Shopify Partner
3502 414 800

@PatrickCook 
Paste this code on top of the theme.scss file.

.price__badges.price__badges--listing {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. & Want to know more .Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Designing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PatrickCook
Excursionist
39 0 14

Perfect! Thank you!

PatrickCook
Excursionist
39 0 14

Hi, 

Could I please ask one more request, maybe you can help?

Is it possible to make the product image in the home page collection grid alternate to the second image when the mouse is hovering over it?

Like a roll over image?

 

Thanks, Patrick. 

Savior
Navigator
288 63 90

@PatrickCook 

Yes, it can be done but it will take a lot of code editing from admin side so you can follow the steps from Here 

Hope this will help you !!! 

For further issues please let me know !!!


If helpful then please Like and Accept Solution.

PatrickCook
Excursionist
39 0 14

Hi. The link doesn't work ?

Savior
Navigator
288 63 90

@PatrickCook 

 

Please check now !!!