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:
But in this article we are going to make it look like this:
And it will look like this 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:
Then once in the HTML view add <!-- split --> at the point you want to wrap/split the description copy:
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.
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 !
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
.
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
where you want the break to occur, as per the below example:
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?
“product-single__description rte”
Thanks for this. The split is occurring, but then my whole description repeats itself after the split. Quite odd.
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.You were right, there was a {{ product.description }} below. Deleted now all good!! Thank you!!!!
Same thing is happening to me, repeats after the split
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?
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?
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)
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.
thanks bro, you saved my time