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?

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

Passend dazu: Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Passend dazu: Startseiten-Sections in Shopify hinzufügen.