{"id":3574,"date":"2024-08-28T12:00:18","date_gmt":"2024-08-28T12:00:18","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-shopify-product-description-read-more-tag\/"},"modified":"2025-04-22T17:45:50","modified_gmt":"2025-04-22T12:15:50","slug":"add-shopify-product-description-read-more-tag","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-shopify-product-description-read-more-tag\/","title":{"rendered":"How To Add Shopify Product Description Read More Tag"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A well-detailed product description increases your chances of making a sale. Yet, lengthy descriptions aren\u2019t great for user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To tackle this, you should add a \u201cread more\u201d tag to your product description. This article will show you how to add read more button in Shopify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Add Shopify Product Description Read More Button?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a Shopify read more button to your product page can be of many benefits. Apart from improving&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/ecommerce-seo\/\">SEO<\/a>&nbsp;and boosting sales, there are other advantages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These are some reasons why it\u2019s a good idea:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Improves user experience:<\/strong>&nbsp;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.<\/li>\n\n\n\n<li><strong>Keeps your page clean:<\/strong>&nbsp;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\u2019re looking for.<\/li>\n\n\n\n<li><strong>Enhances mobile experience:<\/strong>&nbsp;Mobile users prefer concise information. A read more button makes it easier for them to navigate your site on their phones or tablets.<\/li>\n\n\n\n<li><strong>Improves load times:<\/strong>&nbsp;Shorter visible text can help your page load faster. This in turn can lead to a better shopping experience and higher conversion rates.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Method To Add Shopify Product Description Read More Button<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Go to your store\u2019s theme files and edit<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In your Shopify admin, navigate to&nbsp;<strong>Online Store<\/strong>&nbsp;and then select&nbsp;<strong>Themes<\/strong><\/li>\n\n\n\n<li>Click the&nbsp;<strong>three-dot icon<\/strong>&nbsp;beside the&nbsp;<strong>Customize&nbsp;<\/strong>button and select&nbsp;<strong>Edit Code<\/strong>&nbsp;from the options.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/click-edit-code.png\" alt=\"Select Click Edit Code from the options\" class=\"wp-image-32509\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Create a new snippet<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to the&nbsp;<strong>Snippets<\/strong>&nbsp;folder and click on&nbsp;<strong>Add a new snippet<\/strong>.<\/li>\n\n\n\n<li>Name the new snippet&nbsp;<strong>meetanshi-product-description-read-more<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/08\/add-new-snippet-name.png\" alt=\"add new snippet name\" class=\"wp-image-32509\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Add the following code to the new snippet and click Save<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.description != blank -%}\n&lt;div class=\"product__description rte quick-add-hidden\" {{ block.shopify_attributes }}>\n    {% assign description_length = 50 %} &lt;!-- Set the number of characters to show -->\n    {% if product.description.size > description_length %}\n      &lt;div class=\"description-short\">\n        {{ product.description | strip_html | truncatewords: description_length, '...' }}\n        &lt;a href=\"javascript:void(0);\" class=\"read-more-toggle\">Read More&lt;\/a>\n      &lt;\/div>\n      &lt;div class=\"description-full\" style=\"display:none;\">\n        {{ product.description | strip_html }}\n        &lt;a href=\"javascript:void(0);\" class=\"read-less-toggle\">Read Less&lt;\/a>\n      &lt;\/div>    \n    {% else %}\n      {{ product.description | strip_html }}\n    {% endif %}\n  &lt;\/div>\n&lt;script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  const readMoreBtns = document.querySelectorAll('.read-more-toggle');\n  const readLessBtns = document.querySelectorAll('.read-less-toggle');\n\n  readMoreBtns.forEach(function(btn) {\n    btn.addEventListener('click', function () {\n      this.parentElement.style.display = 'none';\n      this.parentElement.nextElementSibling.style.display = 'block';\n    });\n  });\n\n  readLessBtns.forEach(function(btn) {\n    btn.addEventListener('click', function () {\n      this.parentElement.style.display = 'none';\n      this.parentElement.previousElementSibling.style.display = 'block';\n    });\n  });\n});\n&lt;\/script>\n{%- endif -%}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Open the main-product.liquid file<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the&nbsp;<strong>Sections<\/strong>&nbsp;folder, find and open the&nbsp;<strong>main-product.liquid file<\/strong>. You can do this by typing product in the search bar.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/Open-the-main-product-liquid-file.png\" alt=\"Open the Main Product Liquid File\" class=\"wp-image-32509\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Replace existing code<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Locate the following code block in the main-product.liquid file:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/Replace-existing-code.png\" alt=\"Replace Existing Code\" class=\"wp-image-32509\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then replace it with:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% render 'meetanshi-product-description-read-more' %}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Save your changes<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the&nbsp;<strong>Save<\/strong>&nbsp;button to save the changes to the main-product.liquid file.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/Save-your-changes.png\" alt=\"Save Your Changes\" class=\"wp-image-32509\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Shopify AI Content Generator<\/span>\r\n<p>Leverage the latest AI models like GPT-4 to speed up your content production.<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/ai-product-description-articles\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Start Today<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/ai-content-generator.png\" alt=\"Shopify AI Content Generator\">\r\n<\/div>\r\n<\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bonus Tips to Improve Your Shopify Store UX<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Great user experience can increase customers\u2019 interaction with your site and the likelihood of them making a purchase. Additionally, it helps to build trust and loyalty with your customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besides adding a Shopify product description read more tag, there are other things you can do to enhance your store\u2019s UX. Feel free to put in place these simple yet effective tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compress images, use fast hosting, and limit the usage of heavy scripts and plugins to make your site load faster.<\/li>\n\n\n\n<li>Ensure your Shopify store is responsive on all devices. Also, test it on different mobile devices to ensure functionality.<\/li>\n\n\n\n<li>Write clear and detailed descriptions for each product. Use bullet points for readability.<\/li>\n\n\n\n<li>Make use of high-quality product images. Also include different angles for the images and enable zoom feature.<\/li>\n\n\n\n<li>Reduce the number of checkout steps customers have to go through. Also, offer different payment methods and guest checkout.<\/li>\n\n\n\n<li>Add a live chat feature to assist your customers in real-time. Try to answer questions and resolve their issues promptly.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For more help, explore our\u00a0<a href=\"https:\/\/apps.shopify.com\/ai-product-description-articles\" target=\"_blank\" rel=\"noreferrer noopener\">Meetanshi AI content generator app<\/a>\u00a0to create content for your store in minutes. Additionally, if you need professional assistance, you can employ our\u00a0<a href=\"https:\/\/meetanshi.com\/shopify-store-setup-service.html\">Shopify store setup services<\/a>\u00a0or\u00a0<a href=\"https:\/\/meetanshi.com\/hire-shopify-developer.html\">hire a Shopify developer<\/a>\u00a0dedicated to your store. Contact us now to support your store!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A well-detailed product description increases your chances of making a sale. Yet, lengthy descriptions aren\u2019t great for user experience. To tackle this, you should add&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-3574","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3574"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3574\/revisions"}],"predecessor-version":[{"id":12484,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3574\/revisions\/12484"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}