Need different product title in collection page and product page - Dawn Theme

Store Design
, ,

Topic summary

A user wants to display different product titles on collection pages versus product pages in the Dawn theme.

Current situation:

  • The full product title appears on collection pages
  • User wants a shortened or modified version on collection pages while keeping the complete title on product pages

Proposed solutions:

  1. Metafields approach: Use product metafields to store an alternate title for collection pages, displaying the metafield value on collections and the actual product title on product pages.

  2. HTML/CSS method: Wrap part of the product title in <span> tags (e.g., <span>TENCELtm </span>Comfort skirt), then use custom CSS in base.css or another stylesheet to hide the span on collection pages:

.product-card-wrapper span { display: block; font-size: 11px; }

Both solutions require custom code modifications. The metafields approach offers more flexibility for managing different titles per product.

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

Hi all,

Hope you are doing well.

I need different title on the collection page and product page like below.

IndujaAIKY_0-1679112609683.png
IndujaAIKY_0-1679112609683.png371×397 31.8 KB

The above is displaying. but inside the product page i want like below.

IndujaAIKY_1-1679112689983.png
IndujaAIKY_1-1679112689983.png1222×409 96.6 KB

Thanks in advance.

2

Hello @IndujaAIKY
we can do this by using of metafields of product so if product’s metafield contains value that will show on collection page as title and on product page we will show actual product title so in this way we can show different titles for different pages for product.

3

Hi @IndujaAIKY

Follow this

  1. open product in admin and add your word inside that you want to show on top

ex title is : TENCELtm Comfort skirt

then add it like TENCELtm Comfort skirt

  1. then add this css in asset->base.css or any css file at bottom
.template-product .cd_span{display: block; font-size: 11px;}

NOTE: other way you can manage it by metafield. for that need custom code.

Best regard