Hi
I am hoping someone can help. I am on the streamline theme and I am wanting to add a long description to my collection page. I want to be able to hide most of it with a ‘show more’ option so that the product images are above the fold.
I have tried a few suggestions from other posts and they haven’t worked. Does anyone have any suggestions? P.s my {{ collection.description }} is in my sections folder rather than template.
So a way to do this would be to put your truncated description in a container with a link to read more, and also have your complete product description in a separate container that is hidden by default. Then you can use CSS and javascript to reveal the full description and hide the truncated description on a click, as well as the reverse. Here’s a simple codepen showing how you might do it:
This is perfect and exactly what I was looking for.
Sorry newbie here. Do I just copy the HTML code that you linked too directly in the collections page HTML editor or do I actually need to edit the theme code?
Where would I put the CSS and javascript coding?
Thanks so much, really appreciate it.
Does anyone have any ideas on how to implement this? @Ninthony thanks so much for providing the coding
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.
Probably should have posted the actual code with the product.description instead of my codepen example -_-
{{ product.description | truncate: 40 }} Read more
{{ product.description }} Read less
Thank you for accepting the post as a solution.
Hi Nonthorny
Are you able to help out but for the collection description to function in the same way?
Hi Ninthony,
Do you have a solution for the show more / show less collection description using the Dawn theme?
Thanks in advance.
Hi Ninthony, may I ask - would this work on the Prestige theme? Many thanks
@Anderson10 my code example provided above should work on any theme, providing you’re adding it in the right place for the product description.
@Ninthony hi, thanks for getting back. It was actually for the collection description. Is it still the product-template.liquid where you add the code? Thanks
@Anderson10 my code is pretty generic. It should work wherever you put it. If you’re looking to edit the collection description, it’s similar to what I described above but depending on your theme now many things could have changed from when I posted that. So back then you typically would have a “collection.liquid” – which would then point to a “collection-template.liquid” section and that would probably be where you were looking to edit the collection description. If you’re using a Shopify 2.0 theme which is the standard now, most template files have been updated to .json files. For instance, here’s Dawn’s collection JSON:
{
"sections": {
"banner": {
"type": "main-collection-banner",
"settings": {
"show_collection_description": true,
"show_collection_image": false,
"color_scheme": "scheme-1"
}
},
"product-grid": {
"type": "main-collection-product-grid",
"settings": {
"products_per_page": 16,
"columns_desktop": 4,
"image_ratio": "adapt",
"show_secondary_image": false,
"show_vendor": false,
"show_rating": false,
"enable_filtering": true,
"enable_sorting": true,
"columns_mobile": "2",
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"banner",
"product-grid"
]
}
So in the “sections” hierarchy you can see that there is a “banner” and a “product-grid” being referenced in the “order” – that shows where those items will appear. And in the “banner” object you can see that there’s a “type” reference that’s pointing to “main-collection-banner” and you can also see that it’s got a setting in there that says “show_collection_description” – so undoubtedly the collection description would be located there. It’s really dependent upon theme
Ok, seems a bit more complicated than originally thought! I use Prestige theme (2.0). Will have to have a good look though and see if I can locate those sections you have noted. Thanks
@Anderson10 it’s only really complicated here because Shopify’s code editor has no search functionality. If they did I could simply tell you to search for “collection.description” and you’d be able to pinpoint it. If you download Visual Studio Code, you can export your theme from Shopify and it’ll get emailed to you. Unzip it and place that folder on your desktop, then open that folder in VS Code. There’s a search functionality right in there in the sidebar that you can just type and it’ll show you all the files where collection.description would turn up:
That’s really good to know. Always wondered why you couldn’t perform a search. Just to get it right, I need to locate the collection.description then wrap it in the following:-
Then, add the following code to my theme.scss.liquid file…
.truncate-container { width:300px; } .read-additional { color: blue; text-decoration: underline; } .read-additional:hover { cursor: pointer; } #product-description { display: none; }Thanks again for your time on this.
Hey! This worked a treat thank you! I just have one question - when the text is less than 40 can the read more / read less be hidden? Thank sos much again.
