How to make collection header smaller

Store Design
, , , ,

Topic summary

Issue: Reduce the collection list header font size to 26px on desktop and 22px on mobile.

Context and attempts:

  • Helpers asked for the store URL and password to inspect, but the site isn’t live. The preview link reportedly redirects to the live site. Off‑platform contact was mentioned.
  • A CSS solution was proposed: target the collection header class (e.g., .collection-header) and apply font sizes with a mobile media query. Guidance included using browser Inspect to find the exact selector and placing CSS in Custom CSS or theme assets.

Results:

  • The suggested CSS did not change anything for the requester. They asked for further help.
  • Another helper advised adding code above the tag in theme.liquid, but the provided code block was empty.

Current status:

  • No confirmed fix. Likely needs the correct selector for the theme or direct store/preview access to diagnose. Discussion remains open pending proper access or a working selector-specific CSS update.
Summarized with AI on December 13. AI used: gpt-5.
1

how do i change my header size for collection list. now its too big i want it to be 26px on desktop and 22px on mobile

2 Likes
2

Hello,

Please share “Store URL”

Thanks!

3

Hey @xavierluca

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hey @xavierluca ,

To adjust the header size for your collection list, you can do this through your theme’s CSS file. Here’s how you can achieve the desired font sizes:

  1. Locate the Header Element:

Identify the class or ID of the header for your collection list. You can use your browser’s developer tools (right-click the header, then select “Inspect”) to find it. It might look something like .collection-header.

  1. Add or Modify the CSS:

Once you’ve identified the class or ID, update your CSS. Open the theme’s CSS file or a custom CSS section (if your theme supports it), and add the following styles:

/* Adjust header size for desktop */
.collection-header {
  font-size: 26px; /* Set font size for desktop */
}

/* Adjust header size for mobile */
@media (max-width: 768px) {
  .collection-header {
    font-size: 22px; /* Set font size for mobile */
  }
}
  1. Apply the Changes:

  • If your theme has a custom CSS editor (in Shopify: Online Store > Themes > Customize > Theme Settings > Custom CSS), paste the code there.

  • Alternatively, add the code to the appropriate CSS file in your theme. Typically, it’s in assests/theme.css or assets/sstyle.css.

Let me know if you need help identifying the header class or further instructions!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

5

hey, its not live yet how can i share the url of the new site im working on?

if i send you the url ofthe preview version you will end up on the live website…

6

i texted you on whatsapp

7

hey thanks but it did not change anything for me…

i added this code to the custom css and did not change

8

yes please help me

1 Like
9

Hey @xavierluca

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed