Change font size of Collection Links Text in Horizon Theme

Store Design

Topic summary

A user wants to reduce the font size of collection link text in the Shopify Horizon theme. They identified the relevant code in _collection-link.liquid using CSS custom properties (--font-size--4xl and --font-size--6xl) with a clamp() function for responsive sizing, but hesitated to modify it due to concerns about breaking responsive behavior across different screen sizes.

Proposed Solution:
Another user provided a CSS override to add to theme.liquid before the closing </body> tag:

span.text-block.custom-typography {
    font-size: 30px !important;
}

Status:
The solution was offered with a visual result screenshot, but no confirmation from the original poster about whether it resolved their issue. A third user noted the store currently has no designs, suggesting the implementation may still be in early stages.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to make the font size of the Collection links text on my Store page smaller:

Untitled2
Untitled21172×699 27.4 KB

This is the Horizon theme and I can’t find where I can change it under Sections/Collection links: Text or under Theme settings/Typography.

I think the code is in _collection-link.liquid and set in

.collection-links__link {

--min-font-size: var(--font-size--4xl);

--max-font-size: var(--font-size--6xl);



display: flex;

color: inherit;

text-decoration: none;

text-wrap: pretty;

font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

But I didn’t want to change it without knowing what I’m doing because I might mess things up on different sizes of screens.

1 Like
2

Hey @tncrdn

Share your store URL and Password if enabled.

Best,
Moeed

5

Hey @tncrdn

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 </ body> tag
<style>
span.text-block.custom-typography {
    font-size: 30px !important;
}
</style>

RESULT:

image
image1636×730 23.6 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
6

There’s literally nothing in the store, no designs yet

7

Hi @tncrdn,

I imagine you’ve already sorted this out. But if you’re not looking to update the actual theme file, or you die a little inside every time you see !important I might have an alternative solution.

Adjusting this element is a bit tough since the component doesn’t include a method for adjusting the text size built in. I was a little sad to see the text not have options to change things and the font-size being hard coded into the component. Ignoring the fact I will be customizing this thing myself, I started with simply adjusting things in the Custom CSS panel so my client can verify it’s what they want. As you’ll see, the three values for clamp are giving you a minimum, preferred, and maximum. Adjust as needed.

collection-links-component .collection-links__link {
  --min-font-size: var(--font-size--4xl);
  --max-font-size: var(--font-size--6xl);
  font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));
}

For example, I brought down all three to get what I needed. But perhaps you just want the max to not quite get so big. Or you want the preferred to be something totally different. I’ll leave that up to you.