how to add read more button in shopify theme

How to add read more button in Shopify Debut theme

  • Shopify collapsible product description
  • read more button in the Shopify Product description
  • read more read less in Shopify theme
  • Shopify expand collapse Shopify
  • show more show less Shopify
  • Shopify integration

Step 1: Theme.liquid

Step 2: product-template.liquid

Step 3: theme.scss.liquid

Step 1: Theme.liquid

1.Login your shopify account got to “Online store>Themes”

2.Click on “Action” button and go to “Edit code”

3.Find “theme.liquid” page in Layout section and open file

4.Copy below code and paste above </Body> tag

<script src=""></script>
{% if template == "product" %} 
<script type="text/javascript">
        //   $('.fulltext').hide();
        $('.readmore').insertAfter( '.product-description' );

        $('.readmore').click(function (event) {
          var description = document.querySelector('.product-description');
          if ( === ''){
   = 'auto';
          } else if ( === 'auto'){
   = '';
   = '92px';

          $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
{% endif %}  

5.Save file

Step 2: Product-template.liquid

1.Select product-template.liquid file from Sections (or search file)

2.Find ” {{ product-description }}”

3.Replace this code with below code

<div class="product-collapes">
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            <a class="readmore" href="#">Read more...</a>

4.Save File

Step 3: theme.scss.liquid

1.Go to left panel and find “Assets” section and Open “theme.scss.liquid” file

2.copy below code and paste in bottom of theme.scss.liquid

.product-description {
  overflow: hidden;

3. Save file

Now check Preview if this code not working then please Comment Below (This code is only for Debut theme)

2 thoughts on “How to add read more button in Shopify Debut theme”

Leave a Comment

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