Add an accordion to the product page

Enhance product page content with a dynamic, accordion-style framework for customers to find the details they need more quickly. Also known as toggles, FAQ blocks, or collapsible content, accordions allow merchants to include more content within a limited space.

Add code to product description HTML

Feature an Accordion to your product page by adding your theme's HTML framework to the Description field in the Products admin.

The framework varies based on the theme, so use the theme-specific examples below.

Select your theme

Flex

Parallax

Responsive

Retina

Superstore

Turbo

Flex

<dl class="accordion">
<dt><a href="#" class="active"><small class="right">◄</small>Description</a></dt>
<dd class="active">Some description text in here.</dd>

<dt><a href="#" class="active"><small class="right">◄</small>Sizing &amp; Fit</a></dt>
<dd class="active">Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

<dt><a href="#" class="active"><small class="right">◄</small>Care &amp; Maintenance</a></dt>
<dd class="active">Dry Clean only.</dd>

<dt><a href="#" class="active"><small class="right">◄</small>Shipping Information</a></dt>
<dd class="active">Free International Shipping</dd>
</dl>

Parallax

<dl class="accordion">
 <dt><a href="#" class="active"><small class="right">▼</small>Description</a></dt>
 <dd class="active">Some description text in here.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Sizing &amp; Fit</a></dt>
 <dd class="active">Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Care &amp; Maintenance</a></dt>
 <dd class="active">Dry Clean only.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Shipping Information</a></dt>
 <dd class="active">Free International Shipping</dd>
</dl> 

Responsive

<dl class="accordion">
 <dt><a href="#" class="active"><small class="right">▼</small>Description</a></dt>
 <dd class="active">Some description text in here.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Sizing &amp; Fit</a></dt>
 <dd class="active">Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Care &amp; Maintenance</a></dt>
 <dd class="active">Dry Clean only.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Shipping Information</a></dt>
 <dd class="active">Free International Shipping</dd>
</dl> 

Retina

Open Accordion

<dl class="accordion">
 <dt><a href="#" class="active"><small class="right">▼</small>Description</a></dt>
 <dd class="active">Some description text in here.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Sizing &amp; Fit</a></dt>
 <dd class="active">Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Care &amp; Maintenance</a></dt>
 <dd class="active">Dry Clean only.</dd>

 <dt><a href="#" class="active"><small class="right">◄</small>Shipping Information</a></dt>
 <dd class="active">Free International Shipping</dd>
</dl> 

Closed Accordion

<dl class="accordion">
 <dt><a href="#"><small class="right">▼</small>Description</a></dt>
 <dd>Some description text in here.</dd>

 <dt><a href="#"><small class="right">◄</small>Sizing &amp; Fit</a></dt>
 <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#"><small class="right">◄</small>Care &amp; Maintenance</a></dt>
 <dd>Dry Clean only.</dd>

 <dt><a href="#"><small class="right">◄</small>Shipping Information</a></dt>
 <dd>Free International Shipping</dd>
</dl> 

Superstore

Open Accordion

<details open> 
<summary>
<h2 class="headline">Features</h2>
<span class="sub-headline">Learn more about the features</span>
</summary>
<div class="indent-content">
<p>Content goes here</p>
</div>
</details>

Closed Accordion

<details> 
<summary>
<h2 class="headline">Features</h2>
<span class="sub-headline">Learn more about the features</span>
</summary>
<div class="indent-content">
<p>Content goes here</p>
</div>
</details>

Turbo

There are two approaches for adding accordions to the Turbo product pages: Collapsible tabs blocks or HTML framework.

Collapsible tabs block

The latest versions of Turbo include a specialized Collapsible tab block to enhance product page templates. 

Use the page selector to open Products, then Default product.

In the left sidebar, click the toggle beside Product information to reveal its blocks.

Click Add block, then Collapsible tabs.

Add content for the Heading and Text fields.

The same content will appear for each product using this template. To provide different content for different products, consider creating additional templates or using metafields.

HTML framework

The HTML framework is added directly to the Description field's Show HTML view in the Products admin.

<dl class="accordion" data-state="open">
<dt><a href="#"><small class="right">&#9660;</small>Description</a></dt>
<dd>Some description text in here.</dd>

<dt><a href="#"><small class="right">&#9668;</small>Sizing &amp; Fit</a></dt>
<dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

<dt><a href="#"><small class="right">&#9668;</small>Care &amp; Maintenance</a></dt>
<dd>Dry Clean only.</dd>

<dt><a href="#"><small class="right">&#9668;</small>Shipping Information</a></dt>
<dd>Free International Shipping</dd>
</dl>

Closed Accordion

<dl class="accordion" data-state="closed">
<dt><a href="#"><small class="right">&#9660;</small>Description</a></dt>
<dd>Some description text in here.</dd>

<dt><a href="#"><small class="right">&#9668;</small>Sizing &amp; Fit</a></dt>
<dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

<dt><a href="#"><small class="right">&#9668;</small>Care &amp; Maintenance</a></dt>
<dd>Dry Clean only.</dd>

<dt><a href="#"><small class="right">&#9668;</small>Shipping Information</a></dt>
<dd>Free International Shipping</dd>
</dl>

Use a FAQ or Custom Liquid section

Another option for adding accordions to your product page is through current sections and templates.

This option is especially effective if you want to have the same content on all or multiple product pages. If you need unique accordion content for individual products, use the product description approach for the best results.

FAQ section

For Flex, add and customize a FAQ section to the Default product or other product templates.

Add a Section to a Product Page

Custom Liquid section

For other themes, add a Custom Liquid section to the Default product or other product templates, then paste and customize your theme's code.

Add a Section to a Product Page