Collection description - truncate with option to 'show more'

Solved

Collection description - truncate with option to 'show more'

jessp2734
Excursionist
21 2 4

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.

Accepted Solution (1)
Ninthony
Shopify Partner
2332 350 1034

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 it and accept it as the 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 😄

View solution in original post

Replies 15 (15)

Ninthony
Shopify Partner
2332 350 1034

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 it and accept it as the 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 😄
jessp2734
Excursionist
21 2 4

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.

 

jessp2734
Excursionist
21 2 4

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

Ninthony
Shopify Partner
2332 350 1034

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 it and accept it as the 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 😄
Ninthony
Shopify Partner
2332 350 1034

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 it and accept it as the 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 😄
Ara-s
Tourist
5 0 1

Hi Nonthorny 

 

Are you able to help out but for the collection description to function in the same way?

Steve791
Visitor
3 0 0

Hi Ninthony,

 

Do you have a solution for the show more / show less collection description using the Dawn theme?

 

Thanks in advance.

 

 

Anderson10
Excursionist
29 0 8

Hi Ninthony, may I ask - would this work on the Prestige theme? Many thanks 

Ninthony
Shopify Partner
2332 350 1034

@Anderson10 my code example provided above should work on any theme, providing you're adding it in the right place for the product description.

If my solution helped you, please like it and accept it as the 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 😄
Anderson10
Excursionist
29 0 8

@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

Ninthony
Shopify Partner
2332 350 1034

@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

If my solution helped you, please like it and accept it as the 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 😄
Anderson10
Excursionist
29 0 8

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 

Ninthony
Shopify Partner
2332 350 1034

@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:

 

Ninthony_1-1705688544621.png

 

 

If my solution helped you, please like it and accept it as the 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 😄
Anderson10
Excursionist
29 0 8

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:-

 

<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>

 

 

Then, add the following code to my theme.scss.liquid file…

 

<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>

 

Thanks again for your time on this. 

 

 

 

 

WebDesign_Stuff
Shopify Partner
6 0 0

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.