Creating Accordions

Overview

In this advanced tutorial, we'll show you how to create content that is displayed in accordions on your product pages.

Use a Widget instead!

Check out the Accordion Widget to create an accordion in a few clicks with zero coding.

In this example, we walk you through how to set up HTML fields and labels for accordions, then we provide you with all the code necessary and explain where it goes. The coding is generic, you just need to copy and paste it in the right places and it will work. No changes are necessary.

*Please note, this tutorial is provided as a starting place for experienced coders. We cannot provide support for your custom development efforts. If you're not comfortable coding, we suggest hiring a professional to build this for you.

1.) Create new product HTML fields.

Generally, accordions look best when there are between two and four accordions total. Your theme may look good with more or less. These new fields will store the content that goes into the accordions. Be sure to check Exclude from display, so that it does not show without the custom code that we add.

Tip: Custom Fields Labels do not have to be shown to your customers unless you want it to.

2.) Create a new Global text Field called "Accordion Definition".

Note: The machine name of this field must be accordion_definition in order for the rest of the tutorial to function correctly! Be sure to check Exclude from display before clicking Create New Field.

3.) When you click Edit Globals, navigate to your new field. Next, for each accordion, enter the custom field's machine name, then an equals sign, then the title of the accordion you'd like your customers to see.

If you created an accordion on products called "Accordion 1", then the machine name would be "accordion_1". You can also view this Machine Name as well as the Label from the Edit Fields page.

Your code will look something like this: YOURMACHINENAME=THEHUMANTITLE|YOURMACHINENAME=THEHUMANTITLE etc.

NOTE: The order you enter the accordions in the global field is the order they will be output on your store page. Don't worry, the hardest part is over!

4.) In the theme code, create a file called custom-fields-accordions.scss.css in your assets folder.

4.1) Open the Assets folder in your theme and press “Add a new asset”

4.2) In the pop-up window, click "Create a blank file", then choose .css and enter “custom-fields-accordions.scss” and click Add asset

4.3) Copy and paste this code to your newly created asset and click save.

Tip: The code in this file determines the look and feel of your accordions. This is only a starting point. It will produce simple accordions and inherits the rest from your theme. If you want to change the look of your accordions, this is the place to do it.

5.) Create a New Asset called "custom-fields-accordions.js"

Go through the same instructions as Step 4 and paste this code in the newly created .js asset. Be sure to click "Save" on this file as well.

6.) Update theme.liquid to add this code snippet to the <head> section.

7.) Create a new Liquid Template product field then paste this code in the Snippet Editor and save.

This code is generic. You won't need to make any changes to it.