FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

FAQ Seite für Theme "Craft" einrichten

Gelöst

FAQ Seite für Theme "Craft" einrichten

Mel40
Besucher
2 0 0

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:

Mel40_0-1719583771792.png

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!

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff (Retired)
19233 3006 4433

Erfolg.

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff (Retired)
19233 3006 4433

Erfolg.

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Mel40
Besucher
2 0 0

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
Shopify Staff (Retired)
19233 3006 4433

@Mel40 

 

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog