So erstellen Sie einen benutzerdefinierten Shopify-Abschnitt von Grund auf (Schritt-für-Schritt-Anleitung)

Shopifys Online Store 2.0 hat die Art und Weise verändert, wie Händler ihre Shops anpassen. Mit benutzerdefinierten Sektionen können Sie wiederverwendbare, flexible Komponenten erstellen, die Händler direkt im Theme Editor hinzufügen, entfernen und anpassen können – ohne jedes Mal Code bearbeiten zu müssen.

Ob Sie ein Hero-Banner, einen FAQ-Bereich, eine Bildergalerie, einen Testimonial-Slider oder eine Produktpräsentation erstellen – das Verständnis der Entwicklung von Shopify-Sektionen ist eine grundlegende Fähigkeit für jeden Shopify-Entwickler.

In diesem Leitfaden führen wir Sie durch den vollständigen Prozess der Erstellung einer benutzerdefinierten Shopify-Sektion von Grund auf mit Liquid, HTML, CSS, JavaScript und den Schema-Einstellungen von Shopify.

Warum benutzerdefinierte Shopify-Sektionen erstellen?

Benutzerdefinierte Sektionen bieten mehrere Vorteile:

• Größere Designflexibilität
• Bessere Shop-Performance im Vergleich zu vielen Drittanbieter-Apps
• Einfachere Anpassung für Händler
• Wiederverwendbare Komponenten auf mehreren Seiten
• Verbesserte Benutzererfahrung und Conversion-Raten

Für Shopify-Agenturen und -Entwickler helfen benutzerdefinierte Sektionen außerdem dabei, einzigartige Shopfronts zu erstellen, die sich von der Konkurrenz abheben.

Shopify-Sektionen verstehen

Eine Shopify-Sektion ist ein modularer Inhaltblock, der über den Theme Editor angepasst werden kann.

Zu den gängigen Beispielen gehören:

• Hero-Banner
• Hervorgehobene Produkte
• Testimonials
• FAQs
• Bildergalerien
• Video-Sektionen
• Kollektionspräsentationen
• Werbebanner

Mit Online Store 2.0 können Sektionen auf fast jeder Seite verwendet werden, was die Shop-Anpassung leistungsfähiger denn je macht.

Schritt 1: Eine neue Sektionsdatei erstellen

Navigieren Sie zu:

Online Store → Themes → Edit Code → Sections

Erstellen Sie eine neue Datei mit dem Namen:

custom-hero.liquid

Diese Datei wird das Markup, Styling, die Einstellungen und die Funktionalität für Ihre Sektion enthalten.

Schritt 2: Das Markup der Sektion erstellen

Fügen Sie den folgenden Liquid-Code ein:

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

Dies ermöglicht es, Inhalte dynamisch über den Theme Editor zu steuern.

Schritt 3: Styling hinzufügen

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

Die Verwendung eines benutzerdefinierten Präfixes wie ck- hilft, CSS-Konflikte mit Themes und Apps zu vermeiden.

Schritt 4: Einstellungen für den Theme Editor erstellen

Fügen Sie den Schema-Bereich ein:

{% schema %}
{
  "name": "CK Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Beschreibung"
    }
  ],
  "presets": [
    {
      "name": "CK Hero Banner"
    }
  ]
}
{% endschema %}

Diese Einstellungen erscheinen automatisch im Theme Editor von Shopify.

Schritt 5: Dynamische Blöcke hinzufügen

Blöcke ermöglichen es Händlern, mehrere Inhaltselemente zu erstellen, ohne programmieren zu müssen.

Beispiel:

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Perfekt für:

• Testimonials
• FAQs
• Teammitglieder
• Funktionen
• Bildergalerien

Schritt 6: Interaktive Funktionen hinzufügen

Für Slider, Akkordeons, Tabs und Animationen:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Benutzerdefinierte Sektion geladen');
});

Bei größeren Projekten verschieben Sie JavaScript in eine eigene Asset-Datei.

Best Practices für die Entwicklung von Shopify-Sektionen

Sektionen modular halten

Entwickeln Sie jede Sektion für einen einzigen Zweck und vermeiden Sie es, zu viele Funktionen in einer Komponente zu kombinieren.

Bilder optimieren

Verwenden Sie die Bildfilter von Shopify:

{{ image | image_url: width: 1200 | image_tag }}

Alles responsiv gestalten

Testen Sie immer auf Desktop-, Tablet- und Mobilgeräten.

Sinnvolle Einstellungen verwenden

Organisieren Sie die Einstellungen übersichtlich, damit Händler Sektionen einfach anpassen können.

Auf Performance achten

Minimieren Sie unnötiges JavaScript und optimieren Sie Assets für schnellere Ladezeiten.

Abschließende Gedanken

Benutzerdefinierte Shopify-Sektionen sind die Grundlage der modernen Shopify-Theme-Entwicklung. Durch die Beherrschung von Liquid, Schema-Einstellungen, responsivem Design und wiederverwendbaren Komponenten können Entwickler hochflexible Shopfront-Erlebnisse erstellen, die Händler mit Leichtigkeit verwalten können.

Bei CodeKanon erstellen wir benutzerdefinierte Shopify-Sektionen, Theme-Anpassungen und Shopify-Apps, die Händlern helfen, schnellere, ansprechendere und konversionsorientierte Shops zu erstellen.

Benötigen Sie Hilfe bei der Shopify-Entwicklung? Kontaktieren Sie CodeKanon, um Ihr nächstes Shopify-Projekt zum Leben zu erwecken.