Studies have found that a whopping one out of ten ecommerce sites do not provide a sufficient amount of information in their product descriptions.
This can lead to all sorts of problems. If visitors feel like they don’t know enough about your products, there’s a higher chance that they’ll back out of your site instead of making a purchase. And even if they do place an order, an insufficient product description makes it more likely that they will be dissatisfied with what shows up at their doorstep and request a refund.
If you’re part of the 10%, improving your product descriptions should be an immediate priority. There’s a lot that goes into making a comprehensive and compelling product description–including:
But when adding this information, you must be careful not to crowd the product page with a dense wall of text. Indeed, it may take a bit of creativity to include all this without overwhelming the visitor.
For the highest level of creativity, you can add HTML to your Shopify product descriptions to create unique layouts — in this guide, we’ll show you how.
You can easily add custom HTML to your product descriptions through the Shopify main dashboard.
To access this code, just follow these steps:
Now, let’s take a look at a few examples to see how adding HTML to your Shopify product descriptions can benefit your store.
Visitors will certainly want to know about your shipping policies, but this is often too much information to neatly fit into a product description. Instead, you can use the following HTML code to add a button to your product description linking to a separate page that details these policies:
<a href="LINK"> <button>SHIPPING POLICIES</button> </a>
Once you’ve added this code (substituting the placeholder link text with the actual link for your specific button, of course), the button will appear in your product description.
Another good way to organize information in your descriptions is to group similar details together in separate tabs, allowing the visitor to select what they want to see and hide the rest of the product details:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{
margin: 0;
padding: 0;
}
body {
background: white;
}
.container {
border: 1px solid grey;
margin: 1rem;
}
[data-tab-info] {
display: none;
}
.active[data-tab-info] {
display: block;
}
.tab-content {
margin-top: 1rem;
padding-left: 1rem;
font-size: 20px;
font-family: sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
}
.tabs {
border-bottom: 1px solid grey;
background-color: rgb(16, 153, 9);
font-size: 25px;
color: rgb(0, 0, 0);
display: flex;
margin: 0;
}
.tabs span {
background: rgb(16, 153, 9);
padding: 10px;
border: 1px solid rgb(255, 255, 255);
}
.tabs span:hover {
background: rgb(55, 219, 46);
cursor: pointer;
color: black;
}
</style>
</head>
<body>
<!-- Body Container -->
<div class="container">
<!-- Tabs Detail -->
<div class="tabs">
<span data-tab-value="#tab_1">Tab 1</span>
<span data-tab-value="#tab_2">Tab 2</span>
<span data-tab-value="#tab_3">Tab 3</span>
</div>
<!-- Tab content -->
<div class="tab-content">
<div class="tabs__tab active" id="tab_1" data-tab-info>
<p>Description 1</p>
</div>
<div class="tabs__tab" id="tab_2" data-tab-info>
<p>Description 2</p>
</div>
<div class="tabs__tab" id="tab_3" data-tab-info>
<p>Description 3</p>
</div>
</div>
</div>
<script type="text/javascript">
// function to get each tab details
const tabs = document.querySelectorAll('[data-tab-value]')
const tabInfos = document.querySelectorAll('[data-tab-info]')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document
.querySelector(tab.dataset.tabValue);
tabInfos.forEach(tabInfo => {
tabInfo.classList.remove('active')
})
target.classList.add('active');
})
})
</script>
</body>
</html>
As with the previous example, just replace the placeholder content with your own, and then you’re good to go.
If you have an especially large amount of information to include in your product description, you should consider adding HTML code for accordions rather than tabs, as this will hide everything but the labels when the visitor first lands on the page:
<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
<h2 class="h4 accordion__title">
Accordion Label
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
<div class="product__description rte quick-add-hidden">
Accordion description
</div>
</div>
</details>
</div>
This code will add one accordion label along with its collapsible description — add it again as many times as you need for your accordion section.
You can also use Shogun to custom-code product descriptions, and this app offers a code-free method for creating your own highly customized product descriptions as well.
Shogun’s visual editor offers an element library that you can use to quickly add features to any of your Shopify pages — this includes an HTML element, which makes it easy to insert custom code anywhere you want.
First, you’ll need to import the page that you would like to customize from Shopify to Shogun:
Once the page has been imported, follow these steps to use the HTML element in Shogun:
This allows you to save time by taking advantage of Shogun’s pre-made elements while still retaining the flexibility to custom-code features as needed.
While Shogun’s HTML element is useful for when you need to add a piece of code only once, it’s a little time-consuming for when you want to add the same code to many different pages.
In that case, you can use Shogun’s Custom Elements feature to improve efficiency. In addition to HTML, you’ll also be able to use CSS and JavaScript for your Custom Elements, giving you more control over styling and interactivity:
For example, if some of your products have received a five-star review from a well-respected industry publication, you could create a Custom Element to highlight this achievement visually rather than just writing about it.
This would require adding the following HTML code:
<!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span>
And the following CSS code:
.checked {
color: orange;
}
If necessary, you can use “fa fa-star” instead of “fa fa-star checked” in this code to indicate stars that are missing from the rating (for example, if you received a score of 4/5).
Once you’ve saved a Custom Element, you’ll be able to find it in the element library, allowing you to add it to any page with just a couple clicks.
While the HTML element and Custom Elements do allow you to add your own code, it should be noted that Shogun provides plenty of customization capabilities for your product descriptions that don’t require any coding at all.
In the element library, you’ll find pre-made features available for containers, grids, columns, sliders, tables, tabs, and accordions.
You can arrange these structural elements however you want on the page, and there are a wide variety of settings options for each element (you can control aspects such as spacing and border thickness right down to the pixel).
Even if you don’t know how to write a single line of code, you’ll be able to design just about any type of product description section that you can imagine.
