FAQ Seite für Theme "Craft" einrichten

[Mel40]

Hallo liebe Community,

ich versuche aktuell einen Onlineshop zu bauen und benutze das "Craft"-Theme, da ich selber Handwerkskunst vertreiben möchte und dieses Theme genau meinen Vorstellungen entspricht 🙂

Nun möchte ich gern eine ansprechende FAQ Seite hinzufügen, die so aussieht ungefähr:

In der Suche wird immer wieder nach dieser Art von FAQ gefragt aber ich konnte bisher keine Lösung finden. 

Ich kann in der Theme Vorlage keine FAQ-Seitenansicht auswählen.

Und ich möchte auf keinen Fall die FAQ als Fließtext untereinander schreiben.

Wie kann ich so eine Seite einrichten? Oder gibt es dafür eine App?

Es soll eine separate FAQ Seiten werden, die man über die Fußzeile anklicken kann.

Vielen lieben Dank für eure Hilfe!

[Gabe · Accepted solution]

Hey @Mel40 

Haben dir die viele FAQ Apps nicht helfen können (klicke in die App Demos um die FAQ in Action zu sehen)? Die meisten kommen sogar mit einem FREE Plan! Und die vielen hilfreichen Threads zum Thema FAQ Seite einrichten?

Wenn du es aber doch lieber DIY machen möchtest

Um eine ansprechende FAQ-Seite im "Craft"-Theme von Shopify zu erstellen, die ähnlich aussieht wie das Bild, das du hochgeladen hast, kannst du folgende Schritte durchführen:

Schritt 1: Erstelle eine neue Seite für die FAQs

1. Gehe zu deinem Shopify-Admin-Dashboard.
2. Navigiere zu Online-Shop > Seiten.
3. Klicke auf „Seite hinzufügen“.
4. Gib der Seite einen Titel, z.B. „FAQ“ oder „Häufig gestellte Fragen“.
5. Lasse den Inhalt zunächst leer und speichere die Seite.

Schritt 2: Erstelle einen Abschnitt für die FAQ

Da das Craft-Theme möglicherweise keine vorgefertigte FAQ-Vorlage bietet, musst du benutzerdefinierten Code verwenden, um einen FAQ-Abschnitt zu erstellen.

1. Gehe zu Online-Shop > Themes > Aktionen > Code bearbeiten.
2. Füge im Verzeichnis „Sections“ eine neue Datei hinzu und nenne sie „faq-section.liquid“.

Beispielcode für die faq-section.liquid

Füge den folgenden Code ein, um einen einfachen FAQ-Abschnitt mit zusammenklappbaren Antworten zu erstellen:

Spoiler

<section id="faq" class="faq-section">
  <div class="page-width">
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
      {% for block in section.blocks %}
        <div class="faq-item">
          <h3 class="faq-question">{{ block.settings.question }}</h3>
          <div class="faq-answer">
            {{ block.settings.answer }}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "FAQ Section",
  "settings": [],
  "blocks": [
    {
      "type": "faq",
      "name": "FAQ",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question"
        },
        {
          "type": "textarea",
          "id": "answer",
          "label": "Answer"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "category": "Custom"
    }
  ]
}
{% endschema %}

{% style %}
.faq-section {
  padding: 20px 0;
}
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  margin-bottom: 20px;
}
.faq-question {
  font-weight: bold;
  cursor: pointer;
}
.faq-answer {
  display: none;
  padding-top: 10px;
}
.faq-question.active + .faq-answer {
  display: block;
}
{% endstyle %}

{% javascript %}
document.addEventListener('DOMContentLoaded', function() {
  var questions = document.querySelectorAll('.faq-question');
  questions.forEach(function(question) {
    question.addEventListener('click', function() {
      this.classList.toggle('active');
      var answer = this.nextElementSibling;
      if (answer.style.display === 'block') {
        answer.style.display = 'none';
      } else {
        answer.style.display = 'block';
      }
    });
  });
});
{% endjavascript %}

Schritt 3: Füge den FAQ-Abschnitt zur Seite hinzu

1. Gehe zu Online-Shop > Themes > Aktionen > Code bearbeiten.
2. Öffne die page.liquid oder eine benutzerdefinierte Seitenvorlage, die du für die FAQ-Seite verwenden möchtest.
3. Füge den Abschnitt hinzu:

{% section 'faq-section' %}

Schritt 4: FAQ-Abschnitt anpassen

1. Gehe zurück zu deinem Shopify-Admin-Dashboard.
2. Navigiere zu Online-Shop > Themes > Anpassen.
3. Wähle die FAQ-Seite aus dem Dropdown-Menü.
4. Füge den neuen FAQ-Abschnitt hinzu und fülle die Fragen und Antworten aus.

Alternative: Apps verwenden

Falls du eine einfachere Lösung ohne Codeänderungen bevorzugst, gibt es mehrere Apps im Shopify App Store, die dir helfen können, eine FAQ-Seite zu erstellen:

• HelpCenter – Build an Attractive FAQs Page: Eine benutzerfreundliche App zur Erstellung von FAQ-Seiten.
• EasySlide Accordion tabs & FAQ: Diese App ermöglicht es, FAQ-Abschnitte in einem Akkordeon-Stil zu erstellen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Mel40]

Hallo @Gabe vielen vielen Dank für die ausführliche Antwort! 🤗

Das hilft mir sehr weiter und damit habe ich es hinbekommen!

Dankeschön!

[Gabe]

@Mel40