How to change how the product title is displayed on collections? - Dawn

Store Design

Topic summary

A user wants to truncate long product titles on collection pages to display only one line (with ellipsis), similar to a reference site they provided.

Two solutions offered:

  1. GemPages Support Team suggests:

    • Navigate to Online Store > Theme > Edit code
    • Open the theme.liquid file
    • Paste custom markup code before the </head> tag

  2. PageFly-Victor recommends:

    • Go to Online Store > Theme > Edit code > Assets > base.css
    • Add CSS targeting .card__content .card__information .card__heading > a
    • Apply properties including -webkit-line-clamp: 2, text-overflow: ellipsis, and overflow: hidden to limit title display

Both solutions involve editing the Dawn theme code to control product title truncation on collection pages. The discussion remains open pending user feedback on which approach works.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi experts! I would like to get in to my collections that products with long names do not display/appear completely, just one line like the picture here below. Can it be fixed on Dawn theme?

Want to have like this site: ALL PRODUCTS – supvogue

ask.png
ask.png1090×409 449 KB

2

Hello @Kingstone ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1675659381476.png
GemPages_0-1675659381476.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

1 Like
3

Hi @Kingstone

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.card__content .card__information .card__heading > a {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly