How to Create a Collapsible Product Description in Shopify

Product page design can be quite challenging. 

On one hand, it’s important to provide visitors with all the information that they might care about. Depending on the particular product, this may include features, benefits, materials, ingredients, certifications, care instructions, and more. 

A detailed description can help convince interested prospects that they will be satisfied with their purchase, leading to an increase in your conversion rate. At the same time, it can help less confident visitors confirm that they don’t want the product, leading to a reduction in returns and all the associated expenses. 

But you also don’t want to overwhelm the visitor with too much written content. A dense wall of text will scare people away — it makes the ecommerce experience feel more like homework than shopping.

So, how can you balance the need to provide a detailed description with the average consumer’s aversion to too much text?

The trick is to tuck your product description into a collapsible section. That way, when your page initially loads it will have plenty of white space. Then, once the visitor is settled and ready to read, they can make the decision to open up your product description themselves. You’ll be able to provide both a clean design and all the product details you want. 

We’ll walk you through the two ways that you can implement this feature in Shopify below:

• Creating a Collapsible Product Description using Shopify Metafields
• Creating a Collapsible Product Description using Shogun

Creating a Collapsible Product Description using Shopify Metafields

You can create a collapsible product description directly through the Shopify admin. First, you’ll need to add a new metafield for the description:

• Log in to your Shopify account and select the “Settings” option in the left sidebar of the main Shopify control panel. 
• Select “Custom data”.
• Select the “Products” option in the “Metafield definitions” section of this settings page. 
• Select “Add definition”. 
• Give your new metafield a name like “collapsible_description”. Then, click on the “Select type” option and choose “Multi-line text”. 
• Save your changes. 

You will now need to adjust your product settings:

• Select the “Products” option in the left sidebar of the main Shopify control panel.
• Click on a product you want to customize.
• You’ll see that your new “collapsible_description” metafield has been added to the “Product metafields” section near the bottom of the product settings page. If the product already has a description, cut it from the standard “Description” section and then paste it here (otherwise, your page will have two descriptions). If the product does not yet have a description, write it here.

Repeat this process for every product that you would like to add a collapsible product description to.

The last step involves using Shopify’s built-in theme editor:

• Select the sales channel you want to customize in the left sidebar of the main Shopify control panel. 
• Click on the “Customize” button next to your theme — this will open up Shopify’s built-in theme editor. 
• Use the dropdown menu located near the top of the page to navigate to the page template you want to edit. 
• In the left sidebar of Shopify’s built-in theme editor, you’ll see all of the sections and blocks that make up the page listed in order. In the “Product information” section, hover your cursor over where you want your collapsible product description to be located and select “Add block”. Then, select “Collapsible row”. (If there’s already a description block on the page, you should delete it to prevent duplication). 
• Give this block a label like “Product description”. In the settings for the block, click on the “Connect dynamic source” button for your “Row content”. Then, select the metafield that you created for your collapsible product description. 
• Save your changes.

After completing all of these steps, you will have successfully implemented a collapsible product description on your Shopify storefront. 

Creating a Collapsible Product Description using Shogun

There are three different Shogun features that you can use to create a collapsible product description for your Shopify store: the visual editor, custom elements, and theme sections.

Visual Editor

First, we’ll start with the easiest solution. 

Shogun’s visual editor empowers all Shopify merchants, no matter their level of web development experience, to create whatever custom content they want for their store. The cornerstone of this tool is the element library, which provides you with all kinds of different features that you can add to a page with just a couple clicks — including an option for collapsible sections. 

To add your collapsible product description using this method:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun. 
• Go to the “Pages” section of the Shogun app and select the page you want to customize — this will open up Shogun’s visual editor. 
• Select the “Elements” icon in the left sidebar of the visual editor to open the element library. 
• Click and hold on the “Accordion” option in the element library, then drag it over to wherever you would like your collapsible product description to be located on the page. 
• Add a label for this new “Accordion” element, such as “Product Description”. 
• Drag a “Text” element inside the “Accordion” element.
• Write the content of your product description in this “Text” element. 
• Save your changes.

That’s all it takes. Also, Shogun provides you with a wide variety of ways to customize both the “Accordion” and “Text” elements that make up your collapsible product description. 

Custom Elements

Even with all the customization options available in Shogun’s visual editor, sometimes the only way to get precisely what you want is to write the code yourself. 

If this is the case for your collapsible product description, then you should find Shogun’s custom elements feature quite handy. 

Essentially, the custom elements feature gives you the ability to custom-code your own entries to the element library. The first step of this process is adding the code for your new custom element:

• Open Shogun. 
• Select the “Developer tools” option in the left sidebar of the main Shogun control panel.
• Go to “Custom elements” and click on the “Create new…” button. 

You can use three coding languages to build your custom element: Liquid, CSS, and JavaScript. 

To demonstrate, we’ll create a collapsible product description element using all three of these languages. First, we’ll add the following HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">
        Description
      </h3>
<p class="accordion-panel">
        {{ product.description }}
      </p>
</li>
</ul>

Then, we’ll add this CSS code for styling:

.accordion {
	 margin: 1rem 0;
	 padding: 0;
	 list-style: none;
	 border-top: 1px solid #e5e5e5;
}
 .accordion-item {
	 border-bottom: 1px solid #e5e5e5;
   list-style: none !important; 
}
/* Thumb */
 .accordion-thumb {
	 margin: 0;
	 padding: 0.8rem 0;
	 cursor: pointer;
	 font-weight: normal;
}
 .accordion-thumb::before {
	 content: '';
	 display: inline-block;
	 height: 7px;
	 width: 7px;
	 margin-right: 1rem;
	 margin-left: 0.5rem;
	 vertical-align: middle;
	 border-right: 1px solid;
	 border-bottom: 1px solid;
	 transform: rotate(-45deg);
	 transition: transform 0.2s ease-out;
}
/* Panel */
 .accordion-panel {
	 margin: 0;
	 padding-bottom: 0.8rem;
	 display: none;
}
/* Active */
 .accordion-item.is-active .accordion-thumb::before {
	 transform: rotate(45deg);
}

And, finally, some JavaScript for functionality:

$(function() {
	// (Optional) Active an item if it has the class "is-active"	
	$(".accordion > .accordion-item.is-active").children(".accordion-panel");
	
	$(".accordion > .accordion-item").click(function() {
		// Cancel the siblings
		$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
		// Toggle the item
		$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
	});
});

Don’t forget to save your changes. 

Once your new custom element has been created, you’ll be able to access it in Shogun’s visual editor and add it to a product page just like any other option in the element library.

Theme Sections

In some cases, you may prefer to work within Shopify’s built-in theme editor and yet still have access to content you’ve created in Shogun. 

This is made possible with Shogun’s theme sections feature:

• Select the “Pages” option in the left sidebar of the Shogun app. You’ll then see a “Sections” option appear in the left sidebar under “Pages” — select it. 
• Click on the “Create new…” button — this will open up Shogun’s visual editor. 
• Create whatever content you would like to use within Shopify’s built-in theme editor.
• Whenever you’re done making changes, publish the section. 

To access your new section:

• Go to your Shopify account and select the sales channel you want to customize in the left sidebar of the main Shopify control panel. 
• Click on the “Customize” button next to your theme — this will open Shopify’s built-in theme editor. 
• Use the dropdown menu located at the top of the page to create a new template or select an existing template that you’d like to add your collapsible product description to. 
• Add a new section to the page wherever you want your collapsible product description to be located.
• You’ll find that the theme section you created in Shogun is listed here as an option in Shopify — select it. Your collapsible product description will now be added to the page. 

Overall, theme sections give you the best of both worlds, allowing you to combine Shopify’s standard theme editor with the powerful capabilities of Shogun.