[Solved] Add read more button to the collection page

Hi @fanny-job

Katrine here from Plak Theme support,

In order to add the (read more... read less) button on the collection description, I invite you to follow these steps :

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file collection-template.liquid
• Replace this code (it is duplicated 2 times)

{{ collection.description }}

• With this one

         {% if collection.description.size > 700 %}
  <div class="product-description-short">
  {{ collection.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More ></a>
  </div>
  <div class="product-description-full" style="display:none;">
  {{ collection.description }}
  <br><a class="readless" href="#">< Show Less</a>
  </div>
  {% else %}
    {{ collection.description }}
{% endif %} 

• Just before this code

{% endpaginate %}

• Add this one

  <script>
$('.readmore').click(function (event) {
event.preventDefault();
var descriptionFull = document.querySelector('.product-description-full');
descriptionFull.style.display = 'block';
var descriptionShort = document.querySelector('.product-description-short');
descriptionShort.style.display = 'none';
});
$('.readless').click(function (event) {
event.preventDefault();
var descriptionFull = document.querySelector('.product-description-full');
descriptionFull.style.display = 'none';
var descriptionShort = document.querySelector('.product-description-short');
descriptionShort.style.display = 'block';window.scrollTo({top: 110, behavior: 'smooth'});
})
</script>

• Click Save

Let me know if it worked for you and if you need any further assistance with this feature.

Kind regards,
Katrine

It works great ! Thanks a lot for the fast and accurate answer Katrine 🤩 🤩 🤩 😍 😍 😍 

Hi Katrine, 

I actually also emailed Patrick this morning with questions about how to do this. I just went and edited the code as instructed but its not working on my website. I believe that is because I used the Plak editor to add the text content for my collection page rather than the Shopify editor because I wanted more flexibility with it should I ever decide to add more content. Is there a way to make it work this way also?

Thank you!

Posted by: @adenmott

Hi Katrine, 

I actually also emailed Patrick this morning with questions about how to do this. I just went and edited the code as instructed but its not working on my website. I believe that is because I used the Plak editor to add the text content for my collection page rather than the Shopify editor because I wanted more flexibility with it should I ever decide to add more content. Is there a way to make it work this way also?

 

Thank you!

Hi Aden,

I've just checked you conversation with Patrick from the email support, I will check your website and get back to asap 🙂

I checked out your website Aden, it seems you have used the Rich text section in the collection page, and as you guessed 🤗 , this is why the code above didn't work for you. 😑 

Anyway, I made some changes in the rich text section, and the readmore/less buttons works great on your store now.

If you have any other questions or issues, feel free to let me know 🙂

Katrine

@plaktheme  I just reverted back to the theme saved before this fix.  I didn't realize that the rich text I added for the one collection I needed it in was actually added to "default collection", which showed the rich text on every collection page. Is there a way to edit each collection individually inside the Plak editor?

Posted by: @adenmott

@plaktheme  I just reverted back to the theme saved before this fix.  I didn't realize that the rich text I added for the one collection I needed it in was actually added to "default collection", which showed the rich text on every collection page. Is there a way to edit each collection individually inside the Plak editor?

Any changes you make from the theme editor to your collection page will affect the others, since you are using a default collection templates on all of them.

In order to have different content for each collection page, I invite you to follow this TUTORIAL that I have just created 🙂

Let me know if you have any additional questions regarding this topic 🙂

Katrine

@plaktheme Thank you so much for the top-notch support!