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.

Categories: Code Examples

0 Comments

Leave a Reply

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