Collection description - truncate with option to 'show more'

Store Design
5

It’s not a problem. It’s really going to depend on your theme where you put the code. Generally it’s product.liquid in your templates folder. That file often leads to another file, called product-template.liquid in your sections folder. It may be called something else though, I really have no idea. Are you using a free theme?

If you have a product-template.liquid - open it and ctrl+f for “product.description”. You should see something like:

{{ product.description }}

You’re going to want to take that and wrap it like I had in my code:


  {{ product.description | truncate: 40 }} Read more

    {{ product.description }} Read less

You have a css file and a javascript file that are linked to your site. What they are, I don’t know. Typically the css file is called theme.scss.liquid in your assets folder, and the JS is either theme.js, custom.js (file for you to put your own custom js into), shop.js – not sure, it could be anything. An alternative option is to put style tags directly above it and script tags directly below it and just add them in right there, this will probably be the easiest path for you but isn’t really the “proper” way to do it.


  Here is your truncated description, it'll go on for.... Read more

    Here is your truncated description, it'll go on for however long you want to. You can add as many words in here and there'll be no limit to the amount of characters you can use. Read less

If you’d like I can do it for you. Just send me a dm with your store url and I’ll request access, duplicate your theme, and make the change and make sure everything is working.

3 Likes