If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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:

shopify_manage_product_title_length_1

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:

    shopify_manage_product_title_length_2

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

    shopify_manage_product_title_length_3

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

    shopify_manage_product_title_length_4

  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:

shopify_manage_product_title_length_5

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

We can see the product title is displayed fully now:

shopify_manage_product_title_length_6

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