How to change product title size in a collection

Store Design

Topic summary

Issue: A user wants to reduce product title font size on collection pages while keeping the shop header large in the Debut theme. The Typography settings link both elements together, making independent sizing difficult.

Solution Provided: Add custom CSS to the theme.scss file (located in Online store → Theme → Edit code → Assets):

#shopify-section-collection .product-card__title,
.collection-template .product-card__title {
  font-size: 16px !important;
}

This successfully resolved the original poster’s issue.

Related Questions:

  • One user asked about adjusting page title positioning relative to navigation header
  • Another requested help changing product title size but couldn’t locate theme.scss in their theme
  • Multiple users noted that theme.scss doesn’t exist in newer themes (like Craft 12.0.0), making the solution inapplicable

Status: The original issue is resolved, but the solution only works for themes containing the theme.scss file. Users with newer Shopify themes require alternative approaches, which remain unaddressed.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I would like to change the products title size to a smaller size on the collection page (not on the product page).

It seems as though their size is connected to the header of the shop, and every time I change the size there then it changes the size of the product header (Typography, Heading base size). I would like the shop header to be big and the products’ titles to be smaller. I am using the debut theme.

I tried different solutions and coding I found here, but they do not work. I tried these ones:

https://community.shopify.com/c/Technical-Q-A/How-to-change-the-size-of-the-product-titles-font-displayed/m-p/584304#M12400

https://community.shopify.com/c/Shopify-Design/How-to-change-product-title-font-size-and-page-title-logo-font/m-p/888582#M223766

I already have this:

/* make product page product name heading a bit smaller */
.template-product h1.product-single__title {
font-size: 1em;
}

but it only changes the size of the title of the product when clicking on it, and not in the collection.

(btw, I cannot find any theme.scss.liquid, only theme.css)

Please help :slightly_smiling_face:

Thanks

Rachel

2

Please provide your website url and if your website is password protected then also provide password

1 Like
3

Thank you for responding! should I send these details via Email? especially the password…

4

You can share here also. No any risk. if you are not comfortable, then you can email me on parambabla.soft@gmail.com

1 Like
5

ok then, my url is https://rachel-ouizemann.com/ and the password is euyeot.

Thank you,

Rachel

6

Please place this code at the end of Online store → theme → edit code → assets → theme.scss file

#shopify-section-collection .product-card__title, #shopify-section-collection-template  .product-card__title {
    font-size: 16px !important;
}
1 Like
7

worked like a charm! Thank you very much!

8

Hey @Hardik29418

I’m also trying to achieve the same solution but for the title of the page instead. If the title of the page can be smaller and further down slightly from the navigation header (it is too close to the navigation atm). Can you please help?

9

I tried to changed the title font size on my products (debut theme) and I can’t. Can somebody help me with this?

10

@LUK1

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

11

@RSS

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

12

Hi there,

I would like to change the product title size to smaller size, it’s too big. Also to be changed when in the product page, I do not want it to be as big as the title of the website.

Let me know if I can change it and if you can help

www.afterlifemode.com

Thanks so much in advance

Sandra

13

hi there :slightly_smiling_face:

do you know how i would do the same using the Craft 12.0.0 theme?

theme.scss is unavailable

thanks very much!

14

there is no such thing there. There is no theme.scss inside assets
what to talk about next?!
non-working material. I can’t solve this issue, it’s impossible to work