Hi,
I am having trouble changing the font size of 2 cases in Spotlight theme :
- Enlarge the font size of the product title on the main page
- Reduce the font size of the product title on the product detail page
See attached image. Thanks for your help.
You can change the font sizes by adding some custom CSS. Here’s how:
- Go to Online Store > Themes > Actions > Edit Code.
- In the Assets folder, open your theme.scss.liquid or theme.css file.
- Add this code at the end:
/* Change font size of product title on main page (it can have a different class name) */
.main-page .product-title {
font-size: 24px; /* Adjust size as needed */
}
/* Reduce font size of product title on product detail page (it can have a different class name) */
.product-detail-page .product-title {
font-size: 16px; /* Adjust size as needed */
}
​
Adjust the font sizes to your preference save the changes and refresh your site to see the updates
Hey @katelee ,
Can you share the link to your store please? Thanks!
Sorry for my late response. Now I have activated my shopify site. Please check this URL and guide me on how I can adjust the font size of product title on the main page. Thanks!
Hey @katelee ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Increase or decrease the value 24px to your liking!
Screenshot is for reference only, the correct code to paste is the one shown above.
2 Likes
Thanks for sharing the tip. I tried applying it in the way you suggested, but it didn’t work. It seems like the issue is that the class defining the product title is not correct. Looking at the code on the main page, it seems like I need to modify the <h3 class=“card__heading h5” part. Do you have any ideas on how to adjust this part? I’m sharing a portion of the code below.
<h3 |
|
class=“card__heading h5” |
|
id=“title-template–16872137523350__featured_collection-8094554128534” |
|
> |
|
<a |
|
href=“/products/sunday-jam-premium-handmade-spread-strawberry-preserve-seasonal-200g-new” |
|
id=“CardLink-template–16872137523350__featured_collection-8094554128534” |
|
class=“full-unstyled-link” |
|
aria-labelledby=“CardLink-template–16872137523350__featured_collection-8094554128534 Badge-template–16872137523350__featured_collection-8094554128534” |
|
> |
|
Sunday Jam Premium Handmade Spread: Strawberry Preserve (Seasonal), 200g - New! |
|
Oh you mean homepage, The code I gave you was for the product page. I assumed that’s what you wanted. No need to touch the code you shared, just apply the code below using the same instructions I gave earlier.
For the homepage paste this code in. You can adjust the values as you like. There’s two values. The 15px one is for desktop and the 14px one is for mobile. The instructions to paste are the same as above.
1 Like
It worked finally. Thank you so much!
Hi there!
I am also trying to change font size for my titles within the product cards.
Where would I put this code? Can I paste it in the CSS theme editor, or would I need to go to code edit.
I hope its okay to note this, I really appreciate any input: Also I have tried to get help on here about why my custom font does not work for all browsers and devices. I have not had any replies. Would you happen to be familiar with this issue? I pasted a custom font code for headers only with in my base.css. It works some times on some devices and browsers, but there is no consistency or pattern it seems to when it will work. It will work on my apple phone, google or safari, but then only work on safari for my desktop and ipad, both apple.. kinda random. It wont work on android.. Idk. I’d appreciate any help, I have been trying to fix it for like 2 months now and can’t seem to get help at all through shoplify. Thank you!
illy
Hey, why did you remove the code? I used it a few days ago, but i messed something up and need the code, but know came back and saw, that you removed it, why?