Re: How do I center text and make text bigger from the feature collection section of the homepage?

Solved

How do I center text and make text bigger from the feature collection section of the homepage?

valkyriebg
Tourist
9 0 2

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:

Screenshot 2024-10-02 at 7.18.02 PM.png

and this is what I want it to look like. 

 

Screenshot 2024-10-02 at 7.16.30 PM.png

 

Thank you so much for your help.

Accepted Solution (1)

polishedCode
Shopify Partner
24 9 10

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

 

 

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️

View solution in original post

Replies 3 (3)

polishedCode
Shopify Partner
24 9 10

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

 

 

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️

Tech_Coding
Shopify Partner
386 106 90

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>

Tech_Coding_0-1727919873077.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

Dan-From-Ryviu
Shopify Partner
10161 2019 2083

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

Screenshot 2024-10-03 at 09.28.24.png

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