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

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

0 Likes
Highlighted
Shopify Partner
57 3 3

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>

 

0 Likes
Highlighted
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 %}

0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
Tourist
3 0 9

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!
Highlighted
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.

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

0 Likes
Highlighted
Shopify Expert
154 17 26

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!
Highlighted
Tourist
3 0 1

Thank you so much! It worked! :)

Highlighted
Shopify Expert
6 0 2

Thanks so much for posting this solution