How to add read more button in Shopify Debut theme

• 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)