Adding "Read More..." to Product Descriptions - help?

Highlighted
Shopify Partner
8 0 2

 It's working try this 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;
 }
1 Like
Tourist
3 0 1

@krishn wrote:

 It's working try this 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;
 }


This seems to work, but hides all variations available on a product, is there a fix for this?

1 Like
Highlighted
Shopify Partner
8 0 2

I don't get your point, please share your screenshot

0 Likes
Highlighted
Tourist
4 0 1

Hello 

Would you please simplify the steps for the "read more" tap?

My theme is Debut 

and the notes you've provided messed me up

Appreciate your support

1 Like
Highlighted
New Member
2 0 1

I cant seem to make it work, though there is the read more and read less but its not doing anything

 

I also followed this , but still not working :(

https://community.shopify.com/c/Shopify-Design/Adding-quot-Read-More-quot-to-Product-Descriptions-he...

1 Like
Highlighted
Shopify Partner
8 0 2

4.jpg

 

3.jpg

 

2.jpg

 

1.jpg

 

0 Likes
Highlighted
Shopify Partner
8 0 2

1.jpg

 

2.jpg

 

3.jpg

 

4.jpg

 

0 Likes
Highlighted
Highlighted
Shopify Partner
8 0 2

Please Visit this link may your problem will be solved : https://skrtips.com/how-to-add-read-more-button-in-shopify-debut-theme/

0 Likes