How to change the number of characters in the product name for products in the Gallery View



Product thumb with the area of the product name highlightedProduct names can be up to 150 characters in length. However when displaying a list of products in Gallery View, there is not enough room to display all the characters. Only the first 50 to 70 characters (based on the theme design) are displayed. 

This article covers how to change the number of characters displayed in product listings.

Two changes need to be made:

  1. Changing the theme template to display more characters.
  2. Change the number of lines needed to display the product name.

Change the number of characters

First, you will need to know what theme you are using for your website. If you don’t know, go to Webshop Settings under the cog icon and look for Site template set

Next, go to Content > Website Template Files and click on the plus next to your theme name. Then select thumbs/product/template.html.

Select the template

The template will open up in an HTML editor. Have a look for this line of code:

<h3 itemprop="name"><a href="https://www.neto.com.au/article/designing-your-web-shop/maintenance-and-tweaking/how-to-change-the-number-of-characters-in-the-prod/" title=""></a></h3>

It will be around line 8 but the line number will be different depending on what theme you are using.

Change 50 in maxlength:'50' to another number. Then save the template.

Change the number of lines

After you have changed the template, you may notice that some of the longer product names will overlap the price below the name. To fix this you will need to adjust the number of lines that product name takes up. This change will affect all products in the Galley View.

Some shorter product names will have plenty of space between it and the price. You may want to have shorter product names only using one or two lines. If you do this, it will cause issues with the page layout on different sized screens. So the number of lines needs to be the same for each product, no matter what the length of the name.

To change the number of lines for the product name, go to Content > Website Template Files and click on the plus next to your theme name. Then select Assets/css/style.css.

Select the style.css file

In the editor, scroll to the very end and add the following code:

.thumbnail .caption h3 {
  height: 4em;
}

Change the 4 in height: 4em; to the number of lines you want and save the change. You may need to experiment to find the number of lines that works for you.

To see the changes you will need to purge the cache on your website and refresh the page in your web browser. To purge the cache on your website, go to Optimisation & Caching under the cog icon and click on Purge Cache.

 


  • Last Modified: 18/11/2016