Shopify. How to manage the product title size

Hello! This video tutorial shows how to manage the product title length in Shopify templates.

Shopify. How to manage the product title size

Sometimes the product title is cut off on the product listing page due to the large number of symbols:

Let’s learn how to increase the title length so that the full product name is displayed.

The tutorial assumes you are already logged into your Shopify admin panel.

1. Navigate to Online Store ->Themes tab:

   

2. On the appeared screen click the “…” button at the top right and choose Edit HTML/CSS option:

   

3. Click on the Snippets folder on the left, then click the product-listing-item.liquid file to open it for editing:

   

4. Once the file is opened, locate the following line of code there:

	<a href="{{ product.url | within: collection }}">{{ product.title | truncate:30}}</a>

Change the truncate:30 to some higher value, e.g. truncate:100 so the code looks like the above one:

	<a href="{{ product.url | within: collection }}">{{ product.title | truncate:100}}</a>

Click “Save” button at the top right to apply the changes:

Open your store front-end and refresh the page to see the changes.

We can see the product title is displayed fully now:

This is the end of the tutorial, you have learnt how to manage the product title length in your Shopify template.

Feel free to check the detailed video tutorial below:

Shopify. How to manage the product title size