Shopify themes, liquid, logos, and UX
Hey community.
I'm using the focal theme. I want to have the sale bar where it says "DU SPARST 30%" to appear bigger. Can anyone help?
I uploaded some pictures for reference. If possible exactly the size of the reference picture.
Also, I want the text to be lowercase except the first letter.
Thanks!
https://leyah.de/products/5-in-1-airstyler
my website:
how I want it to be:
Solved! Go to the solution
This is an accepted solution.
If you want to capitalize only the 1st letter, you can replace the code snippet above with this
.product-meta__price-list-container span.label.label--highlight {
/* Change the font-size to your preference */
font-size: 12px;
text-transform: lowercase; /* Make all text lowercase */
}
.product-meta__price-list-container span.label.label--highlight::first-letter {
text-transform: uppercase; /* Capitalize the first letter */
}
Here is the result
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hi @LeyDE,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the theme.css (or base.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
.product-meta__price-list-container span.label.label--highlight {
/* You can adjust this value according to your preference */
font-size: 16px;
text-transform: capitalize;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hey,
this worked great! But is it possible to capitalize only the first letter?
Cheers
This is an accepted solution.
If you want to capitalize only the 1st letter, you can replace the code snippet above with this
.product-meta__price-list-container span.label.label--highlight {
/* Change the font-size to your preference */
font-size: 12px;
text-transform: lowercase; /* Make all text lowercase */
}
.product-meta__price-list-container span.label.label--highlight::first-letter {
text-transform: uppercase; /* Capitalize the first letter */
}
Here is the result
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This worked fine, thanks!
You're welcome!
And if you're looking to add custom free gift functionality to your store, you should definitely check out our app, Salepify! It's designed to enhance your sales strategy with features like tiered discounts, cart rewards, and seamless integration with Shopify! 🎁🚀
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025