Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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.
This is an accepted solution.
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 Hello how are you doing ?
You are using free theme
Can i share you idea on how you can??
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.
Thank you for help but ı want following image design
This is an accepted solution.
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.
it is work. But not mobile recponciple
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.
It is work but not perfect. Please review my other store eycuf.com ıt is showing perfect and big. How this possible?
This is an accepted solution.
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.
Thank You it is work perfectly
No need extra code. Only remove usd text and problem resolved
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?
How ı reduce price and sale badge size?
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;
}
}
Thnak you for help. But it is not work
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024