FAQ section collection page

[ChrisW3]

I would like to add an FAQ section to the bottom of one of our collection pages. 

Is there any template code I can use for this. It would be for one collection page only so can be static content 

[Markit-Themes]

Hi ChrisW3,

This is faq section code (sections/faqs.liquid):

<!-- FAQs -->
<div class="faq">
  <!-- Container -->
  <div class="container">
    <!-- Second container -->
    <div class="faq__container">
      <!-- Title -->
      <h1 class="faq__title">{{ section.settings.heading }}</h1>
      <!-- End title -->
      {%- for block in section.blocks -%}
        {% if block.type == 'section_parent' %}
          {% assign block_id = block.id %}
          {% assign turn_on_blocks = false %}
          <!-- Section -->
          <div class="faq-section d-flex">
            <!-- Title -->
            <h4 class="faq-section__title">{{ block.settings.heading }}</h4>
            <!-- End title -->
            <!-- Content -->
            <div class="faq-section__content">
              {%- for block in section.blocks -%}
                {% if turn_on_blocks == true %}
                  {% if block.type == 'question' %}
                    <!-- Question -->
                    <div class="faq-question d-flex">
                      <!-- Question -->
                      <div class="faq-question__question">{{ block.settings.heading }}</div>
                      <!-- End question -->
                      <!-- Answer -->
                      <div class="faq-question__answer">
                        {{ block.settings.content }}
                      </div>
                      <!-- End answer -->
                    </div>
                    <!-- End question -->
                  {% endif %}
                {% endif %}
                {% if block.id == block_id %}
                  {% assign turn_on_blocks = true %}
                {% else %}
                  {% if block.type == 'section_parent' %}
                    {% assign turn_on_blocks = false %}
                  {% endif %}
                {% endif %}
              {%- endfor -%}
            </div>
          </div>
        {% endif %}
      {%- endfor -%}
      {% if section.settings.bottom_text != '' %}
        <!-- Faq link -->
        <div class="faq-link">
          {{ section.settings.bottom_text }}
        </div>
        <!-- End faq link -->
      {% endif %}
    </div>
    <!-- End second container -->
  </div>
  <!-- End container -->
</div>
<!-- End FAQs -->

{% schema %}
{
  "name": "Faq block",
  "settings": [
    {
      "type": "header",
      "content": "Design"
    },
    {
      "type": "select",
      "id": "container_type",
      "label": "Container type",
      "default": "1",
      "options": [
        {
          "label": "Type 1",
          "value": "1"
        },
        {
          "label": "Type 2",
          "value": "2"
        },
        {
          "label": "Type 3",
          "value": "3"
        },
        {
          "label": "Type 4",
          "value": "4"
        },
        {
          "label": "Type 5",
          "value": "5"
        }
      ]
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "textarea",
      "id": "bottom_text",
      "label": "Bottom text"
    }
  ],
  "blocks": [
    {
      "type": "section_parent",
      "name": "-- Section (container)",
      "settings": [
        {
          "type": "textarea",
          "id": "heading",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "question",
      "name": "Question",
      "settings": [
        {
          "type": "textarea",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content"
        }
      ]
    }
  ]
}
{% endschema %}

This is css code for faq section:

/* ==========================================================================
   17.10 #FAQS PAGE
   ========================================================================== */
.faq {
  padding: 80px 0px 210px 0px; }
  @media (max-width: 991px) {
    .faq {
      padding: 50px 0px 80px 0px; } }

.faq__container {
  max-width: 1170px;
  margin: 0px auto; }

/* Title */
.faq__title {
  font-size: 48px;
  text-align: center;
  padding: 0px 0px 90px 0px;
  margin: 0px; }
  @media (max-width: 1098px) {
    .faq__title {
      font-size: 40px; } }
  @media (max-width: 991px) {
    .faq__title {
      font-size: 26px;
      padding-bottom: 50px; } }

/* Section */
@media (max-width: 991px) {
  .faq-section {
    flex-wrap: wrap; } }

.faq-section + .faq-section {
  border-top: 1px solid #e1e1e1;
  margin: 85px 0px 0px 0px;
  padding: 65px 0px 0px 0px; }
  @media (max-width: 991px) {
    .faq-section + .faq-section {
      margin-top: 50px;
      padding-top: 50px; } }

.faq-section__title {
  padding: 0px 30px 0px 0px;
  margin: 0px;
  font-size: 30px;
  line-height: 1;
  width: 23%;
  min-width: 23%; }
  @media (max-width: 991px) {
    .faq-section__title {
      width: 100%;
      min-width: 100%;
      padding: 0px 0px 30px 0px;
      font-size: 24px; } }

.faq-section__content {
  width: 100%; }

.faq-question__question {
  width: 47%;
  min-width: 47%;
  padding: 0px 30px 0px 0px;
  font-size: 16px;
  font-weight: 500;
  color: #000; }
  @media (max-width: 991px) {
    .faq-question__question {
      width: 100%;
      min-width: 100%; } }

.faq-question__answer {
  width: 53%;
  font-size: 14px;
  line-height: 24px;
  color: #999999; }
  @media (max-width: 991px) {
    .faq-question__answer {
      width: 100%; } }

.faq-question {
  margin-top: 5px; }
  @media (max-width: 991px) {
    .faq-question {
      flex-wrap: wrap; } }

.faq-question + .faq-question {
  margin-top: 35px; }

/* Link */
.faq-link {
  border-top: 1px solid #e1e1e1;
  margin-top: 90px;
  padding-top: 125px;
  text-align: center;
  font-size: 30px;
  line-height: 1.2;
  color: #000; }
  @media (max-width: 991px) {
    .faq-link {
      margin-top: 60px;
      padding-top: 60px;
      font-size: 20px; } }
  .faq-link a {
    font-weight: 600;
    color: #304650;
    display: inline-block;
    position: relative; }
    .faq-link a:before {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: #304650; }

Regards,

Markit-Themes

[ChrisW3]

Thank you. How do I then add it to pages and edit its content?

[ChrisW3]

Does anyone know how to add this section to my collection template section so I can then edit it?