Change font size of collection banner on collection page

Technical Q&A

Topic summary

A user seeks to modify the font size of both the title and description in the collection banner on their collection page. They provided a screenshot for reference.

Solution Provided:

  • Add custom CSS code to the base.css file (accessed via Online Store → Themes → Actions → Edit Code)
  • The CSS targets .collection-hero__title and .collection-hero__description classes
  • Sets font size to 30px with !important flag

Status:
The original poster confirmed the solution worked for their setup.

Follow-up Issue:
Another user with the Enterprise theme reports that base.css doesn’t exist in their theme files and requests guidance on where to implement this change for their specific theme.

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

Hi community!

we are looking to change font size of collection banner on collection page (both of title and description). Please find a screenshot in the following :

Screenshot 2022-10-31 at 17.33.59.png
Screenshot 2022-10-31 at 17.33.59.png2212×1434 267 KB

shop url: monochromatism.shop

Thanks in advance!

Cheers,

monochromatism-team

2

At first glance, It appears to be a custom built theme and the font us stored as a variable.

3

Hi @monomgroup .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file base.css

h1.collection-hero__title {
   font-size: 30px !important;
}

.collection-hero__description.rte {
   font-size: 30px !important;
}

Hope this answer helps.

Best regards,

Richard | PageFly

2 Likes
4

Thanks! Yes, that helped!

5

Hello .

Theme is Enterprise and I need the same changes. file base.css is not there , can you please guide me on while file can this change be in my theme.

Thanks

Shradha Pasari