Notifications
Clear all
Topic starter
25/11/2021 11:58 am
Hi,
If you have a long description on your Debut theme collection page, it is recommended to use a read more/ read less button to make the description look shorter and let visitors see your other content (such as your products) and let them see the full description by simply clicking on the read more button.
This short tutorial allows you to add the read more/ read less button on Debut theme without using any app :
- From your Shopify dashboard, click Online store > Actions > Edit code
- Open the file collection-template.liquid
- Replace this code (it is duplicated 2 times)
{{ collection.description }}
- With this one
{% if collection.description.size > 700 %}
<div class="product-description-short">
{{ collection.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More ></a>
</div>
<div class="product-description-full" style="display:none;">
{{ collection.description }}
<br><a class="readless" href="#">< Show Less</a>
</div>
{% else %}
{{ collection.description }}
{% endif %}
- Just before this code
{% endpaginate %}
- Add this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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';window.scrollTo({top: 110, behavior: 'smooth'});
})
</script>
- Click Save
Let me know if it worked for you and if you need any further assistance with this feature
Katrine
08/01/2022 7:09 pm
Hello, thanks a lot. It worked for the collection page. What ca i do for product description page? It shwon the See more button but nothing happened when i click it. Can you help me> Thanks a lot
plaktheme reacted
Topic starter
09/01/2022 9:36 am
Hello, thanks a lot. It worked for the collection page. What ca i do for product description page? It shwon the See more button but nothing happened when i click it. Can you help me> Thanks a lot
Hi @bogdanu
In order to add a functional read more/less button on Debut theme product page, I invite you to follow these steps :
- From your Shopify dashboard, click Online store > Actions > Edit code
- Open the file product-template.liquid
- Replace this code
{{ product.description }}
- With this one
{% if product.description.size > 700 %}
<div class="product-description-short">
{{ product.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More ></a>
</div>
<div class="product-description-full" style="display:none;">
{{ product.description }}
<br><a class="readless" href="#">< Show Less</a>
</div>
{% else %}
{{ product.description }}
{% endif %}
- Just before this code
{% schema %}
- Add this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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';window.scrollTo({top: 110, behavior: 'smooth'});
})
</script>
- Click Save
Let me know if you need any further help with this feature 🙂
Katrine
09/01/2022 4:24 pm
Wow. Thank you so much. Now, the button its working very well, but, i still having 1 little issue
I have only one issue now. The Show less button doesnt appear at the end of the description
This post was modified 3 years ago by BogdanU
Topic starter
09/01/2022 4:37 pm
Wow. Thank you so much. Now, the button its working very well, but, i still having 1 little issue
I have only one issue now. The Show less button doesnt appear at the end of the description
Are you sure you are using Debut theme ?
09/01/2022 7:16 pm
Yes, i am using the debute theme. And also, the description doubles after i press the View More button.
Topic starter
09/01/2022 7:31 pm
Yes, i am using the debute theme. And also, the description doubles after i press the View More button.
I think there is a conflict with a third party app or the code is altered, try to insert this feature on a fresh version of Debut theme and check if it works.
BogdanU reacted
09/01/2022 8:13 pm
Indeed, it was a conflict with a third party app. Now everything is super ok. Thankyou so so much. You are amazing
Welcome to the Shopify Forum Community provided by Plak ThemeLLC, a place where you can discuss about eCommerce and Shopify, solve technical issues, get help with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.
Before posting, we invite you to read and follow the forum rules | We also support any questions related to Free Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Boundless and Simple