How to change the font size of the collection title in debut theme?

Solved
Tourist
22 0 0

On my home page, I have a part where I have a collection listed out. The title of the collection is nowhere as big as it should be. Same with the hyperlinks on the header. Any ideas on how to change that?

 

My heading base size is already set at 28px in the Typography settings. Changing it up will also up the font size of my product title. I want my collection title's font to be bigger and than the product title's, rather than upping or lowering the size of both.

 

Thanks!

0 Likes
Trailblazer
335 75 68

Hi, @MichaelChuwee ,

 

This is Evita from On The Map.

 

Can you send your store URL? You will need to add little bit fo code for titles.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
22 0 0

Sorry about that, site is http://www.gogowidget.co

 

As you can see on the best sellers, I'd like it to be bigger without making the product title bigger. Same with the links on the menu without making the other links bigger as well.

0 Likes
Trailblazer
335 75 68

So you want to make these texts bigger - https://prnt.sc/p90efw ?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
22 0 0

Yes, those two exactly. Just wondering what little coding I'd have to do to get it.

0 Likes

Success.

Trailblazer
335 75 68

Add this code to Assets/theme.scss.liquid: 

// This is for title
.section-header h2 { font-size: 35px; }
// This is for navigation .site-nav li { font-size: 25px; }

 You can adjust px as you want.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
22 0 0
Thank you very much! I'm currently on mobile but I'll definitely give that a go afterwards. Another question if it's not too much, on the VIEW ALL below the collection list, is there a way I can make the spacing between the products and the view all button tighter? And would it be possible to make the view all direct to another collection, such as all products?

Thanks again!
0 Likes
Tourist
22 0 0

It looks like it's working nicely. Except one thing: The "Shop Now" with the dropdown list is the only font that's excluded from the enlargement. Any ideas for fixing that?

0 Likes
Highlighted
Trailblazer
335 75 68

This code will do: 

.site-nav__dropdown ul li {
    font-size: 20px;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
22 0 0

Do I place it right under the other two codes? I've tried it like this.
 debut_code.PNG

 

My shop ended up looking like this:

https://csih4d1gdx5gb9ec-10717790244.shopifypreview.com

 

Sorry for my confusion, not really savvy with this but considering learning it.

0 Likes