Hide long product description and replace with “read more…”

Replace your standard “{{ product.description }}” with this in the product page

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

Add this to your theme.liquid page before the </body> tag
You can change the following “description.style.height = ’92px’;” according to how many pixels you want to show

<!-- HIDE LONG PRODUCT DESCRIPTION -->

{% if template == "product" %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 %}

Add the following CSS to your theme.scss.liquid

/*==============================================================================
  #Hide Product Description
==============================================================================*/

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

.readmore{
    font-size: $baseFontSize+2;
    text-decoration: underline;
}

The end result should look like this. Once you click the read more… link it will show and unhide the rest of the text

Leave me a comment if you have any questions or improvements