Want to add a second product description in Shopify?
To implement this custom feature, you’ll need to either edit the Liquid code of your Shopify theme or take advantage of a third-party app.
Below, we’ll walk you through each step of these two solutions:
Imagine this scenario: you have exceptionally high standards for manufacturing your products, but you’re having trouble highlighting this fact in the product description without making the description too long.
In addition to simply looking awkward on the page, the length of your product description is sometimes pushing the color options down below the fold, so visitors can’t see them without scrolling down — and if visitors aren’t immediately aware that their favorite color is available, you might miss out on some sales.
By breaking up one product description into multiple sections, we can provide the people who visit our store with a better shopping experience.
The description for each product in your catalog can be accessed through the Shopify admin:
That’s easy enough if you only want a single product description displayed. But there’s only one “Description” field available here — if you want to add two descriptions, things get a little more complicated.
In that case, you’ll need to dig into the code. Adding a second product description will require you to edit the HTML of this “Description” field, and then you’ll need to make some corresponding edits to your theme files.
Let’s start with the “Description” field. In the toolbar at the top of this field, you’ll find that the rightmost option is labeled “Show HTML” — select it. Then, enter the following line of code:
<!--SPLIT-->
Insert your primary product description above this line of code and your second product description below it. And don’t forget to save your changes.
Now it’s time to edit your theme files:
In the sections folder, you’ll find the code for all the parts that make up your product pages. For this example, we’ll only need to edit the “main-product.liquid” file, but depending on where you want your second product description to be located, you may also need to make edits to other files here, such as “related-products.liquid”.
It’s also worth mentioning that we’re using Shopify’s default Dawn theme for this example — if you’re using another theme, the file names and code that you need to edit may be slightly different. But even in that case, the process is quite similar and you will likely be able to figure out how to add your second description using the instructions below.
With those caveats now established, let’s go back to the “sections” folder and open the “main-product.liquid” file. Search for the following code:
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{{ product.description }}
</div>
And replace it with this code:
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{% if product.description contains "<!--SPLIT-->" %}
{{ product.description | split: "<!--SPLIT-->" | first }}
{%else%}
{{ product.description }}
{% endif %}
</div>
This code will display your primary product description (all the text above the “<!–SPLIT–>” line in the product’s “Description” field) in the usual spot where product descriptions are located on your store.
For your second product description, you’ll first need to determine where you want it to be displayed on the page. Then, you must figure out which part of your theme code corresponds to that exact location.
This may take a little trial and error — one helpful technique is to add a single line of text like “TEST” to the part of the code that looks like where you want your second product description to go.
After adding your “TEST” line, save your changes to the code and take a look at the live version of the page. If “TEST” appears where you want your second product description to be displayed, then you’ll know that you’ve identified the correct place in your code for it. If not, keep trying until you get it right.
Make sure to delete your “TEST” lines from the code once you’re done.
For this example, we want our second product description to be right at the end of the part of the page that represents the “main-product.liquid” file. So, we’re going to add the following code just before the </section> tag on this file, but again, where you should add this code will depend on where exactly you want your second product description to be located:
{% if product.description contains "<!--SPLIT-->" %}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{{ product.description | split: "<!--SPLIT-->" | last }}
</div>
{%endif%}
Save your changes.
On the live version of the page, you’ll now see your second product description displayed in the spot you chose for it in addition to your primary product description displayed in its usual spot.
Shogun allows you to add a second product description without touching a single line of code. But first, you’ll need to import any pages that you want to edit from Shopify into Shogun:
Once the product page has been imported, adding a second description is as easy as 1-2-3:
That’s it! And once your new product description has been added, you’ll be able to fully customize the styling however you want. Shogun gives you thousands of options for the font, and you can adjust the text size, text color, letter spacing, and much more.
There are many ways that you could benefit from this feature. For example, you can use your second product description to:
And since Shogun allows you to set up your second product description quickly, you’ll have more time to deal with everything else that goes into running your online store.
