Trying to get line break in product description

Store Design
, ,

Topic summary

A user is attempting to add a line break between “size” and “Medium” in product descriptions, specifically for WORKS ON CANVAS and WORKS ON PAPER collection pages.

Initial Problem:

  • User tried adding <b/r> tag in HTML product description without success
  • Provided store URL (omniahebeidart.com, password: 1234) for troubleshooting

Solutions Proposed:

  • First suggestion: Use correct HTML tag <br /> instead of <b/r>
  • Second solution: Use Liquid code to split product description at “Medium” and insert line break programmatically

Current Status:

  • User initially placed code in wrong location (product HTML instead of theme files)
  • Helper clarified the code should be added to product card snippet file (likely “product-card.liquid”) in the collection page template, not the product detail page
  • Discussion remains ongoing as user works to locate correct snippet file in their Shopify theme

Key Technical Detail:
The solution involves finding and modifying the product card component that displays on collection listing pages, replacing the description output with custom Liquid code that splits text and adds formatting.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

omniahebeidart.com PW 1234

i am trying to get the line split between “size” and “medium” to specifically show up on the WORKS ON CANVAS and WORKS ON PAPER collections pages. i have tried adding <b/r> in the HTML product description - didnt fix my issue. Image attached for reference.

2

Hi @themaxwolf

You should try to add
tag between “size” and “medium”. Not <b/r> as your mention

3

Hello @themaxwolf Could you share store url? I will let you know the solution after check the url on myend

4

https://omniahebeidart.com/ PW 1234

5

@themaxwolf Could you add code like this? Please let me know if it’s not working on your-end.

{% assign parts = product.metafields.custom.specs | split: 'Medium:' %}

  {{ parts[0] }}

  Medium: {{ parts[1] }}
6

should I just add this at the bottom?

7

@themaxwolf you can add it instead of the product description.
So you can replace it like this:

{% assign parts = product.description | split: 'Medium' %}

{{ parts[0] }}

{% if parts.size > 1 %}
   Medium: {{ part[1] }}
{%%}

please find the card__description class and replace code like above.

Let me know if you need my help. I hope your working is well. Regards

8

@themaxwolf Could you approve the like and solved problem when it’s working?

9

Do I put that into the HTML code of the product?

This is what it gave me.

10

@themaxwolf No, I feel it’s product card snippet on the PLP(Product list page). You need to find the product card liquid code on your project. It’s PDP(Product detail page).

please remove code on the product.liquid.
Could you find the this part on your project? I feel it seems like “product-card.liquid” or “… card.liquid” of the snippet folder.

Or You can find this snippet(it means like component) on collection page.
And then replace it instead of red box. Could you share your code if you find the snippet file?

Jacob0908_0-1749137462211.png
Jacob0908_0-1749137462211.png981×970 263 KB