Custom Font Size in Collection Links: Text

Store Design
1

Hey all,

I am on Horizon & currently editing my collection links: text section, and I am wondering how I can change the font size of the collection. I tried going into my theme setting typography section but that does not work. Please let me know if you have any ideas. Thank you :slight_smile: !

4

@sof000

First, don’t listen to someone whose profile is 2 days old, if they are not directly helping and are just giving generic answers. This one didn’t even ask for the required information. This is a public forum. DO NOT go into private chat with these people. That’s how vulnerable newcomers get scammed into trusting and providing collaborator code.

Second, don’t paste code like that, the forum will eat it and will be useless. Instead, in the box above your text where you see bold, italic, there is a plus sign, open that and select “pre-formatted text”, then paste your code inside.

As for your original question, it sounds like you want to adjust the font size of the menu items? Or maybe I misunderstood. Can you be more specific? Don’t edit your theme code for this. There is a place for custom css. In theme editor, click on the header section and go to its settings. Scroll down, you will see “Custom CSS”. Try this code:

.navtext {
  font-size: 20px !important;
}

If you’re talking about the title of Collections List, click on the section, scroll down to “custom css” and try this code:

.kicker-flourished {
  font-size: 30px !important;
}

For the Collection Title on the Collection page, click on the title section, scroll down to “custom css” and try this code:

.collection__heading__text {
  font-size: 50px !important;
}

Or you could do this yourself with a bit of knowledge. Refer to my previous post here: Shopify Tinker Theme - make collection list images round - #3 by Maximus3

5

Hi @sof000,

Go to Online Store → Theme → Edit code.
Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection-card__content.layout-panel-flex--column p {
    font-size: 30px !important;
}

image
image1016Ă—734 126 KB

Thanks!

6

Hi,

Hope this will help

  • Horizon’s collection links ignore global typography settings
  • Font size must be changed via CSS
  • Add a custom CSS rule targeting .collection-links

CSS example

.collection-links a {
  font-size: 20px;
}

Adjust 20px to whatever size you want.

If it doesn’t apply right away, Horizon sometimes uses more specific selectors. In that case, try:

.collection-links__item a {
  font-size: 20px;
}
7

This is really useful! Being able to customize font size in collection links makes it much easier to match the design and improve readability. Excited to try it out in my projects.

8

Hi @sof000 , Please do not use custom css in the editor, horizon is highly customisable just use the custom preset by selecting “Collection Title”… check latest horizon’s documentation and patch notes, you can easily customize each block without editing the code :slight_smile:

image
image951Ă—593 63.6 KB