Show more/ Show less for long Product Description as well Collection Description.

August 5, 2024

Show more/ Show less for long Product Description as well Collection Description.

This blogs shows how to add ‘Show More’ / ‘Show 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.

when you have long product or collection descriptions. This solutions will hide the long description using Show less and using Show more you can see whole long descriptions.

Following two steps for adding this functionality.

1. Adding HTML/ liquid code to the templates for products and collections.

2. Adding java script for Show more and Show less action.

HTML/Liquid code

{% if product.description.size > 500 %}

{{ product.description | truncate: 400, “. . . ” }}<a class=”readmore” href=”#”>Show More ></a>

</div>

</div>

{% else %}

{% endif %}

In this code there are two divs one div is for short description and second is for long description.

If the size of description is greater than 500 then this code is executed.

In this code i set two values one is 500 and another one is 400 if the description is more than 400 means 401 or above the Show more functionality automatically call.

JAVA-SCRIPT

The JavaScript that anticipates and responds to clicks on the links is shown here. These can be added to a JS file in the theme, a new JS file, or the liquid template for the collections and products. This is added to the product.liquid and collection.liquid templates using the syntax below.

$(‘.readmore’).click(function (event) {

event.preventDefault();

var descriptionFull = document.querySelector(‘.product-description-full’);

descriptionFull.style.display = ‘block’;

var descriptionShort = document.querySelector(‘.product-description-short’);

descriptionShort.style.display = ‘none’;

});

$(‘.readless’).click(function (event) {

event.preventDefault();

var descriptionFull = document.querySelector(‘.product-description-full’);

descriptionFull.style.display = ‘none’;

var descriptionShort = document.querySelector(‘.product-description-short’);