break lines

Highlighted
Excursionist
43 0 13

Hello,

There are a few instances across my shop where I want to split a line of text across two lines (instead of one).  For example, product names, collection names etc

Is there a character code or other way of doing this?  I have tried including "\n" or "<br />" but to no availl.

Any ideas please?

Thanks!

Rob.

0 Likes
Highlighted
Explorer
83 0 26

Hi Rob,

You can try splitting the title if you have a delimiter:

Current Product Title: Rob Roberts "Brown Leather Wallet"

{% assign newTitle = product.title | split:'"' %} <!-- Split the title by the quotes -->

{{ newTitle[0] }} => Rob Roberts
{{ newTitle[1] }} => Brown Leather Wallet

 

For more on splitting a string:

https://help.shopify.com/en/themes/liquid/filters/string-filters

0 Likes
Highlighted
Excursionist
43 0 13

Thanks so much!

I'm new to shopify, so could you help me out with where I put that snippet of code?  Would it be in the product-template.liquid file?

Thanks!

Rob.

0 Likes
Highlighted
Explorer
83 0 26

Hi Rob,

Happy to be of service! I'm unsure what theme you are using, they all contain different assets. Can you let me know which theme you are using so I can check into where this might need to be placed and what your titles look like that you're trying to break apart?

0 Likes
Highlighted
Excursionist
43 0 13

Thanks Nick!

I am using Brooklyn.

Thanks

0 Likes
Highlighted
Explorer
83 0 26

Hi Rob,

For collection titles you'll want to find and replace the code below inside collection-template.liquid located in sections. The part you'll want to replace is the {{ collection.title }} portion of that line and then you can do something like {{ newTitle[0] }} <br> {{ newTitle[1] }} to separate the strings into new lines.

Find: (should be on line 8 in an unedited theme)

<h1>{{ collection.title }}</h1>

 

For products you'll want to find the code below inside product-template.liquid also located in sections

Find: (should be on line 215 in an unedited theme)

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

 

If you want the product title change to reflect on the on the collection listing as well you'll want to locate product-grid-item.liquid

Find: (should be on line 79 in an unedited theme)

<span class="grid-product__title">{{ product.title }}</span>

 

I hope this helps!

 

0 Likes
Highlighted
Excursionist
43 0 13

Nick, thanks so much for this!  I have managed to get it working perfectly on the products themselves.

However, I am struggling with the titles of the collections.

On the "grid" of collections shown on the homepage, I want the collection titles split over two lines.

I have tried the same technique and cannot get it to work for these.

When splitting the collection name into an array, the entire name goes into position [0], rather than being split by the speech marks delimiter.

Any suggestions please?

 

I am editing the "collection-grid-item.liquid" file and my code is as follows:

{% assign newTitle = collection_title | split:'"' %}

{{ newTitle[0] }} <br /> {{ newTitle[1] }}

 

Thanks so much!

Rob.

0 Likes
Highlighted
New Member
2 0 1

How do I split a line in theVenture theme?

Can I change the size of the text or add a shadow?

0 Likes