Shopify themes, liquid, logos, and UX
From the feature collection section of the homepage, how do I...
1. make the product name bigger,
2. center the product name, price, star ratings
3. make the font size of the crossed-off part of the price the same as the other price?
I'm using the Dawn theme. My website is https://forsetiwatches.com/
This is what it looks like now:
and this is what I want it to look like.
Thank you so much for your help.
Solved! Go to the solution
This is an accepted solution.
Hi @valkyriebg
1. Go to Online Store --> Theme --> Customize
2. Go to the featured collection and scroll to the custom css section and add the following code
.loox-rating{
display:flex;
justify-content:center;
}
.card__heading{
font-size: 2rem;
}
.card__heading, .price{
text-align:center;
}
.price--on-sale .price-item--regular{
font-size:1.6rem;
}
To make this edit across all featured collections do the following:
*Remember to always make a duplicate of your live theme when making code changes that way you have something to fall back on.
1. Go to Online Store --> Theme --> edit code
2. find the base.css file & paste the following code at the bottom
.loox-rating{
display:flex;
justify-content:center;
}
.card__heading{
font-size: 2rem;
}
.card__heading, .price{
text-align:center;
}
.price--on-sale .price-item--regular{
font-size:1.6rem;
}
This is an accepted solution.
Hi @valkyriebg
1. Go to Online Store --> Theme --> Customize
2. Go to the featured collection and scroll to the custom css section and add the following code
.loox-rating{
display:flex;
justify-content:center;
}
.card__heading{
font-size: 2rem;
}
.card__heading, .price{
text-align:center;
}
.price--on-sale .price-item--regular{
font-size:1.6rem;
}
To make this edit across all featured collections do the following:
*Remember to always make a duplicate of your live theme when making code changes that way you have something to fall back on.
1. Go to Online Store --> Theme --> edit code
2. find the base.css file & paste the following code at the bottom
.loox-rating{
display:flex;
justify-content:center;
}
.card__heading{
font-size: 2rem;
}
.card__heading, .price{
text-align:center;
}
.price--on-sale .price-item--regular{
font-size:1.6rem;
}
Hello @valkyriebg
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
ul#Slider-template--23069937860901__featured_collection_znctWE .card__content .card__information {
margin: 0 auto;
}
ul#Slider-template--23069937860901__featured_collection_znctWE .full-unstyled-link{
font-size: 20px !important;
}
ul#Slider-template--23069937860901__featured_collection_znctWE .loox-rating, .price.price--on-sale {
text-align: center !important;
}
ul#Slider-template--23069937860901__featured_collection_znctWE s.price-item.price-item--regular {
font-size: 1.6rem !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
HI @valkyriebg
Please add this code to Custom CSS of that section
.card__heading,
.card-information { text-align: center; font-size: 18px; }
.price--on-sale .price-item--regular,
.price { font-size: 18px; font-weight: 600; }
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024