Hi all,
Hope everyone is going well 
I’m hoping for some help with our product pages specifically. I’m adding in text for SEO, however the product descriptions are too long on both PC and mobile to look nice. I was wondering if there’s a way to show 8 or so lines of the product description, and then have an ‘expand’ button option to see the rest of it?
Theme: Palo Alto
Link: La Pavoni Cellini Classic V2 Coffee Machine + FREE $120 CUP SET – Prestige Coffee
Thank you in advance!
Simple option is to disable “Description block” under “Product section”, add an “Accordion” block.
Check “Show description”, “Show read more button” and “Open by default”.
That would be more or less what you want:
There is also a “Full-width” option.
And here is the theme manual Accordion | Palo Alto Documentation
In theme.liquid file, add the following code before
<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>
open product-template.liquid or main-product.liquid or product-template.liquid under SECTIONS or under TEMPLATES.
Replace each instance of the
{{ product.description }} liquid tag with the following:
<div id="truncated">{{ product.description | truncatewords: 10, "... <a class='read-more-collection'>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ product.description }}</div>
Only replace the snippet that looks like the above. Do not replace any of the If Statements.
Replace this!
{{ product.description }}
NOT THIS!
{% if product.description != blank %}
Hope this is helpful.