Reducing Collection Title Size in Product Preview

Store Design
, , ,
1

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

Bildschirmfoto 2024-11-01 um 5.32.41 AM.png
Bildschirmfoto 2024-11-01 um 5.32.41 AM.png1290×640 233 KB

2

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

3

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

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

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

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

Thanks!

5

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