Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
So I just started using Shopify and have been stuck on this problem for the last few days. I'm aware that I posted a similar question yesterday but I've asked a moderator to delete it since I believe this formulating below is more explanatory of the issue.
I'm using Dawn theme, and have very limited knowledge in coding. Only super-basic JS experience.
So I got one main concern which I desperately been searching answers for, and that is:
What I want to do is add a "show more button" / collapsible tab to my collection descriptions, preferably by default if text contains a certain amount of letters. I'm guessing that i need to change some code in the file "main-collection-banner.liquid".
If someone could provide a helping hand i would be super grateful.
Then I've got another "extra follow-up" question. I think i would be able to figure this one out myself but if anyone have got the possibility to answer this as well I would really appreciate it:
I want the collection banner to be like the image-banner.liquid, but also include the collection description beneath the image. I've kinda solved it by simply changing banner type in the collection.json - template, but that excludes the collection description.
If there is no relatively simple solution for this I'm aware that I just can add a rich text beneath instead, and copy paste the desc.
Solved! Go to the solution
This is an accepted solution.
Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-coll...
In main-collection-banner.liquid file, i replaced
{{ collection.description }}
with:
<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>
Then added this at the bottom, right before the schema starts:
<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var jq224 = jQuery.noConflict(true);
jq224('.read-more-collection').on('click', function(e){
e.preventDefault();
if (!jq224('#fullDescription').is(':visible')){
jq224('#truncated').fadeOut(300, function(){
jq224('#fullDescription').fadeIn(500);
});
}else{
jq224('#fullDescription').fadeOut(300, function(){
jq224('#truncated').fadeIn(500);
});
}
});
</script>
This is an accepted solution.
Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-coll...
In main-collection-banner.liquid file, i replaced
{{ collection.description }}
with:
<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>
Then added this at the bottom, right before the schema starts:
<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var jq224 = jQuery.noConflict(true);
jq224('.read-more-collection').on('click', function(e){
e.preventDefault();
if (!jq224('#fullDescription').is(':visible')){
jq224('#truncated').fadeOut(300, function(){
jq224('#fullDescription').fadeIn(500);
});
}else{
jq224('#fullDescription').fadeOut(300, function(){
jq224('#truncated').fadeIn(500);
});
}
});
</script>
Thanks works great!
This worked out perfect! Thanks!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025