How to change collection banner title and description font size? Dawn 10.0.0

Store Design
, ,
1

Hi guys,

I need both of the collection page banner title and description font to be smaller. How should I change that? Below is a screenshot to show where it is. The ‘Gear’ and the context underneath is where I want to change the font size.

Screen Shot 2023-07-02 at 12.22.02.png
Screen Shot 2023-07-02 at 12.22.02.png3004×1514 407 KB

Tried to implement the solutions provided here, but couldn’t even find the ‘collection-hero’ related code in base.css.

https://community.shopify.com/c/shopify-design/dawn-2-0-change-collection-banner-font-size/td-p/1629550

Thanks in advance!

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hello @ZestardTech thanks for replying to my questions. Here is the preview of the store: https://87ep5ogl8iywb0ug-70438813992.shopifypreview.com

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.collection-hero__description.rte {
font-size: 16px;
}
.collection-hero__title {
font-size: 25px;
}

ZestardTech_0-1688446289350.png
ZestardTech_0-1688446289350.png1890×698 217 KB

2 Likes
5

Hi @ZestardTech really appreciate your solutions, however, only the title font size is working. No matter what size I set up for the description part, it doesn’t make any changes. I have attached a screenshot to show that the title font size changed when I changed the number, but the description font size remains the same despite changing the size.

Would you be able to know the reasons why?

Screen Shot 2023-07-04 at 15.48.07.png
Screen Shot 2023-07-04 at 15.48.07.png1970×350 118 KB

1 Like
6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.collection-hero__description.rte, .collection-hero__title {
 font-size: 10px!important;
}
7

Thanks, all good now :slightly_smiling_face:

1 Like
8

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.