Line break in product title - brookyln theme

[jakemattingley]

Hey There

Im trying to create line breaks for my product title.  

This is what it looks like now.  Ideally I would like it to read like this:

doodles tee

vintage black

$46

thank you. 

www.visionboredclothing.com

[Kani · Accepted solution]

Hi @jakemattingley 

you can break your title with this code. ( if they all connect via ' - '

    {% assign product_title_arr = product.title | split: " - " %}
    {% for product_title_item in product_title_arr %}
      {{ product_title_item }}
    {% endfor %}

[Kani · Accepted solution]

@jakemattingley 

1: Online store > themes > Actions > Edit code > Sections > product-template.liquid

2: find the class name 'product-single__title', if you have not edited code before then its in line 131

demo ( you can edit base on it

{% assign product_title_arr = product.title | split: " - " %}
{% for product_title_item in product_title_arr %}
     {% if forloop.index == 1 %}
           <h1 class="product-single__title" itemprop="name">
                {{ product_title_item }}
          </h1>
     {% else %}
           <p>{{ product_title_item }}</p>
     {% endif %}
{% endfor %}

[Kani · Accepted solution]

Hi @jakemattingley 

you can break your title with this code. ( if they all connect via ' - '

    {% assign product_title_arr = product.title | split: " - " %}
    {% for product_title_item in product_title_arr %}
      {{ product_title_item }}
    {% endfor %}

[jakemattingley]

Perfect I will try this. Can you tell me where exactly to insert this code?

Thank you

[Kani · Accepted solution]

@jakemattingley 

1: Online store > themes > Actions > Edit code > Sections > product-template.liquid

2: find the class name 'product-single__title', if you have not edited code before then its in line 131

demo ( you can edit base on it

{% assign product_title_arr = product.title | split: " - " %}
{% for product_title_item in product_title_arr %}
     {% if forloop.index == 1 %}
           <h1 class="product-single__title" itemprop="name">
                {{ product_title_item }}
          </h1>
     {% else %}
           <p>{{ product_title_item }}</p>
     {% endif %}
{% endfor %}

[jakemattingley]

Hey!  This worked for my product pages, which is fantastic. 

But, its still displaying with " - " on collections pages.

any fix for that?

[Kani · Accepted solution]

code coming~~~~~🤣

1: Online store > themes > Actions > Edit code > Snippets > product-grid-item.liquid

{% assign grid_product_title_arr = product.title | split: " - " %}
{% for grid_product_title_item in grid_product_title_arr %}
     <span class="grid-product__title" style="display:block">
         {{ grid_product_title_item }}
     </span>
{% endfor %}