So fügst du einen neuen Section-Typ in Shopify von Grund auf hinzu (2026)

Die wichtigsten Punkte

• Ein neuer Abschnittstyp (Section Type) ist eine Liquid-Datei im Ordner sections/ mit einer HTML-Struktur, einem {% schema %}-Block und Presets, um im Menü “Abschnitt hinzufügen” zu erscheinen.
• Diese Anleitung erstellt eine komplette Testimonial-Section 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; es gibt keine Mindesteinstellung, also berücksichtige eine leere Section im Markup.
• Sobald sie veröffentlicht ist, erscheint die Section im Theme-Editor für jede Seite, die Sections zulässt.

Um einen neuen Abschnittstyp in Shopify hinzuzufügen, erstelle eine .liquid-Datei im Ordner sections/ deines Themes mit dem Markup, einem {% schema %}-Block und mindestens einem Preset. Sie erscheint dann im Menü “Abschnitt hinzufügen” des Theme-Editors auf jedem Seitentemplate, das Sections unterstützt. Diese Anleitung baut eine komplette Testimonial-Section von Grund auf auf.

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

Erstelle eine neue .liquid-Datei im Ordner sections/ deines Themes. Gib ihr einen beschreibenden 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.

Informationen zur Liquid-Logik innerhalb von Sections findest du unter Benutzerdefinierte Liquid-Logik in Shopify hinzufügen.

Die Section planen

Bevor du Code schreibst, solltest du definieren, was die Section benötigt:

Einstellungen auf Section-Ebene (global):

• Überschriftentext
• Text der Unterüberschrift
• Anzahl der Spalten auf dem Desktop (2 oder 3)

Einstellungen auf Block-Ebene (pro Testimonial):

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

Verhalten:

• Maximal 12 Testimonials
• Standard-Preset enthält 3 Beispiel-Testimonials

Um eine solche Section zu erstellen, ohne den Code selbst zu schreiben, schau dir den Fudge Page Builder an.

Schritt 1 — Erstellen der Section-Datei

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

Schritt 2 — HTML-Struktur schreiben

<div 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 }} out of 5 stars">
              {% 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 | image_url: width: 80, height: 80, 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>
</div>

Schritt 3 — Schema schreiben

{% schema %}
{
  "name": "Testimonials Grid",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "What our customers say"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Trusted by thousands of happy customers"
    },
    {
      "type": "select",
      "id": "columns",
      "label": "Columns on desktop",
      "options": [
        { "value": "2", "label": "2 columns" },
        { "value": "3", "label": "3 columns" }
      ],
      "default": "3"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "range",
          "id": "rating",
          "label": "Star rating",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "type": "textarea",
          "id": "quote",
          "label": "Quote",
          "default": "This product completely changed the way I work. Couldn't be happier."
        },
        {
          "type": "image_picker",
          "id": "author_photo",
          "label": "Author photo"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Author name",
          "default": "Jane Smith"
        },
        {
          "type": "text",
          "id": "author_title",
          "label": "Author title or company",
          "default": "Verified Customer"
        }
      ]
    }
  ],
  "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 %}

Für Skripte, die zu einer Section gehören, siehe Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Schritt 5 — Testen

Gehe nach dem Speichern zu Onlineshop → Themes → Anpassen (Customize). Klicke auf einer beliebigen Seite auf „Abschnitt hinzufügen“. Deine „Testimonials Grid“-Section sollte in der Liste erscheinen. Füge sie hinzu und bestätige, dass das Einstellungs-Panel richtig funktioniert.

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

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

Um die fertige Section auf deiner Startseite zu platzieren, siehe Startseiten-Sections in Shopify hinzufügen.

FAQ