How To Create Expand & Collapse Text Using Read More/Less Links in Shopify
In the ever-evolving world of e-commerce, creating a user-friendly and aesthetically pleasing online store is key to attracting and retaining customers. One effective way to enhance the user experience on your Shopify website is by implementing expand and collapse text sections, often accompanied by “Read More” and “Read Less” links. This feature allows you to provide more information while keeping your web pages clean and organized. In this article, we’ll guide you through the process of creating expand and collapse text using Read More/Less links in Shopify. Whether you want to display product details, FAQs, or other essential content, this dynamic technique can help you engage your audience and improve your site’s overall usability.
We will create a new theme section in the Shopify theme and you can add/customize this section to any page you want to appear on the expand and collapse text using Read More/Less links.
Please follow the steps below to learn how to create expand and collapse text using Read More/Less links in Shopify.
Step 1: Create a new Expand & Collapse Text section
- From your Shopify admin, go to Online Store > Themes.
- Click Actions, and then click Edit Code.
- Under the Sections folder, click on Add a new section link to create a new section.
- Fill the section name – hura-readmore to the field on the dialog and click the Done button.
- In the online code editor, please replace the existing code with the below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <div class="hura-readmore" id="hura-readmore-{{section.id}}"> <div class="hura-readmore-excerpt"> {{section.settings.excerpt}} <p class="hura-readmore-btn"><span data-action="expand">Read more</span></p> </div> <div class="hura-readmore-full" style="display:none;"> {{section.settings.full}} <p class="hura-readmore-btn"><span data-action="collapse">Read less</span></p> </div> <p style="display:none;">Powered by <a href="https://www.huratips.com" target="_blank">HuraTips.Com<a></p> </div> <style>.hura-readmore-btn span{cursor:pointer;text-decoration:underline;}</style> <script> if (typeof executeHuraReadmore === 'undefined') { document.addEventListener('click', function(event) { if (event.target.matches('.hura-readmore-btn span')) { var span = event.target; var section = span.closest('.hura-readmore'); var action = span.getAttribute('data-action'); if (action === 'expand') { var excerpt = section.querySelector('.hura-readmore-excerpt'); var full = section.querySelector('.hura-readmore-full'); excerpt.style.display = 'none'; full.style.display = 'block'; } else { var excerpt = section.querySelector('.hura-readmore-excerpt'); var full = section.querySelector('.hura-readmore-full'); excerpt.style.display = 'block'; full.style.display = 'none'; } } }); var executeHuraReadmore = 1; } </script> {% schema %} { "name": "Hura: Read More", "settings": [ { "type": "richtext", "id": "excerpt", "label": "Excerpt", "default":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus purus a sodales tempor.</p>" }, { "type": "richtext", "id": "full", "label": "Full-text", "default":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus purus a sodales tempor. Integer eget augue tristique, ornare odio a, tincidunt purus. Curabitur eget metus fermentum, dictum nisi vitae, dignissim dui. Ut nisi mauris, tincidunt vel rhoncus vitae, convallis vitae lacus. Praesent congue, augue efficitur commodo porta, dolor tellus condimentum purus, vel hendrerit risus metus blandit massa. Suspendisse metus massa, accumsan eleifend neque vel, commodo luctus enim. Aenean ut mollis nunc, imperdiet dictum dolor. Duis tincidunt justo viverra bibendum hendrerit.</p>" } ], "presets": [ { "name": "Hura: Read More" } ] } {% endschema %} |
- Click Save.
Step 2: Add a new Expand & Collapse Text
- From your Shopify admin, go to Online Store > Themes.
- Click Customize.
- You scroll to the bottom page and click on the Add section. Find Hura: Read More and add this section to your page.
- You click on this section to add the texts for excerpt and full.
- Click Save and you are done.
If you are technical or have a custom developer at your disposal, you can follow the guide to do it yourself. If you consider yourself non-technical, there is a Shopify app that helps you. It’s called Hura Theme Blocks. This app offers tons of theme sections for you to install into your Shopify themes.
Conclusion
Incorporating expand and collapse text with Read More/Less links into your Shopify store is a simple yet powerful way to optimize the presentation of your content. By following the steps outlined in this guide, you can seamlessly enhance the user experience, reduce clutter, and make your website more appealing to visitors.
Remember, the key to success in the e-commerce is not only in attracting potential customers but also in keeping them engaged and informed. With expand and collapse text, you strike the perfect balance between providing comprehensive information and maintaining an uncluttered design. So, take advantage of this feature and watch your Shopify store flourish as you deliver a smoother, more enjoyable browsing experience for your valued customers. With the knowledge gained from this article, you’re well on your way to creating a more user-friendly and visually appealing online store on the Shopify platform. Happy expanding and collapsing!
