So erstellen Sie einen neuen Sektionstyp in Shopify von Grund auf (2026)

Das Wichtigste in Kürze

• Ein neuer Section-Typ ist eine Liquid-Datei im sections/-Ordner mit einer HTML-Struktur, einem {% schema %}-Block und Presets, damit er im “Abschnitt hinzufügen”-Menü erscheint.
• Dieser Guide zeigt, wie man eine komplette Testimonial-Section mit bearbeitbarer Überschrift, Spaltenanzahl und wiederholbaren Testimonial-Blöcken (Zitat, Autor, Bewertung) erstellt.
• "max_blocks" begrenzt, wie viele Blöcke Händler hinzufügen können. "min_blocks" erfordert ein Minimum.
• Sobald die Section veröffentlicht ist, erscheint sie im Theme-Editor für jede Seite, die Sections erlaubt.

Ein neuer Section-Typ wird Teil der Section-Bibliothek deines Themes – bereit, um zu jedem Seitentemplate hinzugefügt zu werden, das Sections unterstützt. Dieser Guide zeigt dir Schritt für Schritt, wie du eine komplette, direkt einsetzbare Testimonial-Section von Grund auf neu erstellst.

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.

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

„Type“ im Kontext von Sections bezieht sich auf Block-Types innerhalb einer Section (wie der Block "type": "testimonial" oben) oder den Section-Type selbst. Du fügst neue Section-Types hinzu, indem du neue Liquid-Dateien in sections/ erstellst. Du fügst neue Block-Types hinzu, indem du Einträge zum Array "blocks" im Schema einer Section hinzufügst.

FAQ

Verwandt: Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Verwandt: Startseiten-Sections in Shopify hinzufügen.