- Shopify collapsible product description
- read more button in the 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 (This code is only for Debut theme)
I tried this and it did not work. Now the read more button does not appear.
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?