d
Topic
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
This thread has been closed! You will not be able to reply.
Posts:
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
Posts:
Posts:
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.
Posts:
Posts:
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.
Posts:
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:
Do you have a live link I can look at? Thanks
Posts:
http://www.duschamera.se/collections/badkar/products/ifo-bubbelbadkar-havanna-v100?variant=8348153283
A link to the product page. Maybe that's not what you wanted?
Posts:
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.
Posts:
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:
Posts:
You also need to add the Javascript. It should work
Posts:
Posts:
You can add Javacript to a Liquid page using a script tag:
<script>
// Code goes here
</script>
Posts:
Posts:
You're weocomme.
Hope you make it work
Posts:
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:
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
Posts:
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.