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
Highlighted
Shopify Partner
919 195 360

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
4 Likes
Highlighted
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
Highlighted
Shopify Partner
919 195 360

@TechPalava 

 

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

 

Thank you,

Tejas

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

This is an accepted solution.

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
2 Likes
Highlighted
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
Highlighted
Shopify Partner
79 1 9

Hi! I tried this solution and it worked great for my feature product on homepage. However, I'm seeing that the 'Read more' and 'Read less' buttons also display on normal product page (not only on homepage featured product). How can I remove this in the product page?

1 Like
Highlighted
New Member
1 0 0

Hi - I'm brand new to Code... This worked for me but the code now shows up on my site where the product description (Which I do not want showing up at all) use to be. Any help?

0 Likes
Highlighted
Shopify Partner
79 1 9

Hey! Someone just gave me the solution on another post I did regarding this issue. Just edit your code, go to template.css.liquid and add the following code at the bottom:

.template-product .readmore{display:none;}

This worked for me using debut theme! 

0 Likes