How To Add Shopify Product Description Read More Tag

A well-detailed product description increases your chances of making a sale. Yet, lengthy descriptions aren’t great for user experience.

To tackle this, you should add a “read more” tag to your product description. This article will show you how to add read more button in Shopify.

Why Add Shopify Product Description Read More Button?

A read more button is a clickable element on a webpage that hides part of a text. When the reader clicks the button, it reveals the full text.

Adding a Shopify read more button to your product page can be of many benefits. Apart from improving SEO and boosting sales, there are other advantages.

These are some reasons why it’s a good idea:

• Improves user experience: Customers can skim the product details without information overload. If they want to know more, they can click the button to read the full description.
• Keeps your page clean: A Shopify product description read more button helps keep your product pages organized and reduces clutter. This makes it easier for visitors to find what they’re looking for.
• Enhances mobile experience: Mobile users prefer concise information. A read more button makes it easier for them to navigate your site on their phones or tablets.
• Improves load times: Shorter visible text can help your page load faster. This in turn can lead to a better shopping experience and higher conversion rates.

Method To Add Shopify Product Description Read More Button

To add a Shopify read more button to your product descriptions, follow the method below. This method involves creating a new snippet and updating your product page template.

Step 1: Go to your store’s theme files and edit

• In your Shopify admin, navigate to Online Store and then select Themes
• Click the three-dot icon beside the Customize button and select Edit Code from the options.

Step 2: Create a new snippet

• Navigate to the Snippets folder and click on Add a new snippet.
• Name the new snippet meetanshi-product-description-read-more.

Add the following code to the new snippet and click Save

{%- if product.description != blank -%}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
    {% assign description_length = 50 %} <!-- Set the number of characters to show -->
    {% if product.description.size > description_length %}
      <div class="description-short">
        {{ product.description | strip_html | truncatewords: description_length, '...' }}
        <a href="javascript:void(0);" class="read-more-toggle">Read More</a>
      </div>
      <div class="description-full" style="display:none;">
        {{ product.description | strip_html }}
        <a href="javascript:void(0);" class="read-less-toggle">Read Less</a>
      </div>    
    {% else %}
      {{ product.description | strip_html }}
    {% endif %}
  </div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const readMoreBtns = document.querySelectorAll('.read-more-toggle');
  const readLessBtns = document.querySelectorAll('.read-less-toggle');

  readMoreBtns.forEach(function(btn) {
    btn.addEventListener('click', function () {
      this.parentElement.style.display = 'none';
      this.parentElement.nextElementSibling.style.display = 'block';
    });
  });

  readLessBtns.forEach(function(btn) {
    btn.addEventListener('click', function () {
      this.parentElement.style.display = 'none';
      this.parentElement.previousElementSibling.style.display = 'block';
    });
  });
});
</script>
{%- endif -%}

Step 3: Open the main-product.liquid file

• In the Sections folder, find and open the main-product.liquid file. You can do this by typing product in the search bar.

Step 4: Replace existing code

• Locate the following code block in the main-product.liquid file:

Then replace it with:

{% render 'meetanshi-product-description-read-more' %}

Step 5: Save your changes

• Click the Save button to save the changes to the main-product.liquid file.

Bonus Tips to Improve Your Shopify Store UX

Great user experience can increase customers’ interaction with your site and the likelihood of them making a purchase. Additionally, it helps to build trust and loyalty with your customers.

Besides adding a Shopify product description read more tag, there are other things you can do to enhance your store’s UX. Feel free to put in place these simple yet effective tips:

• Compress images, use fast hosting, and limit the usage of heavy scripts and plugins to make your site load faster.
• Ensure your Shopify store is responsive on all devices. Also, test it on different mobile devices to ensure functionality.
• Write clear and detailed descriptions for each product. Use bullet points for readability.
• Make use of high-quality product images. Also include different angles for the images and enable zoom feature.
• Reduce the number of checkout steps customers have to go through. Also, offer different payment methods and guest checkout.
• Add a live chat feature to assist your customers in real-time. Try to answer questions and resolve their issues promptly.

Implementing a Shopify product description read more button, as well as the bonus tips, can significantly impact UX by keeping your store clean and informative. With the steps outlined, you can add this feature to your site.

For more help, explore our Meetanshi AI content generator app to create content for your store in minutes. Additionally, if you need professional assistance, you can employ our Shopify store setup services or hire a Shopify developer dedicated to your store. Contact us now to support your store!