d
Topic
Posts:
23
December 14, 2015
g
2
upvotes

Hiding text in product page with a "Read More"-option This post is outdated

Hi,

I'm on the Supply theme. I would like to hide the later half of my long product descriptions with a "Read More"-option so that it folds out only when the customer presses "Read More".

As it is now, the long description makes all the other content such as "Recomended Products" down so that very little in fact is visible without having to scroll down.

How do I go about applying such a feature to all my products? Of course, if one description is very short I wouldn't want it to be cut and half of it hidden. I wish it to be applyed after a chosen amount of symbols.

I'm sorry if I explain it badly, but I'll leave it like this and hope for some awesome answers!

Thank you!

 

- Kristoffer

i
Replies
Posts:
1157
December 15, 2015

Here is a fiddle I found online: http://jsfiddle.net/acq6s/2/. It's self explanatory. You can tweak it and make it work on your theme.

A very usefull Shopify feature is truncatewords. Have a look: https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#truncatewords

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 15, 2015
Thanks! It's exactly what I'm looking for. The question is, how do I get this to work on all products without having to edit each one's description manually?
Posts:
1157
Last edited December 15, 2015

You won't have to edit all products. Use it with product.description: https://docs.shopify.com/themes/liquid-documentation/objects/product#product-description

Basically your product.description will have an initial fixed size. The read more will cover it. On click the product.description will be set to its natural height.

 

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 15, 2015
Okay, that's great! I know a little on how to edit the html, or I'm starting to understand a little, but when you say "use it with product.description" what do you mean exactly? Would you mind describing exactly how I'll do it? Thank you for your patience.
Posts:
1157
December 15, 2015

Assuming you want to do this on the product page, the product description, in Liquid, looks like this:

{{ product.description }}

That is what you should be looking for your markup. It may sound complicated but you'll figure it out.

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 15, 2015

I'm sorry, Mircea, but I don't get it. I've been trying but from what I see in the fiddle there is text that the author cuts the last sentence out from and puts the "read more" code in. As I only have {{product.description}} to play with I don't see how I can choose where the text shall be cut.

My code looks like this:

 <div id="tab-1">
    <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>
  </div>

The Fiddle looks like this:

<div class="blog-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
        leo vulputate egestas a ut odio. In hac habitasse platea dictumst. Donec
        in erat velit, eu ultricies diam.
        
    </p>
        <p class='fulltext'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
            leo vulputate egestas a ut odio. In hac habitasse platea dictumst.</p>
    <a class="readmore" href="#">Read more...</a>
</div>

I've been trying but it doesn't make sense to me. Have in mind, I'm a musician... coding is a whole new thing for me. :)

 

Posts:
1157
December 15, 2015

Do you have a live link I can look at? Thanks

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 15, 2015
Posts:
1157
December 15, 2015

I've updated the fiddle to your code. This is the basic. Starting from this you can add animations and make it nice. The "readmore" link comes after the "product-description" element.

 http://jsfiddle.net/h9u1n66g/

I understand it seems complicated but you do need to have some basic understanding on how this works to pull it off.

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 15, 2015

Thanks.

 

I did like this now:

  <div id="tab-1">
    <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>
    
    <a class="readmore" href="#">Read more...</a>
  </div>

 

AND put the CSS code into the bottom of my timber.scss.liquid.

.product-description {
  height: 92px;
  overflow: hidden;
 }

 

The text cuts and the "read more..." is there, but when I press "read more..." it just throws me to the top of the page. How shoud it be? What am I doing wrong?

Posts:
23
December 17, 2015
Please, it would be fantastic to get this working.
Posts:
1157
December 17, 2015

You also need to add the Javascript. It should work

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 20, 2015
Ok How do I do that? Where do I put the JavaScript code? Thank you.
Posts:
1157
December 20, 2015

You can add Javacript to a Liquid page using a script tag: 

<script>

// Code goes here

</script>

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
23
December 21, 2015
Thanks mate! Sorry for the newbie questions. I'm very grateful for the help Mircea.
Posts:
1157
December 21, 2015

You're weocomme.

Hope you make it work

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
10
January 21, 2016

Hello Mircea, I really like your "Read More" code and have implemented it into my websites products pages as well: www.backcountrylark.com. I was wondering if there was a way to have the Read More change to read less but stay in its original place after the text becomes unhidden. Does that make sense? Thank you, Tonda.

Posts:
1157
January 21, 2016

Hi Tonda,

It should be possible but its not very nice. With Javascript, you can append the readmore after the first paragraph, witch have an id of "textVisibile".

http://jsfiddle.net/mc3xmpp1/1/

This is a "hack". I do not know how this behaves on mobiles, few things I do not like. Will try to write something better when I have the time.

Hope it helps

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
10
January 21, 2016

Thank you Mircea for your help with this code. I will plug it into another theme that I use for testing and see what happens.