How can I add a 'read more' button to product descriptions on Debut theme?

How can I add a 'read more' button to product descriptions on Debut theme?

Venger
Tourist
13 1 6

Hi there,

 

I am on Debut theme and am looking for some guidance on how to add a 'read more' button collapsing and expanding text on the description of my products.

 

Having taken a look at some of the guidance on here for other themes, I'm at a loss about how and where to add the necessary code, so thanks in advance for any help you may have on this.

 

Best,

 

Scott

Replies 12 (12)

Wahab_Ahmad
Shopify Partner
773 114 204

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->

paste code in the bottom of the file

 

.product-single__description .more-text{
display: none;
}

3. Asset->theme.js->

paste code in bottom of file

$(document).ready(function(){
var maxLength = 300;
$(".product-single__description").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript&colon;void(0);" class="read-more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
csulit
Visitor
1 0 0

Not working. No Read More button appears

Venger
Tourist
13 1 6

As an update, I now have this working perfectly on my site (which you can see on the products at https://vengersdecks.com). I highly recommend oscprofessional, who worked with me at a very reasonable price, with great communication until it was resolved. Here's their profile:

 

https://community.shopify.com/c/user/viewprofilepage/user-id/200529

 

Scott

Tejas_Nadpara
Shopify Partner
1120 222 553

 

HTML / LIQUID

Here's an example of the liquid code to add to the product or collection template in place of the existing {{ product.description }} code.  This example is for the product.  For collection, just replace 'product.description' with 'collection.description'.

{% if product.description.size > 700 %}
  <div class="product-description-short">
  {{ product.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More &#62;</a>
  </div>
  <div class="product-description-full" style="display:none;">
  {{ product.description }}
  <br><a class="readless" href="#">&#60; Show Less</a>
  </div>
  {% else %}
    {{ product.description }}
{% endif %} 

JAVASCRIPT

Here's the JavaScript that is watching for the links to be clicked and taking action when they are.  You can add these to an existing JS file in the theme, create a new JS file or add it onto the liquid template for the products and collections.  In the syntax below, this is added to the product.liquid and collection.liquid templates.

<script>
$('.readmore').click(function (event) {
  event.preventDefault();
  var descriptionFull = document.querySelector('.product-description-full');
  descriptionFull.style.display = 'block';
  var descriptionShort = document.querySelector('.product-description-short');
  descriptionShort.style.display = 'none';
});
$('.readless').click(function (event) {
  event.preventDefault();
  var descriptionFull = document.querySelector('.product-description-full');
  descriptionFull.style.display = 'none';
  var descriptionShort = document.querySelector('.product-description-short');
  descriptionShort.style.display = 'block';
});  
</script>

If you are not comfortable implementing in your theme file then just send me mail with your store details. I will help you to make it working.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
nadiaZokkn
Tourist
6 0 0

Hi Tejas,

I used your solution but I have one problem: the 'read more' button is very close to where the size of the product is displayed, so I would like a bit more space there. 

Is there a way to fix this?

Thank you!

Nadia

This is a link: https://zokkn.be/collections/combineerbare-single-sokken/products/marcella-single-sok-mix-match

Wahab_Ahmad
Shopify Partner
773 114 204

Hello @nadiaZokkn,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.product-description-short {
margin-bottom: 20px;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
nadiaZokkn
Tourist
6 0 0

actually I had to remove it all as the 'button' was there but did'nt work ...

 

Nicole42
Visitor
1 0 0

Hello @Tejas_Nadpara I have followed your advice and pasted in the code for a read more button on my collections pages. But no button has appeared unfortunately. 
Thanks for your help. 
nicole 

nandzks
Excursionist
39 0 5

Hello Tejas. I need help

miguel-dango
Shopify Partner
1 0 0

With Alpine.js | and Tailwind (optional)

{%- assign limit = limit | default: 120 -%}
{%- assign limitAfter = limit | plus: 50 -%}
{%- assign showMoreText = showMoreText | default: 'Show More' -%}
{%- assign showLessText = showLessText | default: 'Show Less' -%}

{%- if description != blank and description.size > limitAfter -%}
  <div x-data="{open: false}">
    <div :class="{'hidden': open}">
      {{ description | truncate: limit, '. . . ' -}}
      <span class="show-more-btn" @click="open = true">{{ showMoreText }}</span>
    </div>

    <div class="hidden" :class="{'hidden': !open}">
      {{ description }}
      <span class="show-more-btn" @click="open = false">{{ showLessText }}</span>
    </div>
  </div>
{%- else -%}
  {{ description }}
{%- endif -%}
<style>
.hidden {
  display: none;
}

.show-more-btn {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-weight: 600;
  cursor: pointer;
}
</style>

Cristian_Matos
Shopify Partner
5 0 2

Here's a quick solution using simple javascript. It worked for me.

const allEmptyParagraphs = [...document.querySelectorAll('.product-info__description-long p')]
  .filter(el => el.innerHTML==='&nbsp;');
allEmptyParagraphs.forEach(el => el.remove());

 

jaxandlo
Tourist
8 0 0

Before trying your code, would you mind sharing where you installed it in you Debut theme?

Laura Paris