FROM CACHE - en_header

Help requested to add "Read More" and to Collection Descriptions in collection.liquid

David_Clements
New Member
3 0 0

I've been using Shopify for about 2 years now but I've never posted a question to the forums. Hopefully, this will help because I'm stuck.

I want to add a "Read More" link to Collection Descriptions by modifying collection.liquid (and CSS if necessary).

The discussion below is what I want to do, but I don't use tabs on my collection pages so I know the code doesn't need to be as involved. The discussion below is also about doing something similar to Product Descriptions, not Collection Descriptions.

https://ecommerce.shopify.com/c/ecommerce-design/t/adding-read-more-to-product-descriptions-help-379...

I tried some of the other discussion solutions but none seem updated enough to work.

Here is a link to a collection page I'd like to change - https://www.batteries.com/collections/cr-lithium-sr-silver-oxide-lr-alkaline-coin-cell-battery-butto....

I'd like to make sure that this works on mobile - I'm using Venture with some modifications if that helps.

One final note, as soon as I get this done, I'd like to do same for Product page descriptions by making similar changes to product.liquid (and CSS if necessary).

Thanks in advance for any help and suggestions.

Replies 57 (57)
Matt_eman
Shopify Partner
61 3 5

Hey are you just basically looking for an expandable description? Like original shows two lines w/ a “read more”, click read more & full description displays? 

 

If so I think this could be done with jQuery. Something like the below 

<div class=“container”>
   <span id=“truncated”> {{ collection.description | truncatewords: 10, “Read More” }}</span> 
   <span id=“fullDescription” style=“display: none” > {{ collection.description }} </span>

</div>

<script>
$(document).on(“click”,’#truncated’,function(){
 $(this).fadeOut; 
$(‘#fullDescription’).fadeIn();

});
</script>

 

David_Clements
New Member
3 0 0

I've added it in collection.liquid (in between <header> </header> tags but it isn't working - was I supposed to put the jQuery somewhere else?

https://www.batteries.com/collections/cr-lithium-sr-silver-oxide-lr-alkaline-coin-cell-battery-butto...

One thing I do like is that the description text now goes all the way across the page.

 

{% paginate collection.products by 20 %}

<div class="page-width">

  <header class="grid medium-up--grid--table section-header small--text-center">
<div class=“container”>
   <span id=“truncated”> {{ collection.description | truncatewords: 10, “Read More” }}</span> 
   <span id=“fullDescription” style=“display: none” > {{ collection.description }} </span>

</div>

<script>
$(document).on(“click”,’#truncated’,function(){
 $(this).fadeOut; 
$(‘#fullDescription’).fadeIn();

});
</script>
  </header>

  <div class="grid grid--no-gutters grid--uniform">

    {% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-fifth">
        {% include 'product-card', product: product %}
      </div>
    {% else %}
      {% comment %}
        Add default products to help with onboarding for collections/all only.

        The onboarding styles and products are only loaded if the
        store has no products.
      {% endcomment %}
      {% if shop.products_count == 0 %}
        <div class="grid__item">
          <div class="grid grid--no-gutters grid--uniform">
            {% assign collection_index = 1 %}
            {% for i in (1..10) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_index = 1 %}
                {% when 8 %}
                  {% assign collection_index = 2 %}
                {% when 9 %}
                  {% assign collection_index = 3 %}
                {% when 10 %}
                  {% assign collection_index = 4 %}
              {% endcase %}
              <div class="grid__item small--one-half medium-up--one-fifth">
                <a href="/admin/products" class="product-card">
                  <div class="product-card__image-wrapper">
                    <div class="product-card__image">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                    </div>
                  </div>
                  <div class="product-card__info">
                    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                    <div class="product-card__price">
                      $19.99
                    </div>
                  </div>
                  <div class="product-card__overlay">
                    {% assign view_string_length = 'products.product.view' | t | size %}
                    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                  </div>
                </a>
              </div>
              {% assign collection_index = collection_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        {% comment %}
          If collection exists but is empty, display message
        {% endcomment %}
        <div class="grid__item small--text-center">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}

David_Clements
New Member
3 0 0

bumping thread - I still don't have a solution.

Justin-Smith
Tourist
3 0 16

Good Afternoon!

 

Justin Here from the W3Trends Team.

 

While I do realize that this is a very old post, I had a client send me this thread after looking to implement a Read More button to their collection descriptions. So I thought it would be nice to update the thread for any future visitors who may be looking for a solution to this.

 

I ended up rewriting the code provided by Matt_eman above for a more smooth transition:

<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script> $('#truncated').on('click', function(){ $('#truncated').fadeOut(300, function(){ $('#fullDescription').fadeIn(500); }) }); </script>

 

The above script should be placed at the bottom of which ever collection template contains the following snippet:

{{ collection.description }}

(You can find this by opening your collection templates and holding the "Ctrl" key and pressing "F" to search for it. It should likely either be collection.liquid under Templates, or possibly collection-template.liquid under Sections.)

 

If your file was located under Templates, you can just paste it at the last line of that file.

 

If your file was located under Sections, you will have to paste it just before the opening schema tag.

The opening Schema tag should look like this:

{% schema %}

 

After pasting the script provided above, replace each instance of the
{{ collection.description }} liquid tag with the following:

<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection'>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description }}</div>

Only replace the snippet that looks like the above. Do not replace any of the If Statements.

 

Replace this!

{{ collection.description }}

NOT THIS!

{% if collection.description != blank %}

You can also play with the "truncatewords" value to display more or less words within your shortened description. I currently have it set to 10 as per Matt_eman's example above.

 

Hopefully this helps any of the future readers who may stumble upon this thread!

 

Thank You,

-Justin

 

W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
LCF
New Member
1 0 1

Justin I just wanted to say THANK YOU for this code.  You saved me a ton of time and aggravation and it worked great on my website.

KirstenRK
Tourist
3 0 1

Hi I did this and it worked well with shortening the description to where I wanted it, but when I go to test it and select the read more to have it expand... it does nothing... my Theme is not published though, would that have something to do with it? Or is there something I'm missing with the code?

w3trends
Shopify Expert
154 17 30

Good Afternoon,

 

You likely have a jQuery issue. But it is hard to say without actually looking.

 

Try replacing the following code:

<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<script>
  $('#truncated').on('click', function(){
    $('#truncated').fadeOut(300, function(){ 
      $('#fullDescription').fadeIn(500);
    })
  });
</script>

With this:

<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(){
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });
</script>

This will set this version of jQuery to a variable called jq224 and use it in place of the $.

 

Hope this helps!

-Justin

W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
KirstenRK
Tourist
3 0 1
mlennox
Shopify Expert
9 1 3

Thanks so much for posting this solution

A4Hiwayman
Shopify Partner
6 0 4

Hi Justin, this is exactly what I've been looking for. Everything looks great on the page but when I click the 'read more' I get a blank page with a 'page not found' error. I've tried the new code pointing to the specific Java snippet. I've also pasted the 'style' into my css style sheet and the 'script' into my custom JS snippet file. Can you offer any pointers as to where I go from here?

 

Regards

Gavin

Justin-Smith
Tourist
3 0 16

Good Afternoon Gavin,

 

Hmm. Again, it is extremely hard to troubleshoot these issues blindly. But i'm going to guess that either one of two things is happening on your shop.

 

  1. You may have instant click on your theme. Which basically is a javascript library that speeds up the navigation of internal links in your shop. But we do not want it to fire on our read more link. Because you are not actually navigating anywhere. 
  2. Your anchor tag is attempting to navigate to a URL from the anchor tag read more button rather than remaining on the same page.

 

Option 1:

Can you try to add an empty attribute of data-no-instant to the read more link? 


So, this:

<a class='read-more-collection'>Read More</a>

Would become this:

<a class='read-more-collection' data-no-instant>Read More</a>

 

Option 2:

If option 1 did not fix the issue, please try adding an e.preventDefault(); Just after the opening click handler function.

 

So, this:

  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(){
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });

Would become this:

  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(e){
    e.preventDefault();
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });

 

If you try either of these options, please be sure not to remove any of the other code on the page, including the script tag. I was just trying to keep the code snippets as short as possible to make it a bit easier to copy/paste.

So, just replace the code that looks almost identical to the new code.

 

I truly hope this helps!

-Justin

W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
mlennox
Shopify Expert
9 1 3

Hey Justin,

 

Another issue i have just realised with your awesome solution is the 5th item in the navigation is being cut off by the code, any idea how i would go about stopping this?

 

Video showing issue: https://drive.google.com/file/d/1Z4CF0JhdFAS4dg1qsjnrbpUptH62SrH5/view

 

Thanks,

Mark

mlennox
Shopify Expert
9 1 3
Hey guys

Add this to your scss file to stop the navigation being cut off.

.main-navigation-wrapper-inner .dropdown-menu{z-index:2 !important;}
7752
div#main{ z-index: 1 !important;}

Cheers
Mark
Jon_Mahtaban
Tourist
4 0 4

What a breath of fresh air this thread is!  I was able to implement this on my site after trying several other versions of code.  Thank you to everyone who has contributed to this thread!

 

My site is at https://www.customled.com and you can see I have implemented this (with some minor style changes) on my collection pages such as: https://www.customled.com/collections/integrated-led-tail-lights-for-motorcycles

 

I would like to have the text hidden/shrunk as such when the visitor is on a smaller browser window like mobile.  My site has a responsive theme but I can't seem to figure out how to pull this off.  Can anyone provide some guidance?  I would greatly appreciate it.

 

I'm thinking there should be a way to have this only happen when the browser window is less than XX pixels wide.  Or even better, if the description wraps more than x lines on the browser, it should be kept at x with the option to expand.  That would be the best solution for me!

 

Thanks in advance,

 

Jon

GToley1
New Member
1 0 1

This was a godsend. Just implemented in on our site. Wondering if there is a Read Less toggle to close after copy has been viewed. 

csgill992
Tourist
4 0 2

Thank you so much for this Justin - looks great! 

I'm wondering if it would be possible for the 'Read more' to open the full text at the bottom of the collection page rather than at the top?

How would I edit the code to do that?

Thanks!

 

KB_Els
New Member
2 0 0

Hi,

I did this and made it worked so it is now a Read more. But it is not clickable. What can I have been doing wrong for not make it available to read more?

KB_Els
New Member
2 0 0

Okay sorry. So I just found this answer and did now put that code in to the Collections descriptions so it is now clickable but when you click the text disappear and dosen't show any text at all now. What can I have been doing wrong?

sandhyagarg11
Tourist
4 0 1

Thanks Justin, The code was easy to put, you explained it well and works like magic. Thanks a lot