Categories

Featured templates

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

Charlotte Bennett September 1, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

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.


Custom Shopify Themes
This entry was posted in Shopify Tutorials and tagged number of characters, Shopify, title. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket