Changing the position of Discount Badge in Product

Shopify Discussion
,
1

Please Help!

I want to swap the position of my discount badge and product price in my product page. See the photo for reference.

IntechCarl_1-1700032414845.png
IntechCarl_1-1700032414845.png378×109 7.58 KB

2

Hi, @IntechCarl

please send page url

3

Hi! This current theme is not published yet it is in development, will you be able to see it if I send you a preview link for this theme?

4

okay send me preview link

5

https://thecleanroom.net/?_ab=0&_fd=0&_sc=1
Here, I’m not sure if you can see the unpublished theme.

6

btw, this unpublished theme that I need help with is dawn. The current theme in used is debut.

7

please send me page url which you want to fixed the image you gave to me i will give you a code you have to place this code only

i can’t find the image that you show to me which problem you have to solve by me please send exit page url

8

Hi @IntechCarl

To share preview of unpublish theme, you must get link at the right bottom color after clicking Preview

Screenshot 2023-11-15 at 14.46.31.png
Screenshot 2023-11-15 at 14.46.31.png1373×798 146 KB

9

Great! Thank you!

10

https://ceb61zjhq3fwx750-13830324282.shopifypreview.com
here is the shared preview link. I hope this works.

11

Go to your Online store > Themes > Edit code > Assets, open base.css file and add this code at the bottom:

.product__info-wrapper .price {
display: flex;
flex-direction: column-reverse;
}
.product__info-wrapper .price .badge.price__badge-sale.color-accent-2{
    width: fit-content;
}

Screenshot 2023-11-15 at 14.58.25.png
Screenshot 2023-11-15 at 14.58.25.png633×405 12.6 KB

12

Thank you Dan! This one works!

13

Btw, is may I ask for your help again for another concer?
Is it possible to add another badge that shows the save amount in discount? I want to add it besides the discount percentage. See the photo for reference.

IntechCarl_0-1700035320654.png
IntechCarl_0-1700035320654.png370×150 8.31 KB

14

You can try to use this code

{%- assign savings = product.compare_at_price | minus: product.price  -%}
Save {{ savings | money_without_trailing_zeros | money_with_currency }}
15

where should I put this code?

16

Go to your Online store > Themes > Edit code > price.liquid file, add it next to % off code

17

here?

IntechCarl_0-1700035819428.png

18

If you want it appear in % off then paste code after “Off”. If you want it appear to new badge, please add code like this right after {%- if show_bages -%} code


{%- assign savings = product.compare_at_price | minus: product.price  -%}
Save {{ savings | money_without_trailing_zeros | money_with_currency }}
19

This Actually works, But it shows 0 amount of savings even if the product is on sale

20

Please try to update code to this version

{%- assign savings = product.compare_at_price | minus: product.price  -%}
Save {{ savings | money_without_trailing_zeros }}