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

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?

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

Planung der Sektion

Bevor Sie Code schreiben, definieren Sie, was die Sektion benötigt:

Einstellungen auf Sektionsebene (global):

• Überschrift (Heading)
• Unterüberschrift (Subheading)
• 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)
• Foto des Autors (optional)

Verhalten:

• Maximal 12 Testimonials
• Minimum 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?

„Typ“ bezieht sich im Kontext von Sektionen entweder auf Blocktypen innerhalb einer Sektion (wie der oben gezeigte Block "type": "testimonial") oder auf den Sektionstyp selbst. Sie fügen neue Sektionstypen hinzu, indem Sie neue Liquid-Dateien in sections/ erstellen. Neue Blocktypen fügen Sie hinzu, indem Sie Einträge zum "blocks"-Array im Schema einer Sektion hinzufügen.