How to add "Read More..." to Shopify Product Descriptions (Debut Theme)

How to add Read More. Button in Shopify Product Description (Debut Shopify theme)

Please Comment Below if this code is not working on Debut Shopify theme

Step 1:- Open theme. liquid file and add this code above </body> tag on theme.liquid 

Step 2:- Open product-template.liquid 

Find {{ product.description }}

Original code Image 

Replaced code Image 

Step 3: Open theme.scss.liquid file and add this code in the bottom

Theme Code

<!––Just above </body> tag on theme.liquid ––>

<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 %}  


<!––On product-template.liquid ––>

 <div class="product-collapes">
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
            <a class="readmore" href="#">Read more...</a>
          </div>


<!––on theme.scss.liquid ––>

.product-description {
  height:200px;
  overflow: hidden;
 }