How to Split Your Product Description in Shopify

By default, your product description is all in a column on the right hand side of the page. This article will show you how to split your product description in Shopify so that part of it goes under your product images, utilising the white space on the left.

In the Shopify Debut theme, and many others from Shopify, by default your product description looks like this:

Shopify product page without the split
**Here all the Additional Copy is on the right, leaving unutilised whitespace on the left

But in this article we are going to make it look like this:

Shopify product page with the split

And it will look like this on a mobile:

Shopify product page with the split on a mobile

Intro

What we are going to do below is create some code, such that when you add the tag ‘<!– split –>’ into your product description, it will wrap/split under the images at the point you put the split.

Step 1

Within Shopify admin, go to Online Store > Themes and from the Actions dropdown select ‘Edit code’.

Find a file called ‘product-template.liquid’ which will be in your Sections folder. This is the file we will be editing.

Then within ‘product-template.liquid’ find this line of code <div class="product-single__description rte" and replace it with the code below:

<div class="product-single__description rte" id="first_product_description">
      {{ product.description | split: '<!-- split -->' | first }}
          </div>
      </div>
    </div>
    {% if product.description contains "<!-- split -->" %}
        <div class="product-single__description rte" id="last_product_description">
      {{ product.description | split: '<!-- split -->' | last }}
      
      </div>
  {% endif %}

Step 2

That is actually it done, but now we need to add the ‘<!– split –>’ tag to one of our product descriptions to test that it works.

Go to a specific product and in the description area select the ‘Show HTML’ view which is indicated by the <> symbol:

Shopify product page in Admin

Then once in the HTML view add <!-- split --> at the point you want to wrap/split the description copy:

Shopify product page in Admin in code view

Note: If you enter <!– split –> anywhere but in he code view, this feature will not work. Also, the split tag does not appear in the content editor; you must be in code view to see it.

And that’s it, the description for that product will now split at the point you have determined and your content will utilise all that otherwise wasted white space.

12 thoughts on “How to Split Your Product Description in Shopify”

  1. Does anyone know how to do this on Minimal Theme? It’s not splitting and it’s just giving me two descriptions, one before the product and one in the regular place.. thank you !

    Reply
    • Hi Jessica – I’ve just tried this in Minimal and it works exactly as described in this article, so I think you’ve made a mistake somewhere when editing your code or adding

      <!-- split -->

      .
      In my version of Minimal (latest version), in product-template.liquid I went to line 248 and changed the code to this (I’ve commented out the original code to hopefully make it easier to understand):

      {% else %}
                 {% comment %} <div class="product-description rte" itemprop="description">
                    {{ product.description }}
                  </div> 
                {% endcomment %}
                
                <div class="product-single__description rte" id="first_product_description">
            {{ product.description | split: '<!-- split -->' | first }}
                </div>
            </div>
          </div>
      

      Then in the product description (for the product/s you want to split the description on). Make sure you are in HTML view mode in the product description section and add

      <!-- split -->

      where you want the break to occur, as per the below example:

      <p>Blue silk tuxedo with marbled aquatic pattern and dark lining. Sleeves are complete with rounded hem and black buttons. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      <!-- split -->
      <p>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum la sed consectetur. Vestibulum id ligula porta felis euismod semper.</p>
      
      Reply
  2. Hi Wright! Thank you for the insight!
    I tried to find cannot find “””””” in my product-template.liquid.
    I use the paid theme Warehouse, but not sure why my theme doesn’t have this code!
    Is there a way to put the code by myself?

    Reply
  3. Thanks for this. The split is occurring, but then my whole description repeats itself after the split. Quite odd.

    Reply
    • My guess would be that you have accidentally included one too many {{ product.description }} somewhere in your code, so it’s outputting the description twice.

      Reply
      • You were right, there was a {{ product.description }} below. Deleted now all good!! Thank you!!!!

        Reply
  4. Hi,

    I’m using the Venture theme and the code from the product-template.liquid looks a bit diffferent:

    {% endform %}

    {{ product.description }}

    {% if section.settings.social_sharing_products %}

    {% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product %}
    {% endif %}

    {% unless product == empty %}

    Could you help me to understand what needs to be replaced with what on this?

    Reply
  5. Hi NeuralCandy,

    I cannot find the file called ‘product-template.liquid’ in my Sections folder, using Debutify 2.0.2 theme. I did manage to find it in /snippets/product-template.liquid but when I replaced it with your suggested code it totally changed the layout of my product page so had to return to default. Anything I am doing wrong?

    Reply
    • Hi @Wilhelm – yes this code example was based around the Debut theme. For Debutify things are slightly different. I just had a quick look at the Debutify code and I got this change to work (it’s mainly a matter of working out where you need to place the closing div’s).

      So try this code instead (which worked for me on Debutify 2.0.2)
      Debutify Theme - split product description

      Here’s the code so you can copy and paste.

      <div class="product-single__description rte" id="first_product_description">
            			{{ product.description | split: '<!-- split -->' | first }}
              	  </div>
            		</div>
                  </div>
              </div>
          		</div>
          		{% if product.description contains "<!-- split -->" %}
          		<div class="wrapper">
              	<div class="product-single__description rte" id="last_product_description">
            		{{ product.description | split: '<!-- split -->' | last }}
            		</div>
             {% endif %}       
      

      Hope that helps.

      Reply

Leave a comment