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

Solved
PatrickCook
Excursionist
25 0 7

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
Pathfinder
93 15 33

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
2563 308 641

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. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Savior
Pathfinder
93 15 33

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
2563 308 641

@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. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
PatrickCook
Excursionist
25 0 7

Perfect! Thank you!

PatrickCook
Excursionist
25 0 7

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
Pathfinder
93 15 33

@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
25 0 7

Hi. The link doesn't work ?

Savior
Pathfinder
93 15 33

@PatrickCook 

 

Please check now !!!