How can I add line breaks in product titles on Debut theme?

Store Design

Topic summary

Goal: Enable manual line breaks in product titles on Shopify’s Debut theme and in Buy Button embeds.

What was tried:

  • HTML
    in titles didn’t render.
  • Liquid replace filter attempted in theme files, e.g., {{ product.title | replace:‘-’,‘
    ’ }} and variants (commas/spaces). Suggestions included editing product-card-list.liquid and replacing spaces with a break/newline.
  • Edits tested in product-template.liquid, product.liquid, and product-card-list.liquid by targeting product.title.

Results:

  • Line breaks were achieved on the main Shopify store (theme rendering) after modifying theme code.
  • The same approach failed for the Buy Button (Sales Channel) when embedding a collection on an external website. A URL was requested privately for review.

Related requests:

  • Others asked where exactly to place code to reproduce the result.
  • Another user sought a line break between title and price; adding
    in theme CSS or product-price.liquid didn’t work.

Status:

  • No confirmed, general solution posted—especially for Buy Button embeds.
  • Key open question: how to render line breaks for product titles in the Buy Button output and the precise file/placement for reliable theme-side changes.
Summarized with AI on February 1. AI used: gpt-5.
1

Hi there,

I’ve read what I can find regarding this topic in the forum to no avail.

I just created a free-trial Shopify account, using the default theme called “Debut”. I created a collection of 4 products, and am using a “buy button” to display the group of products on a separate, company web page as a proof-of-concept.

All I want to do is have the ability to add line breaks into the product titles so they all display in a consistent way. Using
doesn’t work.

Gleaned from other suggestions, I also tried adding:

{{ product.title | replace:‘-’,‘
’ }}

into the appropriate source files as a workaround (by forcing the “-” to read as
) but I can’t seem to get that to work either.

Any suggestions would be greatly appreciated.

Thank you.

2

are all your product title connected with ‘-’, like Super-Cool-Cellphone?

If they are like Super Cool Cellphone, you can probably use

{{ product.title | replace:' ','
' }}
3

Thank you for your reply,

I don’t have any hyphens in my product titles. I’m trying to get the titles to line break in 2 places, so each title would be three lines.

Your suggestion is very similar to one I already tried, where it would convert hyphens into
: {{ product.title | replace:‘-’,‘
’ }}

Similarly, it could be adapted to convert commas into
: {{ product.title | replace:‘,’,‘
’ }}

I attempted it but couldn’t get it to work. I tried placing it in the “product-template.liquid” and the “product.liquid” files. I’m assuming I may not be placing it in the correct file, or in the correct way, etc…

Are there directions on exactly where to place the code, and in which file(s) in the ‘Debut’ theme?

4

you should look for something in product-card-list.liquid

{{ product.title }}
5

I found two instances of “product.title” in product-card-list.liquid:

{{ product.title }}

and

{{ product.title }}

I tried replacing each one separately, and both together, and it didn’t seem to make a difference…

6

As an update, I was able to get this to work for the product titles in my actual Shopify store.

However, when I use the “Buy Button” under “Sales Channels” to display a collection of products on a separate website, the line breaks do not work. Is there a way to make this work?

Thank you

7

do you have the url for the other website?

8

I DM’d you

9

Did you find a solution? Info on this is very hard to find.

1 Like
10

I want to add a line between my product title and price as well. Adding the
did not work for me. Maybe I am pasting it in the wrong place in the THEME.CSS in product-price.liquid.

11

Hi @dvgulik ,

Please could you let me know how you achieved this on your store?

I am trying to do the same thing, but i’m not sure which bit of code to use and where to place it, so any advice or instructions would be greatly appreciated.

12

Hi @D8NMT,

Unfortunately, I never was able to find an adequate solution to the line-break issue. My client decided to go in another direction with their shop so I abandoned that quest.

Definitely an odd one. It should be so simple, yet frustratingly difficult to achieve.

1 Like