Key Takeaways

Ein neuer Sektionstyp ist eine Liquid-Datei in sections/ mit einer HTML-Struktur, einem {% schema %}-Block und Presets, um im „Sektion hinzufügen“-Menü zu erscheinen.

Diese Anleitung erstellt eine vollständige Testimonials-Sektion mit bearbeitbarer Überschrift, Spaltenanzahl und sich wiederholenden Testimonial-Blöcken (Zitat, Autor, Bewertung).

"max_blocks" begrenzt, wie viele Blöcke Händler hinzufügen können. "min_blocks" legt ein Minimum fest.

Einmal veröffentlicht, erscheint die Sektion im Theme Editor für jede Seite, die Sektionen zulässt.

Ein neuer Sektionstyp wird Teil der Sektionsbibliothek Ihres Themes — verfügbar zum Hinzufügen zu jedem Seitentemplate, das Sektionen unterstützt. Diese Anleitung führt Sie durch den Aufbau einer vollständigen, produktionsreifen Testimonials-Sektion von Grund auf.

Wie füge ich eine neue Sektion in Shopify hinzu?

Erstelle eine neue .liquid-Datei im Ordner sections/ deines Themes. Gib ihr einen aussagekräftigen Namen im Kebab-Case (z. B. testimonials-grid.liquid). Die Datei muss einen gültigen {% schema %}-Block mit einem "presets"-Key enthalten, damit sie im Menü „Abschnitt hinzufügen“ erscheint.

Verwandt: Eigene Liquid-Logik in Shopify hinzufügen.

Planung der Sektion

Bevor du mit dem Coden beginnst, definiere, was der Abschnitt benötigt:

Verwandt: Fudge Page Builder.

Einstellungen auf Abschnittsebene (global):

Überschriftstext
Unterreberschriftstext
Anzahl der Spalten auf dem Desktop (2 oder 3)

Einstellungen auf Blockebene (pro Testimonial):

Zitat (der Testimonial-Text)
Name des Autors
Titel/Rolle des Autors
Sternebewertung (1-5)
Autorenfoto (optional)

Verhalten:

Maximal 12 Testimonials
Mindestens 1 Testimonial
Das Standard-Preset enthält 3 Beispiel-Testimonials

Schritt 1 — Erstellen der Sektionsdatei

Öffnen Sie den Code-Editor → Ordner sections/ → neue Datei hinzufügen: testimonials-grid.liquid.

Schritt 2 — HTML-Struktur schreiben

<section class="testimonials-grid section-{{ section.id }}" id="section-{{ section.id }}">
  <div class="page-width">

    {% if section.settings.heading != blank %}
      <h2 class="testimonials-grid__heading">{{ section.settings.heading }}</h2>
    {% endif %}

    {% if section.settings.subheading != blank %}
      <p class="testimonials-grid__subheading">{{ section.settings.subheading }}</p>
    {% endif %}

    <div class="testimonials-grid__grid testimonials-grid__grid--{{ section.settings.columns }}-col">

      {% for block in section.blocks %}
        <div class="testimonials-grid__item" {{ block.shopify_attributes }}>

          {% if block.settings.rating > 0 %}
            <div class="testimonials-grid__stars" aria-label="{{ block.settings.rating }} von 5 Sternen">
              {% for i in (1..5) %}
                <span class="testimonials-grid__star {% if i <= block.settings.rating %}testimonials-grid__star--filled{% endif %}">&#9733;</span>
              {% endfor %}
            </div>
          {% endif %}

          {% if block.settings.quote != blank %}
            <blockquote class="testimonials-grid__quote">
              {{ block.settings.quote }}
            </blockquote>
          {% endif %}

          <div class="testimonials-grid__author">
            {% if block.settings.author_photo != blank %}
              <img
                src="{{ block.settings.author_photo | img_url: '80x80', crop: 'center' }}"
                alt="{{ block.settings.author_name }}"
                class="testimonials-grid__author-photo"
                loading="lazy"
                width="40"
                height="40"
              />
            {% endif %}
            <div>
              {% if block.settings.author_name != blank %}
                <p class="testimonials-grid__author-name">{{ block.settings.author_name }}</p>
              {% endif %}
              {% if block.settings.author_title != blank %}
                <p class="testimonials-grid__author-title">{{ block.settings.author_title }}</p>
              {% endif %}
            </div>
          </div>

        </div>
      {% endfor %}

    </div>
  </div>
</section>

Schritt 3 — Schema schreiben

{% schema %}
{
  "name": "Testimonials Grid",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift",
      "default": "Das sagen unsere Kunden"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Unterüberschrift",
      "default": "Tausende glückliche Kunden vertrauen uns"
    },
    {
      "type": "select",
      "id": "columns",
      "label": "Spalten auf Desktop",
      "options": [
        { "value": "2", "label": "2 Spalten" },
        { "value": "3", "label": "3 Spalten" }
      ],
      "default": "3"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "range",
          "id": "rating",
          "label": "Sternebewertung",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "type": "textarea",
          "id": "quote",
          "label": "Zitat",
          "default": "Dieses Produkt hat meine Arbeitsweise komplett verändert. Ich könnte nicht zufriedener sein."
        },
        {
          "type": "image_picker",
          "id": "author_photo",
          "label": "Foto des Autors"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Name des Autors",
          "default": "Max Mustermann"
        },
        {
          "type": "text",
          "id": "author_title",
          "label": "Titel oder Firma des Autors",
          "default": "Verifizierter Kunde"
        }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    {
      "name": "Testimonials Grid",
      "blocks": [
        { "type": "testimonial" },
        { "type": "testimonial" },
        { "type": "testimonial" }
      ]
    }
  ]
}
{% endschema %}

Schritt 4 — CSS hinzufügen

{% stylesheet %}
  .testimonials-grid {
    padding: 60px 0;
  }

  .testimonials-grid__heading {
    text-align: center;
    margin-bottom: 8px;
  }

  .testimonials-grid__subheading {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
  }

  .testimonials-grid__grid {
    display: grid;
    gap: 24px;
  }

  .testimonials-grid__grid--2-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid__grid--3-col {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 767px) {
    .testimonials-grid__grid--2-col,
    .testimonials-grid__grid--3-col {
      grid-template-columns: 1fr;
    }
  }

  .testimonials-grid__item {
    background: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
  }

  .testimonials-grid__star--filled {
    color: #f5a623;
  }

  .testimonials-grid__quote {
    font-style: italic;
    margin: 12px 0 16px;
  }

  .testimonials-grid__author {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .testimonials-grid__author-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .testimonials-grid__author-name {
    font-weight: bold;
    margin: 0;
  }

  .testimonials-grid__author-title {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
{% endstylesheet %}

Schritt 5 — Testen

Gehen Sie nach dem Speichern zu Online Store → Themes → Anpassen. Klicken Sie auf einer beliebigen Seite auf „Sektion hinzufügen“. Ihre „Testimonials Grid“-Sektion sollte in der Liste erscheinen. Fügen Sie sie hinzu und bestätigen Sie, dass das Einstellungsmenü korrekt funktioniert.

Erstellen Sie eine benutzerdefinierte Shopify-Sektion, indem Sie sie Fudge beschreiben.

Try Fudge for Free

Wie füge ich einen neuen Typ in Shopify hinzu?

„Type“ bezieht sich im Kontext von Abschnitten entweder auf Block-Typen innerhalb eines Abschnitts (wie der Block "type": "testimonial" oben) oder auf den Abschnittstyp selbst. Du fügst neue Abschnittstypen hinzu, indem du neue Liquid-Dateien in sections/ erstellst. Neue Block-Typen fügst du hinzu, indem du Einträge zum "blocks"-Array im Schema eines Abschnitts ergänzt.