A Shopify store owner is trying to display product titles with line breaks (using <br> tags) on the checkout/payment page for a candle business. They want candle names and scent notes on separate lines.
The core issue: Shopify automatically escapes HTML in product titles on checkout pages for security reasons, causing <br> tags to display as literal text instead of creating line breaks.
Solutions discussed:
checkout.liquid) is only available on Shopify Plus plans/ or - instead of <br>, with Liquid filters like {{ product.title | replace: '<br>', ' / ' }} to format the outputCurrent status: The original poster prefers the line break appearance on other pages and is seeking conditional formatting that would apply only to the checkout page. The discussion remains open with no definitive solution for non-Plus users.
I have a Shopify site for a candle business. I am using a page break in my product titles in order to include the candle name and scent notes on different lines. I’ve had to go through and remove the escape from all the code where the product title appears. I can’t seem to find the code that has the product title on the payment page. See screen shot attached so you can see where I’m talking about.
Any ideas how I can turn the
into an actual page break in this spot?
Hi, @gseanmaddox
Just to clarify — are you using Shopify Plus? That’s the only plan where you can directly customize the checkout page layout (including how product titles render). If not, Shopify will automatically escape HTML like
in the checkout, so unfortunately you can’t force a line break there.
Best,
Owen
Hey! @gseanmaddox ,
On Shopify’s checkout and payment pages, the {{ product.title }} output is automatically escaped for security reasons, so custom HTML like
tags won’t render and will just show as text. Shopify doesn’t allow editing the checkout’s core Liquid code unless you’re on Shopify Plus, which gives access to checkout.liquid. If you’re not on Plus, a workaround is to use metafields or custom properties instead of putting
in the product title, or handle the split with CSS or JavaScript where possible, but for the native checkout, it’s very limited.
How about using / or - instead of <br>
and use conditional formatting {{ product.title | replace: ‘
’, ’ / ’ }} or {{ product.title | replace: ‘
’, ’ - ’ }}
This way on checkout page the title becomes : Summer - Notes of Grape… or Summer / Notes of Grape…
I actually did something like that at first, but the line break looks much better on every page except the checkout page. Is there conditional formatting that would trigger only on the checkout page?