How To Create Expand & Collapse Text Using Read More/Less Links in Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

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.

  • 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.


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!

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *