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

Shopify. How to change the number of symbols in the product title in different sections

Sometimes your products’ titles are too long to be displayed fully. In this tutorial we will show you how to edit the number of symbols in the product titles in different sections on the site, including home page and widgets.

The number of symbols can be changed by editing a truncate value in a specific “.liquid” file. There is a separate file for each certain section. In order to locate the file, and enlarge the number of symbols in the product title, follow these steps:

  1. Login into your Shopify admin panel, and navigate to Online Store -> Themes section.

    Shopify_How_to_change_the_number_of_symbols_in_the_product_title_in_different_sections_1

  2. Click on the three dots icon at the top right corner and select Edit HTML/CSS option.

    Shopify_How_to_change_the_number_of_symbols_in_the_product_title_in_different_sections_2

  3. Type “product” to the search field, you will receive the names of all the files to edit.

    • product-listing-item.liquid file controls the appearance of products on listing pages, including both the home page (Featured products) and the collection pages main area.

      Note: some templates contain product-grid-item.liquid file instead.

    • widget-related-products.liquid – in this file you can correct the number of symbols in the titles of related products which appear on the product’s details page.

    • widget-sidebar-products.liquid – here the titles of products that appear in a sidebar can be edited (usually the Best sellers or Special products).

    Shopify_How_to_change_the_number_of_symbols_in_the_product_title_in_different_sections_3

  4. Open the necessary file (the one that corresponds to the area you want to change) and look up the “product_name” class. Locate the “truncate” value and and enlarge it. Save the file.

    Shopify_How_to_change_the_number_of_symbols_in_the_product_title_in_different_sections_4

  5. Check the changes on your website frontend after refreshing the cache.

We hope the tutorial was useful for you. Feel free to check the detailed video tutorial below:

Shopify. How to change the number of symbols in the product title in different sections

Also, don’t forget to review the collection of premium Shopify Themes.