How can I change the sales badge location in the Dawn theme?

Store Design
1

Hello. I want sale badge appear in front of price. But my sale badge apper price bottom. How ı change to in front of price it is perfect showing

my store: thuicky.com

2

@zamanhasanov96 Hello how are you doing ?
You are using free theme
Can i share you idea on how you can??

3

@zamanhasanov96

Hi,

The product page looks it has been modified (by someone).

You need to move

in price.liquid.

Put the whole

before
.

If you want me to change the code, please go to Snippets/price.liquid file and post the entire price.liquid code here.

Without changing the price.liquid, you may use the code below.

Please add the code below to assets/base.css file.

.product .price {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.product .price .badge {
  margin-right: 12px;
}
.featured-product:not(.product--no-media)>.product__info-wrapper {
  padding-left: 5rem;
  padding-right: 0;
}

The above code will make the product page as below.

20220807_024127.png
20220807_024127.png1379×436 130 KB

Hope it helps.

Thanks.

4

Hi, @zamanhasanov96

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
@media screen and (min-width: 990px){
.featured-product:not(.product--no-media)>.product__info-wrapper {
    padding-left: 5rem;
    padding-right: 0;
}
}
5

Thnak you for help. But it is not work

6

Thank you for help but ı want following image design

DDCA3D4F-A38D-4CF7-9144-A29E2E3084F8.png
DDCA3D4F-A38D-4CF7-9144-A29E2E3084F8.png1125×2436 307 KB

7

@zamanhasanov96

Hi,

Please use the code below.

.product .price {
    display: inline-flex;
    width: max-content;
}
.featured-product:not(.product--no-media)>.product__info-wrapper {
  padding-left: 5rem;
  padding-right: 0;
}

Hope it helps.

Thanks.

8

it is work. But not mobile recponciple

9

FF524507-243B-4031-AE0F-87C046B6439E.png
FF524507-243B-4031-AE0F-87C046B6439E.png1125×2436 312 KB

33594FCE-48F0-4CCE-BE99-7C1BCD494E0D.png
33594FCE-48F0-4CCE-BE99-7C1BCD494E0D.png1125×2436 282 KB

10

Hi,

it’s due to the screen size & font size in mobile.

Please add the code below (for mobile).

@media screen and (max-width: 767px) {
  .product .price .badge, .product .price__container {
    font-size: 1rem !important;
  }
}

The font size will be forced to root html font size and it will fit in one row.

However the font will be a bit smaller.

Hope it helps.

Thanks.

11

the price, sale price, and badge have more width than the mobile width.

one then that can be done is to remove currency name (USD) from prices to match the space issue, do you want to do this?

12

It is work but not perfect. Please review my other store eycuf.com ıt is showing perfect and big. How this possible?

13

How ı reduce price and sale badge size?

14

@zamanhasanov96

Hi,

In the other page, you removed the USD.

If you remove the USD, you can get the same result.

Do you want that?

If you want to remove the USD from your price, please follow the step below.

https://community.shopify.com/post/1663523

You will need to REMOVE “USD” from store currency.

Then, it will fit in a row with larger font size.

Hope it helps.

Thanks.

15

Thank You it is work perfectly

16

No need extra code. Only remove usd text and problem resolved