Wie Shopify den Wechsel von Produktvarianten ermöglicht
weswoo

Einführung

在电子商务领域，为顾客提供无缝和用户友好的购物体验对于任何在线商店的成功至关重要。其中一个重要方面是允许顾客轻松切换产品的不同变体。无论是不同的尺寸、颜色还是款式，让顾客选择他们喜欢的选项可以极大地增强他们的购物体验并提高转化率。在本文中，我们将探讨如何在 Shopify 中实现产品变体切换，这是一款领先的电子商务平台。

Produktvarianten in Shopify verstehen

Bevor wir uns mit der Implementierung beschäftigen, sollten wir zunächst verstehen, was eine Produktvariante im Kontext von Shopify ist. In Shopify bezieht sich eine Produktvariante auf eine bestimmte Version oder Option eines Produkts. Wenn Sie zum Beispiel T-Shirts verkaufen, könnte jede Variante eine andere Größe oder Farboption darstellen. Jede Variante hat ihre eigenen eindeutigen SKUs, Preise und Lagerbestände.

Shopify bietet integrierte Funktionen zur Verwaltung von Produktvarianten, mit denen Sie verschiedene Optionen für Ihre Produkte einfach erstellen und verwalten können. Für einen reibungslosen und intuitiven Variantenwechsel sind jedoch einige zusätzliche Anpassungen erforderlich.

Schritt 1: Einrichten von Produktvarianten in Shopify

Der erste Schritt besteht darin, die Produktvariante in Ihrem Shopify-Shop einzurichten. Folgen Sie den nachstehenden Schritten:

1. melden Sie sich im Shopify-Administrationsbereich an.

2 Navigieren Sie zum Abschnitt "Produkte".

Wählen Sie das Produkt, dem Sie die Variante hinzufügen möchten.

4. scrollen Sie nach unten zum Abschnitt "Varianten" und klicken Sie auf "Variante hinzufügen".

5. geben Sie Details zu jeder Variante ein, wie SKU, Preis und Lagerbestand.

6 Wiederholen Sie diesen Vorgang für alle Varianten, die Sie anbieten möchten.

Nach dem Einrichten der Variante können Sie mit dem nächsten Schritt fortfahren, um die Funktion des Variantenwechsels zu implementieren.

Schritt 2: Anpassen der Vorlage für die Produktseite

Um den Variantenwechsel auf Produktseiten zu aktivieren, müssen Sie die Produktseitenvorlagen in Ihrem Shopify-Theme anpassen. Im Folgenden finden Sie die Aktionen, die Sie durchführen können:

1 Gehen Sie im Shopify-Administrationsbereich zu Online Stores und klicken Sie auf Themes.

2. suchen Sie das von Ihnen verwendete Thema und klicken Sie auf Aktionen > Code bearbeiten.

3 Suchen Sie in der linken Seitenleiste nach "Abschnitte" > "product-template.liquid" und klicken Sie darauf.

4) Suchen Sie den Code für die Option Varianten anzeigen und wählen Sie ihn aus.

5 Ersetzen Sie den bestehenden Code durch das folgende Codefragment:

"flüssig

{% if product.variants.size > 1 %}

<select id=”variant-switcher”>

{% for variant in product.variants %}

{{ variant.title }}

{% endfor %}

</select>

{% endif %}

“`

Dieser Code erzeugt ein Dropdown-Menü mit allen verfügbaren Varianten des Produkts. Wenn es nur eine Variante gibt, wird die Auswahlliste nicht angezeigt.

Schritt 3: Hinzufügen von JavaScript-Funktionen

Nachdem Sie nun das Dropdown-Menü zum Umschalten zwischen den Varianten zu Ihrer Produktseite hinzugefügt haben, müssen Sie JavaScript-Funktionen hinzufügen, um das Umschalten zwischen den Varianten zu steuern. Das können Sie folgendermaßen tun:

1. in der gleichen Datei "product-template.liquid" den Abschluss `</body>Tags.

2. fügen Sie den folgenden JavaScript-Code vor dem schließenden Tag ein:

"javascript

<script>

document.getElementById('variant-switcher').addEventListener('change', function() {

var variantId = this.value;

Shopify.theme.jsVariantSwitcher.switchVariant(variantId);

});

</script>

“`

Dieser Code fügt dem Dropdown-Menü für den Variantenwechsel einen Ereignislistener hinzu, der eine Funktion auslöst, sobald sich die ausgewählte Variante ändert. Die Funktion `switchVariant()` ist für die Aktualisierung der Informationen auf der Produktseite basierend auf der ausgewählten Varianten-ID verantwortlich.

Schritt 4: Styling und Landschaftsgestaltung

Der letzte Schritt besteht darin, das Dropdown-Menü für Varianten zu gestalten und zu verschönern, damit es mit dem Thema Ihres Shops übereinstimmt. Sie können CSS verwenden, um das Aussehen des Dropdown-Menüs anzupassen. Nachfolgend finden Sie ein Beispiel-Codefragment:

"css

varianten-wechsler {

padding: 10px;

Rahmen: 1px solid ccc;

Rahmen-Radius: 5px;

Schriftgröße: 14px;

Farbe: 333;

Hintergrundfarbe: fff;

}

“`

Passen Sie die Stile an Ihre Marke und das Gesamtbild Ihres Shops nach Ihren Wünschen an.

zu einem Urteil gelangen

Wenn Sie die oben genannten Schritte befolgen, ist die Implementierung der Produktvariantenumschaltung in Shopify relativ einfach. Durch das Einrichten von Produktvarianten, das Anpassen von Produktseitenvorlagen, das Hinzufügen von JavaScript-Funktionen und das Styling können Sie Ihren Kunden ein nahtloses Variantenwechselerlebnis bieten, das ihr Einkaufserlebnis verbessert und die Konversionen erhöht.

FAQ

1. wie erstelle ich eine Produktvariante in Shopify?

Um eine Produktvariante in Shopify zu erstellen, gehen Sie folgendermaßen vor:

- Melden Sie sich beim Shopify-Administrationsbereich an.

- Navigieren Sie zum Abschnitt "Produkte".

- Wählen Sie das Produkt aus, dem Sie die Variante hinzufügen möchten.

- Blättern Sie nach unten zum Abschnitt "Varianten" und klicken Sie auf "Variante hinzufügen".

- Geben Sie die Details zu jeder Variante ein, z. B. SKU, Preis und Lagerbestand.

- Wiederholen Sie diesen Vorgang für alle Varianten, die Sie anbieten möchten.

2. wie kann ich die Produktseitenvorlagen im Shopify-Theme anpassen?

Gehen Sie folgendermaßen vor, um die Produktseitenvorlagen in Ihrem Shopify-Theme anzupassen:

- Gehen Sie im Shopify-Verwaltungsbereich zu Online Stores und klicken Sie auf Themes.

- Suchen Sie das von Ihnen verwendete Thema und klicken Sie auf Aktionen > Code bearbeiten.

- Klicken Sie in der linken Seitenleiste auf "Abschnitte" > "product-template.liquid".

- Suchen Sie den Code für die Option Varianten anzeigen und wählen Sie ihn aus.

- Ersetzen Sie den vorhandenen Code durch den bereitgestellten Codeausschnitt.

3) Wie füge ich eine JavaScript-Funktion hinzu, um den Wechsel von Shopify-Produktvarianten zu handhaben?

Führen Sie die folgenden Schritte aus, um JavaScript-Funktionen für den Wechsel von Shopify-Produktvarianten hinzuzufügen:

- In der Datei "product-template.liquid" finden Sie den Abschluss `</body>Tags.

- Fügen Sie den mitgelieferten JavaScript-Code vor dem schließenden Tag ein.

4. wie man Shopify Product Variant Toggle Dropdown gestalten und verschönern kann?

Um das Dropdown-Menü für die Produktvariante in Shopify zu gestalten und zu verschönern, verwenden Sie CSS, um das Aussehen des Dropdown-Menüs anzupassen. Sie können die Stile nach Bedarf anpassen, damit sie zu Ihrer Marke und dem Gesamtbild Ihres Shops passen.

5. wirkt sich der Wechsel von Produktvarianten in Shopify auf die Suchmaschinenoptimierung aus?

Der Wechsel von Produktvarianten hat im Allgemeinen keine direkten Auswirkungen auf die Suchmaschinenoptimierung. Sie kann sich jedoch indirekt positiv auf die Suchmaschinenoptimierung auswirken, indem sie ein besseres Nutzererlebnis bietet und die Konversionen erhöht. Stellen Sie sicher, dass Ihre Produktseiten und Variantenwechsel-Funktionen gut optimiert sind, um die Sichtbarkeit in den Suchmaschinen und die Platzierungen zu verbessern.

WESWOO - Grenzüberschreitende unabhängige Website-Entwicklungsexperten

Wir unterstützen chinesische Marken bei der Expansion ins Ausland und bieten Ihnen professionelle, unabhängige Dienstleistungen für den Aufbau einer Station und die technische Integration von Shopify Plus. Präzise grenzüberschreitende E-Commerce-Lösungen, die Marken helfen, erfolgreich auf dem globalen Markt zu landen und problemlos die Grenze zu überschreiten.

• Shopify eigenständige Website Branding
• Visuelles UI-Design in Übersee
• SNS Multi-Channel Markenmarketing