FAQ Page Tittle for Category Seperation? (Launch Theme)

Solved
Highlighted
Excursionist
12 1 0

Hi there,

I wanted to add a title to my FAQ page for organizing my questions a little better (For instance "Shipping", "Problems", etc...)

I added a h1 code in the specific section which seems to work but it does get applied to all my questions, whereas I wanted to apply it only to the first question as an organizing title. I was wondering if there's anything I could add to the code so it does get applied to the first accordion only. Here's the code I added:

{% if section.settings.title != blank %}
        <div class="module-header page-header">
          {% if section.settings.title != blank %}
            <h1 class="module-title accordion-inline-title">
              {{ section.settings.title | escape }}
            </h1>
          {% endif %}

Applied to Section:

        {% for block in section.blocks %}
{% if section.settings.title != blank %}
        <div class="module-header page-header">
          {% if section.settings.title != blank %}
            <h1 class="module-title accordion-inline-title">
              {{ section.settings.title | escape }}
            </h1>
          {% endif %}
          </div>
          {% endif %}
          {% if block.settings.title != blank and block.settings.text != blank %}

            {% assign is_first = forloop.first %}
            <article class="accordion-item" {{ block.shopify_attributes }}>
              <h1 class="accordion-item-title">
                <a
                  class="{% if is_first %}accordion-active{% endif %}"
                  href="#"
                  data-accordion-trigger="accordion-{{ block.id }}">
                  <span class="accordion-inline-title">
                    {{ block.settings.title | escape }}
                  </span>
                  <span class="icon icon-angle-down accordion-item-icon"></span>
                </a>
              </h1>

Here's also an image of the issue: https://imgur.com/a/DkNXzqA

Any tips highly appreciated =)


0 Likes
Highlighted
Shopify Expert
154 17 22

This is an accepted solution.

Looks like you want to place the title code outside of the {% for %} loop:

 

{% if section.settings.title != blank %}
        <div class="module-header page-header">
          {% if section.settings.title != blank %}
            <h1 class="module-title accordion-inline-title">
              {{ section.settings.title | escape }}
            </h1>
          {% endif %}
          </div>
          {% endif %}
{% for block in section.blocks %}
          {% if block.settings.title != blank and block.settings.text != blank %}

            {% assign is_first = forloop.first %}
            <article class="accordion-item" {{ block.shopify_attributes }}>
              <h1 class="accordion-item-title">
                <a
                  class="{% if is_first %}accordion-active{% endif %}"
                  href="#"
                  data-accordion-trigger="accordion-{{ block.id }}">
                  <span class="accordion-inline-title">
                    {{ block.settings.title | escape }}
                  </span>
                  <span class="icon icon-angle-down accordion-item-icon"></span>
                </a>
              </h1>
W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
1 Like
Highlighted
Excursionist
12 1 0

Absolute Legend Mate! Thank you very much for solving this for me! =)

0 Likes
Highlighted
New Member
2 0 0

Hey there (:

I´am currently struggling wiht the same issue you had.

I would like to add Sections to the FAQ page so I am able to sort the questions to the specific topics. However I am completely new to shopify and I got no know-how in HTML and CSS.

Could you provide me a step-by-step guide to insert sections to the FAQ page?

Thanks in advance!

0 Likes
Highlighted
Excursionist
12 1 0

Hey Newmayer,

Sorry, can't really help you on this as I don't have much experience either but basically last time I had to look at my theme and find what was used in other sections. Once I figured out how everything is used I added it to my current FAQ section (some modifications were made).  If you happen to use the same theme (Launch) as me though, I can pass on my edits.

0 Likes
Highlighted
New Member
2 0 0

Hey,

thanks for your reply! Yes I am using the Launch Theme too! That would be cool, then I may be able to do it!

0 Likes