How to make the title the same size in main page and collections

Store Design
, , , , ,

Topic summary

Goal: Make product titles display uniformly across the Spotlight theme (home page, collection pages, grids/containers), with long names truncated using ellipsis so all cards look standardized.

  • Early assumption: Differences were due to HTML header levels (H1–H4) determining default text sizes.
  • Clarification: The request is not about font size; it’s about consistent visible name length and automatic “…” truncation on both home and collection pages (illustrated in attached images, which are central to understanding the desired outcome).

Actions taken:

  • Helper requested the store URL; the user provided it (password not provided/mentioned).
  • Suggested fix: Add CSS in base.css targeting .card__information h3 with font-size: 1.7rem and line-break: auto; expected to affect collection sliders.

Outcome:

  • User reported the CSS change had no effect; nothing changed, and the truncation behavior remains unresolved.

Status: Unresolved. A theme-specific solution for consistent title truncation (ellipsis) across components/templates is still needed.

Summarized with AI on January 20. AI used: gpt-5.
1

Hello, I use the spotlight theme. I need help please. How do I make the titles on main page and collections pages, and grids and contairs to look padronize just like in the picture. In the picure I show how it looks now wich is the whrong way, and how I whant the produc titles to show (the correct way). I whant them to be padronize, the same size in main page, containers, collection lists, collection pages, etc.

title sizes.jpg
title sizes.jpg1805Ă—1178 223 KB

1 Like
2

Hi @Caleb10

The text sizes are different in all pages. it depends on what Header they using. H1, H2, H3, H4. The titles, sub titles, paragraph have different sizes.

Do you like to have same sizes on all text in your store?

3

\Hello, thank you for replying, I didnt explain well, what I whant is that the title of the product stays the same size in the main page and collections page like you can see in the first image, it has the title and if is too long it ads “…” and cuts it, so all the titles are padronized. Is not the font size, is the name size that shows at the main page and collections page

title sizes.jpg
title sizes.jpg1805Ă—1178 249 KB

1 Like
4

Thank you for the clarification. Would you mind to share your store URL website, with password if its protected? Thanks!

5

Hello Ribe_Dagandara , sure, the ur is lindelena.com , thank you, i’ll whait your answer

1 Like
6

Sorry for late reply. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card__information h3 {
    font-size: 1.7rem;
    line-break: auto;
}
  • This must work on all collection slider.
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Hi friend, thank you for your help, I pasted in base.css but it didn’t work, nothing changed