Is there a way to 'prettify' product titles

Hi,

I am looking to improve the look of my store and hoped to find some way to improve the way the titles break across lines.

e.g. I have a product “Pot Toppers - Cool Glacier”

This appears as

Pot Toppers - Cool

Glacier

in my shop

Ideally, I’d like it to say

Pot Toppers

Cool Glacier

I can manage this with HTML
, however this transfers through to the receipts etc. and obviously I would like to avoid that if possible.

I’m sure that this has annoyed other users. I’d appreciate any feedback you care to give.

Thanks

1 Like

Hi TorwoodGC,
I am Sandeep and I am trying to help you.
I read your issue; I have a suggestion that may help you.

If you each product title contin “-” then it is Easy to do that.

use below code in your product.liquid section and replace with product.title code.

{% assign productTitle = product.title | split : “-” %}

{{ productTitle | first }}
{{ productTitle | first }}

Thanks & Regards
Sandeep

1 Like

Hi @TorwoodGC ,

You can edit the way your product title shows in your website by following the instructions below.

To edit the product title in the product page, you have to use the custom liquid block. If you are using Shopify FREE themes, you should have this option when you go to your theme editor.

  1. From you Admin store, go to Online store > Themes > Click Customize

  2. Go to the product page, and add a block, name “custom block” under the Product Information. See image below

  1. In the custom liquid textarea, place the code below
{%- assign splitted_title =  product.title | split: "-" -%}
{%- for title in splitted_title -%}
{{ title }}{%- unless forloop.last -%}

{%- endunless -%}
{%- endfor -%

If you have the Shopify FREE themes, use the code below instead to keep the design


  {%- assign splitted_title =  product.title | split: "-" -%}
  # 
    {%- for title in splitted_title -%}
      {{ title }}{%- unless forloop.last -%}
{%- endunless -%}
    {%- endfor -%}
    
  
    ## 
      {{ product.title | escape }}
    
  

1 Like

Hi Sandeep,

I like the idea of your solution, however, I’m unsure where to put your code.

I’m using the Debut theme and I have opened products.liquid

I’ve included the text below. Would you be good enough to show me where I should place the code

Thanks

Kenny

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-template’ %}
{% include ‘cross-sell’ %}
{% section ‘product-recommendations’ %}

{% if collection %}

{% include 'icon-arrow-left' %} {{ 'products.product.back_to_collection' | t: title: collection.title }}
{% endif %}

{% assign current_variant = product.selected_or_first_available_variant %}

Hi,

Thanks for your input.

I tried to do as you suggest, however, I don’t seem to have the ability to add block as you show.

I’ve attached a screenshot of what I see.

I’m probably in the wrong place, can you point me in the right direction?

Thanks

Kenny

Hi @Sandeep81 ,

I like the idea of your solution, however, I’m unsure where to put your code.

I’m using the Debut theme and I have opened products.liquid

I’ve included the text below. Would you be good enough to show me where I should place the code

Thanks

Kenny

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-template’ %}
{% include ‘cross-sell’ %}
{% section ‘product-recommendations’ %}

{% if collection %}

{% include 'icon-arrow-left' %} {{ 'products.product.back_to_collection' | t: title: collection.title }}
{% endif %}

{% assign current_variant = product.selected_or_first_available_variant %}

Hi @made4Uo ,

Thanks for your input.

I tried to do as you suggest, however, I don’t seem to have the ability to add block as you show.

I’ve attached a screenshot of what I see.

I’m probably in the wrong place, can you point me in the right direction?

Thanks

Kenny