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.
- Open Products
- Select a product to edit
- Within the Description toolbar, click the Show HTML button
- Copy and paste your theme's accordion code
- Replace placeholders with product information
- Save
The framework varies based on the theme, so use the theme-specific examples below.
Select your theme
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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & Fit</a></dt> <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd> <dt><a href="#"><small class="right">◄</small>Care & 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">▼</small>Description</a></dt>
<dd>Some description text in here.</dd>
<dt><a href="#"><small class="right">◄</small>Sizing & Fit</a></dt>
<dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>
<dt><a href="#"><small class="right">◄</small>Care & 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>
Closed Accordion
<dl class="accordion" data-state="closed">
<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 & Fit</a></dt>
<dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>
<dt><a href="#"><small class="right">◄</small>Care & 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>
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.