Changing font size of the Product Title - Spotlight

katelee · ‎05-17-2024

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.

ThePrimeWeb · ‎05-29-2024

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.

<style>
.card__heading a {
    font-size: 15px !important;
}

@media only screen and (max-width: 989px) {
    .card__heading a {
        font-size: 14px !important;
    }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

conversionist · ‎05-17-2024

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

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://
conversionist.online/
Buy me a coffee

ThePrimeWeb · ‎05-17-2024

Hey @katelee,

Can you share the link to your store please? Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

katelee · ‎05-28-2024

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!

ThePrimeWeb · ‎05-28-2024

Hey @katelee,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Increase or decrease the value 24px to your liking!

<style>
product-info .product__title * {
    font-size: 24px !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

katelee · ‎05-29-2024

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.

<div class="card__content">
	<div class="card__information">
	<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!
	</a>
	</h3>
	<div class="card-information"><span class="caption-large light"></span>

ThePrimeWeb · ‎05-29-2024

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.

<style>
.card__heading a {
    font-size: 15px !important;
}

@media only screen and (max-width: 989px) {
    .card__heading a {
        font-size: 14px !important;
    }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

katelee · ‎06-03-2024

It worked finally. Thank you so much!

Mudkins · ‎01-02-2025

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

Changing font size of the Product Title - Spotlight