How to Add Accordions to Product Pages in Shopify

Accordions offer a particularly clean, aesthetically pleasing way to display your Shopify product descriptions. By having the description open up only when the visitor is ready to read it, you can feel free to include a lot of product features, benefits, and other details without worrying about cluttering up the page.

In this guide, we’ll take you step-by-step through the different methods for adding an accordion to your product pages in Shopify to increase their performance and conversion rate.

Adding an Accordion to Product Pages Using Shopify Liquid

If your Shopify theme doesn’t have a built-in accordion feature for product descriptions, you can add this element yourself by inserting the appropriate Liquid (Shopify’s open-source template language) code into your theme files.

Don’t worry, you don’t need to know how to code to pull this off. Below, we’ll provide you with the necessary code — all you have to do is plug it in.

For reference, here’s what the product description looks like before we make this update:

To add an accordion, simply follow these steps:

Step 1. Log in to Shopify and select the “Online Store” option in the left sidebar of the main dashboard.

Step 2. Open the “…” menu next to the theme you’re currently using and select “Edit code”.

Step 3. In the “Sections” folder (found in the left sidebar), open the “main-product.liquid” file.

Step 4. Scroll down and replace the following code:

<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>

  {{ product.description }}

</div>

With this code:

<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">
          Description
        </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">
        {{ product.description }}
      </div>
    </div>
</details>
</div>

Then, save your changes.

That’s it! Your product descriptions will now be hidden under a collapsible accordion tab. The accordion will be closed by default whenever a visitor opens the page — and if they want to read it, all they need to do is click on it.

Adding an Accordion to Product Pages Using Shogun

For more control over the styling of your accordion (as well as the entire product page), you can use Shogun instead of the coding method described above.

Importing products into Shogun

If you want to add product specifications or any other information that is unique to an individual product into your accordion, the best method is to import such products into Shogun one-by-one: 

Step 1. After installing Shogun, you’ll then need to import the product page you want to customize from Shopify to Shogun. So, open Shogun, and then enter the name of the product into the search bar located near the top of the page.

Step 2. Select “Import page”. 

Step 3. After you have imported the page, search for it again. You’ll now be able to open the page in Shogun’s visual editor.

Shogun provides you with an extensive selection of elements that you can use to customize your Shopify product pages. In the left sidebar of the visual editor, you’ll find an accordion option among these elements.

You can replace the original product description with an accordion element. When this element is selected, you’ll find customization options for the font, icon, colors, dimensions, and more in the right sidebar.

The accordion element is mobile-responsive by default, and Shogun allows you to toggle between desktop, laptop, tablet, and smartphone views while you’re editing your product pages.

Shogun theme sections

It should also be noted that Shogun allows you to save anything you create within the app as a reusable chunk of content that can be accessed through Shopify’s theme editor  — this is known as a theme section.

Shopify uses page templates to give your online storefront a consistent appearance, making it look more professional and easier to navigate. Each Shopify theme comes with pre-built sections that you can add to these page templates through Shopify’s theme editor. 

Essentially, Shogun’s theme section feature allows you to go beyond these pre-built options and add your own custom sections to Shopify product page templates. Once added to a template, your theme section will automatically appear on every page using that template.

For example, you can use a theme section with an accordion for whenever you want to insert universal information into your product pages, such as a general FAQ, shipping and return policies, brand testimonials, or generalized sizing charts. 

While this method can’t be used for unique information (again, in that case, you’ll need to import and edit the product pages individually), it will save you a lot of time whenever you must add the same information to multiple pages. 

The Benefits of Using Shogun To Manage Your Product Page Catalog

In addition to theme sections, there are several similar Shogun features that you can use to save time:

• Global Snippets: Like theme sections, Global Snippets allow you to save something you created in Shogun as a reusable content block — but instead of being found in Shopify’s theme editor, Global Snippets are accessible in the Shogun visual editor. You can add a Global Snippet to any of your pages with just a couple clicks. And whenever you make an edit to a Global Snippet, these updates will immediately be reflected on every page that includes it.

• CMS Collections: Shogun’s CMS Collections feature allows you to build your own custom data models for product pages using properties such as text, integers, and images. You can then use your CMS Collections to create truly dynamic customer experiences, and whenever properties are updated in the CMS, they’ll be updated everywhere that they’ve already been deployed.
• Templates: In addition to saving part of a page as a theme section or Global Snippet, you can also save an entire page as a reusable template. This is especially helpful for companies with large catalogs, as you’ll be able to create all the necessary product pages with much less effort. 

There are only so many hours in the day. With these features, you’ll have the freedom to spend less time on web development and more on marketing, customer service, and everything else it takes to grow your brand.