Collection description - truncate with option to 'show more'

Solved
Highlighted
Excursionist
21 2 3

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.

0 Likes
Highlighted
Shopify Partner
1433 194 484

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:

https://codepen.io/ninthony/pen/ZEQVvLd

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
21 2 3

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.

 

0 Likes
Highlighted
Excursionist
21 2 3

Does anyone have any ideas on how to implement this? @Ninthony thanks so much for providing the coding

0 Likes
Highlighted
Shopify Partner
1433 194 484

This is an accepted solution.

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:

 

<div class="truncate-container">
<div id="truncated-product-description">
  {{ product.description | truncate: 40 }} <span id="read-more" class="read-additional">Read more</span>
</div>
<div id="product-description">
    {{ product.description }} <span id="read-less" class="read-additional">Read less</span>
</div>
</div>

 

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. 

<style>
.truncate-container {
  width:300px;
}
.read-additional {
  color: blue;
  text-decoration: underline;
}
.read-additional:hover {
  cursor: pointer;
}
#product-description {
  display: none;
}
</style>
<div class="truncate-container">
<div id="truncated-product-description">
  Here is your truncated description, it'll go on for.... <span id="read-more" class="read-additional">Read more</span></div>
<div id="product-description">
    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. <span id="read-less" class="read-additional">Read less</span></div>
</div>
<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-product-description');
let full_description = document.getElementById('product-description');

read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)

function showHideDescription(){
  let ID = this.id
  if(ID === "read-more"){
    truncated_description.style.display = "none";
    full_description.style.display = "block";
  }else {
    truncated_description.style.display = "block";
    full_description.style.display = "none";    
  }
}
</script>

 

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.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Shopify Partner
1433 194 484

Probably should have posted the actual code with the product.description instead of my codepen example -_-


<style>
.truncate-container {
  width:300px;
}
.read-additional {
  color: blue;
  text-decoration: underline;
}
.read-additional:hover {
  cursor: pointer;
}
#product-description {
  display: none;
}
</style>
<div class="truncate-container">
<div id="truncated-product-description">
  {{ product.description | truncate: 40 }} <span id="read-more" class="read-additional">Read more</span>
</div>
<div id="product-description">
    {{ product.description }} <span id="read-less" class="read-additional">Read less</span>
</div>
</div>
<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-product-description');
let full_description = document.getElementById('product-description');

read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)

function showHideDescription(){
  let ID = this.id
  if(ID === "read-more"){
    truncated_description.style.display = "none";
    full_description.style.display = "block";
  }else {
    truncated_description.style.display = "block";
    full_description.style.display = "none";    
  }
}
</script>

 

Thank you for accepting the post as a solution.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes