They say that a picture is worth 1,000 words, but sometimes your client wants another 1,000… because, you know… otherwise, the world apparently explodes. Or, sometimes you just have a legitimate situation that may require you to have two separate descriptions for one product. How does one achieve something like that?

Let’s imagine a Shopify page. Your Shopify product page might have a similar structure to this:

However, what if we need two separate description areas, let’s call them a small description and a large one? Something like this...

Unfortunately, Shopify offers only one field for entering a description for a product, because they decided for all of us that one was enough. Well, it isn’t Shopify, and frankly, the Shopify Customizer doesn’t help us either because if we create an input text field there, and use its content on a product page, every time we make a change for one product in that area, all the products would have the same content changed. That is clearly not what we want.

If we don’t want to install a separate app for this to use some custom fields, we could just use the default description field of the product in Shopify administration. From there, we can generate two descriptions for two different areas.

To achieve this we should use a specific format for the text in that description field. We could choose a custom tag for the first description area like: [short][/short],  and another one for the longer description that we could use under the images area [long][/long], and the text we want to appear in those areas should be put between those tags. Once you have done this, the description field in Shopify’s administration will look like this:

[short]Text short description[/short][long]Text long description[/long] 

To assign 2 variables for these 2 fields, in the product template we could use the following code:

{%- assign short_description = product.description | split: "[/short]" | first | remove: '[short]' -%}
{%- assign long_description = product.description | split: "[long]" | last | remove: '[/long]' -%}

And at this moment you can use {{ short_description }} and  {{ long_description }} wherever you want to put these descriptions on the page.

So now you’ve got two descriptions, in this situation a short and a long, but who knows what the client will actually want. Maybe they decided they want to go back to 1, or they need 9… I suppose it just depends on what day it is… doesn’t it.

Happy trails, and happy descriptions.

Need this done on your online store? We offer creative and development services just for that!