This tutorial shows how to add 'See More' / 'See Less' toggles to product and collection descriptions on a Shopify store. The links toggle between two views of the decription, a shortened view limited by a number of characters and a full view.
Got Long Descriptions?
Here's a handy tool for when you have long product or collection descriptions. This solution will hide some of the description on page render and display a 'Show More >' link. Clicking the link will show the rest of the description and add a '< Show Less' link. You can see it in action on this Spanish language site.
The solution consist of the following:
- Adding HTML/Liquid code to the templates for products and collections.
- Adding a script that does the toggle action when the Show More or Show Less link is clicked.
HTML / Liquid
Here's an example of the liquid code to add to the product or collection template in place of the existing code. This example is for the product. For collection, just replace 'product.description' with 'collection.description'.
This code is checking the length of the description. If the description exceeds the threshold, two divs are created. One div contains the shortened description and the other div contains the full description.
In this example, the code is appending '. . . ' after the truncated text in the Less view. It is also adding a greater than ( > ) symbol to the right of the Show More text and a less that ( < ) to the left of the Show Less text as visual cues. In HTML, we show a greater than with the code '& # 6 2 ;' (without the spaces) and less than is '& # 6 0 ;'.
In the above HTML code, there are two numbers, 500 and 700, that are used as thresholds. The 700 is used to evalute the length of the description to see if the Show More/Less functionality will be used. The 500 is used to determine the lenth of the Less description that is shown. I set these two numbers at different levels for this scenario. Imagine both numbers were set at 500 and the length of the description is 501 characters. The description would be truncated to 500 characters. And the Show More link would expand the description by the one remaining character, which looks pretty silly IMHO. Setting the first threshold (which determines if Show More/Less should be used) a bit higher than the second threshold (which determines how many characters are shown in Less mode) prevents Show More revealling only a few more characters. You can play with these numbers on your site and see how it affects behavior.
And with that, you will have the working Show More/Less functionality on your site.
More You Can Do
Now that you have it up and running, here's some other things you can do to take this new functionality to the next level:
- Add transition effects that change the speed and the animation of the toggling of content.
- Change the Show More/Less text links to buttons.
- Have different thresholds for mobile and desktop.
- Change this from counting characters to counting words so that description doesn't get truncated mid-word in Less mode.
- Change the > and < visual queues to another visual queue.
At ProductGraph, we provide full service consulting to eCommerce stores. We specialize in Shopify and can do just about anything for your Shopify store. We are a certified Shopify Expert.