- Shopify collapsible product description
- read more button in Shopify Product description
- read more read less in Shopify theme
- Shopify expand collapse Shopify
- show more show less Shopify
- Shopify integration
Step 1: Theme.liquid
Step 2: product-template.liquid
Step 3: theme.scss.liquid
Step 1: Theme.liquid
1.Login your shopify account got to “Online store>Themes”
2.Click on “Action” button and go to “Edit code”
3.Find “theme.liquid” page in Layout section and open file
4.Copy below code and paste above </Body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% if template == "product" %}
<script type="text/javascript">
jQuery(document).ready(function($)
{
// $('.fulltext').hide();
$('.readmore').insertAfter( '.product-description' );
$('.readmore').click(function (event) {
event.preventDefault();
var description = document.querySelector('.product-description');
console.log(description.style.height)
if (description.style.height === ''){
description.style.height = 'auto';
} else if (description.style.height === 'auto'){
description.style.height = '';
}
else{
description.style.height = '92px';
}
$(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
});
});
</script>
{% endif %}

5.Save file
Step 2: Product-template.liquid
1.Select product-template.liquid file from Sections (or search file)
2.Find ” {{ product-description }}”
3.Replace this code with below code
<div class="product-collapes">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
<a class="readmore" href="#">Read more...</a>
</div>


4.Save File
Step 3: theme.scss.liquid
1.Go to left panel and find “Assets” section and Open “theme.scss.liquid” file
2.copy below code and paste in bottom of theme.scss.liquid
.product-description {
height:200px;
overflow: hidden;
}

3. Save file
Now check Preview if this code not working then please Comment Below
I tried this and it did not work. Now the read more button does not appear.
Sorry for the late reply we checked your website and the ” Read more” and “Read Less” code absolutely working fine on your website
This has worked for me on my product page but it has not worked on my homepage where I need to hide the description more, any help?
Dear This code is only for the Product page description Please Send me a screenshot where you want to add this “READ MORE AND LESS” we will happy to help you
Thank you for your comment