Hiding text in product page with a "Read More"-option

Highlighted
Tourist
23 0 2

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

2 Likes
Shopify Partner
1278 10 161

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

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
23 0 2
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?
0 Likes
Shopify Partner
1278 10 161

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.

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
23 0 2
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.
0 Likes
Shopify Partner
1278 10 161

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.

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
23 0 2

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

 

0 Likes
Shopify Partner
1278 10 161

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

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
23 0 2
0 Likes
Shopify Partner
1278 10 161

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.

https://sections.design tips, tricks & Shopify sections
0 Likes