The Collapsible content section makes it possible for you to add collapsible content anywhere within your theme, for example an FAQ.
​
To activate this section you first have to add the section to your page. This can be done in a few small steps.
​
1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Collapsible content', then click on 'Collapsible content'
​

3) Done, your Collapsible content section is added.
​

The general settings contains the settings for the styling and layout of the Collapsible content section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

Content position:
By default when you add the section the position is selected as Next to collapsible content. You can change it from here select the position of the heading text, choose between center or left.

Image/Video:

You can now have an image or video underneath collapsible section title/content. You can set the width of the image and if you're using a video you can display a play button.

Select the size of the first and second heading from a range of small to extra large.

Enable custom styling:
You can enable this checkbox to overwrite the heading color scheme and font weight.

Heading font:

Choose the font family for your headings.

Content:

Add some content in your collapsible content section.

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

By default, there are 3 items added, you can edit them, remove them or add more items.
​
​1. Editing the collapsible content items
To edit the collapsible row items you simply click on the collapsible content item you want to edit in your sidebar on the left of your screen.

After you clicked the collapsible row item, on the right of your screen the following sidebar will open.
​

Heading:
Set the heading of the content, for example 'When do I get free shipping?'
​
​Icon:
Select one of the preconfigured icons to show or leave on no icon to show no icon.

Custom image:
If you don't want to use any of the preconfigured icons, you can upload you custom image here.

Use .svg format:
Don't want to use a .png or .jpg file for the custom image? You can use a .svg file logo as well!
Simply upload your .svg file in 'Files' in the Shopify admin and paste the url to the file in this field. More info on how to upload the file can be found here.

Max. image width:
Configure your custom image width here. You can set it to a maximum of 150px, but because we recommend to use small images the default is set to 25px.

Content:
Set the answer of you question/content here. Its not only used for Q&A's but you can do more, like an about us text.

Row content from page:
Want to load in the content from a page you've made, easy as that! No need to copy and paste. Just select the page here.
​

2. How to remove a collapsible content item?
Don't have that many questions or information to show yet? You can always remove the collapsible row items one by one to fit in your needs.
To remove the collapsible content items you simply click on the collapsible content you want to remove in your sidebar on the left of your screen.

After you clicked the FAQ item, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your FAQ item will be deleted.

3. How to add a collapsible content item?
Do you want to use more collapsible rows? Of course, no worries!
To add FAQ item you simply click on the 'Add collapsible row' button in your sidebar on the left of your screen.

After you clicked on 'Add collapsible row', a new collapsible row will be added. You can edit the collapsible row items like explained in step 1.