Hello Folks,
I have created a custom FAQ section, basically, I have copied the FAQ code from another Shopify theme and the same code pasted it to my theme, I have copied almost the same but it’s not working, and even no any error show, now I’m confused what should I do here please help me with this. below is my code.
Path : Templates → page.faqs.liquid
<div class="container">
{%- section 'page-faqs' -%}
</div>
Path : Sections → page-faqs.liquid
<style>
.row-faqs {
padding-top: 20px
}
.section-faqs__subheading {
max-width: 800px;
margin: 0 auto
}
.layout-1 .faq-question {
padding: 20px;
background: var(--g-cta-button);
margin: 0 0 10px;
font-weight: 700;
cursor: pointer;
color: #fff;
position: relative
}
.layout-1 .faq-question:after {
content: "-";
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.faq-answer {
padding: 20px;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease
}
.layout-2 .faq-question {
padding: 10px;
margin: 0 0 10px;
font-weight: 700;
cursor: pointer;
position: relative;
color: #222;
line-height: 40px
}
.layout-2 .faq-question:after {
content: "-";
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 2px solid;
border-radius: 50%;
float: left;
margin-right: 10px
}
.layout-3 .faq-question {
padding: 20px;
margin: 0 0 10px;
font-weight: 700;
cursor: pointer;
position: relative;
padding-right: 60px;
color: #222
}
.layout-3 .faq-question:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: -20px;
border: 2px solid
}
.faq-question.collapsed:after {
content: "+"
}
.faqs-form input,
.faqs-form textarea {
width: 100%;
margin-bottom: 15px
}
.faqs-form textarea {
height: 150px
}
.main-content {
padding-top: 40px
}
.faqs-form.is_stuck {
padding-top: 20px
}
</style>
<!-- page-faqs.liquid -->
<div class="section-faqs {{section.settings.layout}}">
{% if section.settings.heading != blank %}
<h3 class="section-faqs__heading text-center">
{{ section.settings.heading }}
</h3>
{% endif %}
{% if section.settings.subheading != blank %}
<div class="section-faqs__subheading text-center">
{{ section.settings.subheading }}
</div>
{% endif %}
<div class="row row-faqs">
<div class="col-sm-12 col-md-5 col-lg-4 col-faqs">
{% form 'contact', class: 'faqs-form js-stick-parent' %}
{% if section.settings.heading_faqs != blank %}
<h4 class="my-3">
{{ section.settings.heading_faqs }}
</h4>
{% endif %}
<input
type="text"
id="ContactFormName"
name="contact[name]"
placeholder="{{ 'contact.form.name' | t }}"
value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}"
>
<input
type="email"
id="ContactFormEmail"
name="contact[email]"
placeholder="{{ 'contact.form.email' | t }}"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
>
<textarea
rows="10"
id="ContactFormMessage"
name="contact[body]"
placeholder="{{ 'contact.form.question' | t }}"
>{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn btn-theme gradient-theme py-3" value="{{ 'contact.form.send_question' | t }}">
{% if form.posted_successfully? %}
<p class="form-success">
{{ 'contact.form.question_success' | t }}
</p>
{% endif %}
{{ form.errors | default_errors }}
{% endform %}
</div>
<div class="col">
<div class="faqs-content">
{% for block in section.blocks %}
<div class="faq-question collapsed" data-toggle="collapse" data-target="#faq-{{block.id}}">
{{ block.settings.title | default: 'Question' }}
</div>
<div id="faq-{{block.id}}" class="collapse faq-answer">
{{ block.settings.answer | default: 'Answer' }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "FAQs",
"class": "page-section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Title",
"default": "Frequently Asked Questions"
},
{
"type": "textarea",
"id": "subheading",
"label": "Subtitle",
"default": "Close contact with customers by frequently asked questions"
},
{
"type": "text",
"id": "heading_faqs",
"label": "Title FAQs form",
"default": "Ask Your Questions"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "layout-1",
"options": [
{
"value": "layout-1",
"label": "Layout 1"
},
{
"value": "layout-2",
"label": "Layout 2"
},
{
"value": "layout-3",
"label": "Layout 3"
}
]
}
],
"blocks": [
{
"type": "faq",
"name": "Faq",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Question"
},
{
"type": "textarea",
"id": "answer",
"label": "Answer"
}
]
}
]
}
{% endschema %}
Below is a Screenshot of FAQ content that is already opened.
