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 description, 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 descriptions 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 {{ product.description }} 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 than ( < ) 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 ;'.
Thresholds
In the above HTML code, there are two numbers, 500 and 700, that are used as thresholds. The 700 is used to evaluate the length of the description to see if the Show More/Less functionality will be used. The 500 is used to determine the length 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 revealing only a few more characters. You can play with these numbers on your site and see how it affects behavior.
JavaScript
Here's the JavaScript that is watching for the links to be clicked and taking action when they are. You can add these to an existing JS file in the theme, create a new JS file or add it onto the liquid template for the products and collections. In the syntax below, this is added to the product.liquid and collection.liquid templates.The JavaScript is toggling the Display value for the two divs we created with the two different lengths of descriptions. It is toggling between 'block' and 'none' which effectively 'shows' and 'hides' the divs.
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 are 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.