Dawn thema change sales badge location

[zamanhasanov96]

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

[Fahous]

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

[DavidEKim]

@zamanhasanov96 

Hi,

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

You need to move <div class="price__sale"></div> in price.liquid.

Put the whole <div class="price__sale"></div> before <div class="price__container"></div>.

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.

Hope it helps.

Thanks.

[Ahsan_ANC]

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

[zamanhasanov96]

Thnak you for help. But it is not work

[zamanhasanov96]

Thank you for help but ı want following image design

 

[DavidEKim · Accepted solution]

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

[zamanhasanov96]

it is work. But not mobile recponciple

[zamanhasanov96]

  

[DavidEKim]

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.

[Ahsan_ANC]

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?

[zamanhasanov96]

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

[zamanhasanov96]

How ı reduce price and sale badge size?

[DavidEKim · Accepted solution]

@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/c/shopify-design/currency-appear-twice/m-p/1663523#M443772

You will need to REMOVE "USD" from store currency.

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

Hope it helps.

Thanks.

[zamanhasanov96]

Thank You it is work perfectly

[zamanhasanov96]

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