How can I rearrange the order of price, compare price, and sale badge?

Store Design
1

Could anyone possibly help out with arranging the price, compare price & sale badge in the order i have just stated.

Currently it is in this order:

Sale Badge | Compare Price | Price & i want it change the positioning to Price | Compare Price | Sale Badge

Im using the empire theme aswell.

Heres a screenshot of how it looks:

Screenshot 2022-09-20 at 09.44.02.png
Screenshot 2022-09-20 at 09.44.02.png504×110 11 KB

Thanks

2

@D_Paloi ,

Please share the URL…

3

Store url: Goldplexus.com

Store Password: edu83js94ud

4

@D_Paloi ,

I am not able to inspect the element here.

5

Can you try again, it should work now or in a few minutes

6

Any update?

7

@D_Paloi ,

span.product__badge.product__badge--sale {
    order: 3;
}
.product-pricing {
    display: flex;
}
span.product__badge.product__badge--sale {
    order: 3;
}
.product__price {
    display: flex;
    flex-direction: row-reverse;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

8

Works great! Is there any way to add a bit of spacing between the price | compare price | sale badge as they seem very close

Thank you very much

9

Let me know if the spacing can be done, thanks

10

@D_Paloi ,

Have you changed the password?

11

Ive already managed to sort it out. Thanks for the help

12

@D_Paloi ,

Your Most Welcome.

Please like my post :slightly_smiling_face: