Reducing Collection Title Size in Product Preview

[KimGottwald]

Hi everyone,

I’m looking to make the collection title smaller in the product preview section on my Shopify store. Is there a specific setting for this, or would I need to add some custom CSS?

Here’s my store preview link: https://www.rappid.run/collections/frontpage
Password: Password

Thanks in advance for your help!

Best,
Kim

 

[DaisyVo]

Hi @KimGottwald 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

main#MainContent:has(product-info) div.collection .collection__title .title {
   font-size: 18px !important;
}

Here is the result: https://prnt.sc/-N5iD4JRY0f5 

I hope this helps

Best

Daisy

[KimGottwald]

Thank you! Is it also possible to only change the font size on mobile?

[Dan-From-Ryviu]

Hi @KimGottwald 

You can do that by adding this code below into Custom CSS in Online Store > Themes > Customize > Theme settings 

html .collection__title.title-wrapper, 
html .collection__title--desktop-slider .title { font-size: 22px !important; }

[websensepro · Accepted solution]

Hi @KimGottwald ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

If my reply is helpful, kindly click like and mark it as an accepted solution.

<style>
html .collection__title.title-wrapper, html .collection__title--desktop-slider .title { 
    font-size: 20px !important; 
}
</style>

If you are happy with my help, you can help me buy a COFFEE

Thanks!