FAQ Page Tittle for Category Seperation? (Launch Theme)

Solved
Highlighted
Tourist
11 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

Success.

Shopify Expert
154 17 20

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
Tourist
11 1 0

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

0 Likes