unable to shorten featured product description

Solved
Highlighted
Tourist
4 0 0

Hi all, i am having difficulties in truncating my product description. I am using the Debut theme. I have tried to implement the codes on this thread - https://community.shopify.com/c/Shopify-Design/Hide-long-Product-description/td-p/408505/page/2

but can't get it to work. Pls, can someone update the codes and state exactly where to paste them on the theme code editor. I really appreciate the help. Thank you.

0 Likes
Shopify Partner
531 110 150

@TechPalava 

 

Add following code to the end of theme.js  Debut theme:

   $('<div class="readmore">Read more...</div>').insertAfter( '.product-single__description' );

        $('.readmore').click(function (event) {
          event.preventDefault();
          var description = document.querySelector('.product-single__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 = '300px';
          }

          $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
        });

Add following code at the end of theme.scss.liquid Debut theme:

.product-single__description {
    height: 300px;
    overflow: hidden;
}

Cheers,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
3 Likes
Tourist
4 0 0
Thanks for the quick response. I implemented the code. It works but there's a white space seperating the "buy now" button and the "read more" text. please how do i reposition the space and make the it show under the read more instead. Screenshot here https://paste.pics/6432N
0 Likes
Shopify Partner
531 110 150

@TechPalava 

 

share your store url so, I can take a look and assist you better.

 

Thank you,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
0 Likes
Tourist
4 0 0
Store url is geekabana.com
0 Likes

Success.

Shopify Partner
531 110 150

@TechPalava 

 

You can increase/decrease that space from CSS:

.product-single__description {
    height: 300px;
    overflow: hidden;
}

adjust height as per your requirement.

 

Thank you,

Tejas

 

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
2 Likes
Tourist
4 0 0

hi, I'm so grateful for the assistance I have gotten so far. Thanks a lot.

 

One more question - how do I adjust the number of words or characters displayed just before "read more" label?

0 Likes