Truncating product desciption for quick shop

Highlighted
New Member
4 0 0

Hello,

I would like to be able to truncate the product description when displayed on the Quick Shop pop-up but view full description on the dedicated product page.

Currently exploring snippet 'product-quick-shop', any assistance greatfully received.

Tamarind

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
283 0 46

Hi Tamarind!

The line of code that includes the item description will need a String Filter added to it so that there is a limit. Here is what we can change it to:

{{ itemType.description | truncate: 100 }}

This example restircts it to 100 characters. You can change the number as needed.

We can also use truncatewords instead to limit the desription with number of words in place of characters. More information on this here.

I hope that helps! Please let me know if you have any other questions about this.

Hugh

Happy selling! :)
0 Likes
New Member
4 0 0

Put it into the quickshop snippet and worked perfectly.  Going to tweek with truncatewords, but thank you so much for your help and speedy response.

Tamarind

0 Likes
Highlighted
New Member
3 0 0

Hi is there anyway, to add a clickable Read More, so costumers will be able to see the whole description? Thanks

0 Likes
Highlighted

Sure here is an example of a quickshop description and button to the full version:

<div class="rte product-details">
{{ product.description | truncate: 160 }}
<a class="button" href="{{ product.url | within: collection }}">Full Details</a>
</div>
0 Likes