FROM CACHE - en_header

Dawn thema change sales badge location

Solved
zamanhasanov96
Excursionist
94 1 8

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

Accepted Solutions (2)

Accepted Solutions
DavidEKim
Shopify Partner
229 61 76

This is an 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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

DavidEKim
Shopify Partner
229 61 76

This is an 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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 15 (15)
Fahous
New Member
6 0 0

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

DavidEKim
Shopify Partner
229 61 76

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

 

20220807_024127.png

 

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
Ahsan_ANC
Shopify Partner
514 108 106

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;
}
}
> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.
zamanhasanov96
Excursionist
94 1 8

Thnak you for help. But it is not work

zamanhasanov96
Excursionist
94 1 8

Thank you for help but ı want following image design

 

DDCA3D4F-A38D-4CF7-9144-A29E2E3084F8.png

 

 

DavidEKim
Shopify Partner
229 61 76

This is an 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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
zamanhasanov96
Excursionist
94 1 8

it is work. But not mobile recponciple

zamanhasanov96
Excursionist
94 1 8

FF524507-243B-4031-AE0F-87C046B6439E.png

33594FCE-48F0-4CCE-BE99-7C1BCD494E0D.png

  

DavidEKim
Shopify Partner
229 61 76

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
Ahsan_ANC
Shopify Partner
514 108 106

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?

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.
zamanhasanov96
Excursionist
94 1 8

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

zamanhasanov96
Excursionist
94 1 8

How ı reduce price and sale badge size?

DavidEKim
Shopify Partner
229 61 76

This is an 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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
zamanhasanov96
Excursionist
94 1 8

Thank You it is work perfectly

zamanhasanov96
Excursionist
94 1 8

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