We’re going to divide this section into three (3) parts:
Creating the JSON template for the FAQs page
Creating the page in the admin
Creating the accordions
Let’s start by creating the JSON template for the FAQs page.
Create the JSON template
Open your Shopify store admin page. Then, access the Online Store’s theme page, and there open the Code Editor by clicking the actions dropdown menu and there select Edit Code
First, open the Templates folder and click the Add a new template file. Then, for the “Create a new template for” select page. Then, for the “Template type“, make sure you’re using JSON. And lastly, name the template file page.faq.
Once the file is created, apply the following code:
{
"sections": {
"main": {
"type": "main-page-faq"
}
},
"order": ["main"]
}
open the Sections folder and click the Add a new section file and name the file main-page-faq.
Once the file is created, we’re going to apply the same code that we have from the main-page.liquid section file. But, you can just copy the following code below:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{{ page.title | escape }}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
{% schema %}
{
"name": "FAQs Page",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}
Awesome! Now we have the JSON template and the template section ready. Let’s continue by using them on a new page.
Create the accordions for FAQs
Go back to your main-page-faq section file and update its code to the following:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{{ page.title | escape }}
</h1>
<div class="rte">
{{ page.content }}
</div>
<div class="faq-container">
<div class="tabs">
{% for block in section.blocks %}
{% assign item = block.settings %}
<div class="tab">
<input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox">
<label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label>
<div class="tab-content">{{ item.answer }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% schema %}
{
"name": "FAQ Page",
"tag": "section",
"class": "spaced-section",
"blocks": [
{
"name": "FAQ Item",
"type": "faq",
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "Do you have a question?"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer",
"default": "<p>I have an answer</p>"
}
]
}
]
}
{% endschema %}
The code that we added above should allow you to add blocks to your FAQs page through the customizer page.
Awesome! Now the last thing that we need to do is to use CSS and make the FAQ items an actual accordion. So go back to the code editor and open the Snippets folder, click the Add a new asset. Then, select the Create a blank file and for its name, call it faq-style and make sure the file extension is set to .css.
Once, the file is created, apply the following code:
.faq-checkbox {
position: absolute;
opacity: 0;
z-index: -1;
}
.tabs {
border-radius: 10px;
overflow: hidden;
}
.tab {
width: 100%;
color: white;
overflow: hidden;
}
.tab-label {
width: 100%;
display: flex;
justify-content: space-between;
padding: 1em;
font-weight: bold;
color: white;
}
.tab-label:after {
content: "+";
width: 1em;
height: 1em;
text-align: center;
transition: all 0.5s;
}
.tab-content {
max-height: 0;
padding: 0 1em;
background-color: white;
transition: all 0.5s;
color: black;
}
.tab-content p {
margin: 0;
}
.faq-checkbox:checked + .tab-label:after {
content: "-";
}
.faq-checkbox:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
Now, if you open your FAQs page, you should have the following:
No comments: