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

Store Design
1

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.

2

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

3

www.bikiniwarehouse.com.au

Thanks :slightly_smiling_face:

4

@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
Twinkle_34_0-1636960905646.png1411×693 166 KB

If helpful then please Like and Accept Solution.

2 Likes
5

@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;
}
6

Perfect! Thank you!

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.

8

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

9

Hi. The link doesn’t work ?

10

@PatrickCook

Please check now !!!

11

Hey there!

Do you have the solution in order to put it in the right corner dear ? Thanks a lot !

12

Hey there !

How do you add a sub-heading to your product please ? Thanks a lot !