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, Pacific, and Launch
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>Vino
There are two options for adding accordions to the Vino product pages: Tab blocks or Collapsible content section.
Tab block
Tab blocks can be added directly to the Product section to create accordion-style content.
Use the page selector to open Products, then Default product.
In the left sidebar, click the toggle beside Product to reveal its blocks.
Click Add block, then select Tab.
Add content for the Heading and Tab content fields. You can also pull content from a page by selecting it in the Tab content from page setting.
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.
Collapsible content section
The Collapsible content section can be used to add an accordion below the main product section. This is a full-width section that can display content in multiple columns. For more details, please refer to this article.
Add a Section to a Product Page
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.