All things Shopify and commerce
Hello, im taking serious problem with using Read More button on my collection page. I Have such a long text about the collection, and i want to show only the first few words. I tried to do it by these two tutorials, but any of these dont want to cooperate with me.
1. Tutorial which i used was
1. Add Jquery to theme.liquid on 9.row. <
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
2. Add This code under the jquery
<script> // code by https://websensepro.com $(document).ready(function () { $(".read-more").hide(); $(".show_hide").on("click", function () { var txt = $(".read-more").is(':visible') ? 'Read More' : 'Read Less'; $(".show_hide").text(txt); $(this).next('.read-more').slideToggle(200); }); }); </script>
3. To the collection page, i inserted
<a class="show_hide>Read more</a> <div class="read-more"> Full description </div>
And it looks like this
2. Tutorial which i tried to use.
1. Adding this code to theme.liquid on the bottom, just above the body tag
<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('#truncated').on('click', function(){ jq224('#truncated').fadeOut(300, function(){ jq224('#fullDescription').fadeIn(500); }) }); </script>
2. Then going to main.collection.banner.liquid and replacing {{ collection.description}} there
for this code :
<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection'>Read More</a>" }}</div> <div id="fullDescription" style="display: none">{{ collection.description }}</div>
Then it appers like this
But when i click the Read More button, i dont see anything on the page. as you can see here
I really appreciate all of your helps.
Best Regards,
Tomas
User | RANK |
---|---|
44 | |
42 | |
42 | |
28 | |
21 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023