Produktvarianten und Farbfeldelement

Über das Element „Produktvarianten & Farbmuster“

Im Gegensatz zur vorherigen Version des Editors Editor v7 verfügt über ein einzelnes Element namens (P) Varianten und Swatches um verschiedene Optionen eines Produkts anzuzeigen, wie Größe, Farbe, Materialien usw., um Ihre Konversionsrate zu erhöhen.

In GemPages V7 ist die Produktvarianten und Swatches Mit dem Element können Sie alle Produktvariantenoptionen in einer einzigen, anpassbaren Oberfläche anzeigen, von Dropdowns über Farbfelder bis hin zu Miniaturansichten von Bildern.

Häufige Anwendungsfälle:

• Lassen Sie Kunden Größe, Farbe oder Material auswählen
• Ausverkauft-Status visuell anzeigen
• Verwenden Sie verschiedene Bilder oder laden Sie benutzerdefinierte Musterbilder hoch

So fügen Sie Produktvarianten in Shopify hinzu

Bevor Varianten im angezeigt werden Element „Produktvarianten & Farbmuster“Sie müssen diese Varianten zuerst in Ihren Shopify-Produkteinstellungen erstellen.

Folgen Sie diesen Schritten, um Produktvarianten in Shopify hinzuzufügen:

Schritt 1: Gehen Sie in Ihrem Shopify-Adminbereich zu Produkte.

Schritt 2: Klicken Sie auf das Produkt, dem Sie Varianten hinzufügen möchten.

Schritt 3: Scrollen Sie zum Varianten Abschnitt und klicken Sie auf + Optionen wie Größe oder Farbe hinzufügen.

Schritt 4: Geben Sie die Optionsname (zum Beispiel: Größe, Farbe, Material).

Schritt 5: Fügen Sie Optionswerte.

Ejemplo:

• Größe: S, M, L, XL
• Farben: Rot, Schwarz, Grün

Schritt 6: Klicken Sie auf Erledigt Shopify generiert dann automatisch alle Variantenkombinationen.

Schritt 7: Konfigurieren Sie zusätzliche Variantendetails wie zum Beispiel:

• Preis
• SKU
• Inventar
• Variantenbild
• Verfügbarkeit

Schritt 8: Klicken Sie auf Gespeichert.

Sobald die Varianten erstellt sind, erscheinen sie automatisch im Inneren Element „Produktvarianten & Farbmuster“ in GemPagesDadurch können Kunden auf Ihrer Produktseite verschiedene Produktoptionen auswählen.

Wie füge ich ein Element für Produktvarianten und Farbmuster zu meiner Seite hinzu?

Befolgen Sie diese Schritte, um Ihrer mit GemPages erstellten Seite eine Produktvariante und Farbmuster hinzuzufügen.

Schritt 1: Gehen Sie in Ihrem Shopify-Adminbereich zu GemPages-Ersteller app> Seiten. Klicken Sie auf Ihre Zielseite, um den Editor zu finden.

Schritt 2: Nutzen Sie in der linken Seitenleiste die Suchleiste, um die Produktvarianten zu finden. Farbmuster-ElementeZiehen Sie das Element anschließend per Drag & Drop in ein Produktelement.

Schritt 3: Klicken Sie auf das Element, um seine Konfiguration zu öffnen.

Konfigurieren der Registerkarte „Einstellungen“

Von hier aus können Sie die Einstellungen des Elements konfigurieren, einschließlich:

Produktquelle

Wenn Sie dieser Vorlage ein Produkt zugewiesen haben, wird dieses Produkt automatisch als Produktquelle.

Falls Sie ein anderes Produkt auswählen möchten, bewegen Sie den Mauszeiger über das aktuelle Produkt und klicken Sie auf die Schaltfläche. rechter Pfeil Um die Produkt-Elementeinstellungen zu finden, können Sie die gewünschte Einstellung auswählen.

Klicken Sie auf die Stift Symbol zum Bearbeiten der Produktquelle. Hier können Sie Ihr bevorzugtes Produkt manuell auswählen.

Typ

Sie können an dieser Stelle zwischen zwei Optionen wählen:

• Kombiniert: Alle Varianten werden in einem einzigen Dropdown-Menü zusammengefasst.

• Getrennt: Varianten werden in unterschiedliche Kategorien eingeteilt.

Je nach dem hier ausgewählten Typ werden mehrere der folgenden Einstellungen angepasst.

• Wenn Sie die einstellen Typ zu Kombiniert, klicken werden auf dieser Seite erläutert zur weiteren Orientierung.
• Wenn Sie die einstellen Typ zu Getrennt, klicken werden auf dieser Seite erläutert für detaillierte Anweisungen.

#1. Typ: Kombiniert

Wenn Sie die einstellen Typ zu KombiniertKonfigurieren Sie anschließend, wie die Variantenoptionen für Ihr Produkt angezeigt werden.

Textstil

Das Textstil In diesem Abschnitt können Sie festlegen, wie der Text Ihrer Produktvarianten aussehen soll, sodass alles mit Ihrem Markendesign einheitlich bleibt.

• Styles: Wählen Sie einen vordefinierten Textstil wie Überschrift oder Absatz, um Ihre Typografie an den Rest Ihres Shops anzupassen.
• Schriftart: Wählen Sie eine Schriftart aus dem Dropdown-Menü oder verwenden Sie Ihre benutzerdefinierte Schriftart aus den globalen Stilen. Verwenden Sie für ein einheitliches Erscheinungsbild dieselbe Schriftart wie auf Ihren Produktseiten.
• Größe Passen Sie die Schriftgröße so an, dass Variantennamen und Preise im Layout deutlich erkennbar sind.
• Farbe: Wählen Sie eine Textfarbe aus der Farbauswahl oder geben Sie einen HEX-Code ein (z. B. , #3B3B3BVerwenden Sie einen dunklen Ton für bessere Lesbarkeit.
• Ausrichten: Richten Sie den Text je nach Layoutvorliebe linksbündig, zentriert oder rechtsbündig aus. Linksbündige Ausrichtung eignet sich am besten für Variantenlisten.
• Schriftstärke: Legen Sie fest, wie fett der Text dargestellt wird – von Leicht bis Extra Fett. Für Produktvarianten sind Mittel oder Fett in der Regel optimal.
• Zeilenhöhe: Passen Sie den vertikalen Abstand zwischen den Textzeilen an (z. B. 150 %), um mehrzeiligen Text besser lesbar zu machen.
• Buchstaben-Abstand: Passen Sie den Abstand zwischen den Buchstaben an, um einen dichteren oder offeneren Eindruck zu erzielen.
• Verwandeln: Ändern Sie die Groß-/Kleinschreibung des Textes, sodass jedes Wort großgeschrieben wird. Ideal für Artikelnummern oder Variantennamen im Etikettenstil.
• Schatten: Fügen Sie einen dezenten Textschatten hinzu, um den Kontrast zu erhöhen oder Ihrem Text Tiefe zu verleihen, wenn er sich mit hellen Hintergründen überlagert.

Optionsstil

Das Optionsstil In diesem Abschnitt können Sie die Darstellung Ihrer Produktvariantenauswahl anpassen, einschließlich Größe, Hintergrund und Gesamtoptik.

• Breite: Passen Sie die Breite des Optionsfelds an. Sie können einen festen Pixelwert festlegen oder einen Prozentsatz verwenden (z. B. 1000). 100%um es über den gesamten Behälter zu spannen.
• Größe: Definieren Sie die vertikale Größe des Variantenselektors (z. B. 45px) für eine bessere visuelle Balance mit anderen Elementen auf der Produktseite.
• Hintergrund: Wählen Sie eine Hintergrundfarbe für das Optionsfeld. Verwenden Sie einfarbige Töne (wie Schwarz oder Weiß) oder die Akzentfarbe Ihrer Marke für einen stärkeren Kontrast.
• Rand: Fügen Sie dem Auswahlfeld einen Rahmen hinzu oder entfernen Sie ihn. Sie können zwischen Linien-, Strich- oder Punktrahmen wählen und die Farbe an Ihr Layout anpassen.
• Ecke: Runden Sie die Ecken Ihres Optionsfelds ab, indem Sie Eckradiuswerte festlegen (z. B. , 18pxDadurch entsteht ein weicheres, moderneres Erscheinungsbild.
• Schatten: Verleihen Sie dem Feld subtile Tiefe, indem Sie Schatteneffekte hinter dem Feld anwenden. Ideal, um den aktiven oder den Hover-Zustand hervorzuheben.

Hover-Effekt

Das Hover-Effekt In diesem Abschnitt können Sie festlegen, wie die Variantenoption reagiert, wenn Kunden mit der Maus darüberfahren.

• Hintergrund: Ändern Sie die Hintergrundfarbe, die erscheint, wenn ein Nutzer mit der Maus über die Variante fährt. Verwenden Sie die Akzentfarbe Ihrer Marke (z. B. Rot). #EC6448) um es hervorzuheben.
• Textfarbe: Legen Sie die Textfarbe beim Überfahren mit der Maus fest. Eine helle Farbe wie Weiß (#FFFFFF) funktioniert am besten auf dunklen oder kräftigen Hintergründen.
• Rand: Passen Sie den Rahmenstil (Linie, gestrichelt, gepunktet) an, um den Hover-Effekt besser hervorzuheben. Sie können auch die Rahmenfarbe an den Hintergrund anpassen.
• Ecke: Die Eckenrundung beibehalten oder verstärken, um beim Hovern einen sanfteren visuellen Übergang zu erzielen.
• Schatten: Füge einen dezenten Schatteneffekt hinzu, um den Eindruck zu erwecken, die Option beim Überfahren mit der Maus sei erhaben oder interaktiv. Ideal zur Verbesserung des Klick-Feedbacks.

#2. Typ: Getrennt

Wenn Sie die einstellen Typ zu GetrenntKonfigurieren Sie anschließend, wie die Variantenoptionen für Ihr Produkt angezeigt werden.

Optionslücke

Passen Sie den Abstand zwischen den Varianten an, indem Sie eine genaue Zahl in das Feld eingeben oder den Schieberegler ziehen.

Optionstitel

Unter dem Optionstitel Im Abschnitt „Titelposition auswählen“ stehen Ihnen zwei Optionen zur Verfügung: vertikal und horizontal.

• Vertikale Position:

• Horizontale Position:

Passen Sie als Nächstes den Abstand zwischen Titel und Text der Variante an, um die Lesbarkeit zu verbessern. Beispielsweise setzen wir die Abstand auf 40 Pixel.

Klicken Sie dann auf das Kästchen neben Textstil Um das Konfigurationsfeld für den Textstil zu öffnen, klicken Sie hier. Hier können Sie Stile, Schriftart, Textgröße, Textfarbe und Buchstabenabstand ändern oder einen Schatteneffekt für den Titel der Variante hinzufügen.

Sobald Sie mit dem Optionstitel (Titel der Variante), Sie können jede Variantenoption in den folgenden Abschnitten konfigurieren.

Da wir beispielsweise drei Varianten für diese Edelsteinpalette haben, können wir die Sichtbarkeit jeder einzelnen in der folgenden Reihenfolge ändern: Farbe,, Oberfläche/Textur und Größe.

Option: Farbe

In diesem Abschnitt können Sie alle Farboptionen dieses Elements konfigurieren.

Lassen Sie uns die einzelnen Einstellungsoptionen genauer betrachten:

• Bauweise: Wählen Sie aus diesen verfügbaren Optionen, einschließlich Dropdown, Schaltflächenauswahl, Shopify-Bild, Farbfeldden Bild hochladen.

Wenn Sie beispielsweise Stil = Farbfeld, klicken Farbe bearbeiten öffnen Variantenstil konfigurieren Bedienfeld für weitere Einstellungen.

Wenn Sie für jede Farboption neue Bilder hochladen möchten, wählen Sie Stil = Bild hochladen.

Bitte beachten Sie, dass für jede Option nur ein Bild angezeigt wird. Wenn Sie mehr Bilder hinzufügen möchten, müssen Sie die gleiche Anzahl an Variantenoptionen in Shopify hinzufügen.

• Breite & Höhe: Passen Sie die Breite und Höhe der Farboption an.
• Wertlücke: Ändern Sie den Abstand zwischen den einzelnen Optionen.

• Rand: Fügen Sie den Rahmen für Farboptionen hinzu und ändern Sie die Rahmenfarbe, -dicke und -kontur nach Wunsch.

• Ecke: Passen Sie den Eckenradius an. Wenn Sie beispielsweise abgerundete Farboptionen anzeigen möchten, legen Sie den Radius auf 999999 fest.
• Schatten: Um die Benutzeroberfläche zu verbessern, können Sie den Farboptionen einen Schatteneffekt hinzufügen.

• Schweben: Klicken Sie auf die Design Kästchen neben dem Schweben um die Einstellungen zu öffnen, wo Sie den Hover-Effekt ändern können.
• Aktiv: Passen Sie die aktive Farboption an, um sie von den anderen abzuheben.

Optionswerttext

In diesem Abschnitt können Sie den Textwert für Farboptionen aus Stilen, Schriftart, Größe, Schriftstärke, Zeilenhöhe, Buchstabenabstand und Transformation bearbeiten.

Ausverkauftes Modell

Wählen Sie den visuellen Stil, wenn eine Farboption ausverkauft ist:

• Keine: Kein Signal für ausverkaufte Farboption.
• Nicht anklickbar: Besucher können nicht auf die ausverkaufte Farboption klicken.
• Streichen: Die ausverkaufte Farboption wird durchgestrichen.

Beispielsweise setzen wir die Typ zu Unklickbar:

Größe

Verwenden Sie die Größe Abschnitt zur Steuerung der Breite Ihres Variantenselektors oder Farbfeldbereichs.

Breite: Passen Sie die Breite des Elements entweder mit einem festen Pixelwert an (z. B. 500px) oder ein Prozentsatz (100%) abhängig von Ihrem Layout.

• Größere Breiten erzeugen ein Dropdown-Menü, das die gesamte Zeile ausfüllt.
• Kleinere Breiten eignen sich ideal für kompakte Variantenlisten.

Shape

Das Shape Im Abschnitt „Variablen“ können Sie das Erscheinungsbild Ihres Variantencontainers gestalten, einschließlich Rahmen und Ecken.

• Rand: Fügen Sie einen Rahmenstil (Linie, Strich, Punktiert) hinzu oder passen Sie ihn an, um Ihren Variantenselektor zu umranden.
• Ecke: Runden Sie die Kanten des Kastens ab (z. B. 18px) für eine moderne und flüssige Optik.
• Schatten: Verleihen Sie Ihren Variantenboxen mit dezenten Schatten mehr Tiefe und heben Sie sie so vom Hintergrund ab. Wählen Sie zwischen Leicht, Mittel, or Strong abhängig vom gewünschten Kontrast.

Anzeigeoption

Das Anzeigeoption Steuert, wie Ihre Produktvarianten beim Laden der Seite angezeigt werden bzw. wie Standardvarianten ausgewählt werden.

Standardvariante: Toggle Ja um beim ersten Laden der Produktseite eine vorausgewählte Option anzuzeigen (z. B. „Grün / Erwachsene“).

Um die Standardoption anzupassen, müssen Sie die Produktquelle im Produktelement auf „ ändern“ ändern.Manuell auswählen"Statt"Zugewiesen". Mehr erfahren.

Ausrichten

Das Ausrichten Dieser Abschnitt ermöglicht es Ihnen, die Positionierung Ihrer Variantenoptionen innerhalb ihres Containers zu steuern und so das gesamte Seitenlayout feinabzustimmen. Sie können zwischen drei Optionen wählen: Linksbündig, zentriert oder rechtsbündig – ganz nach Ihren Wünschen.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.

Fehlerbehebung bei Problemen mit Farbvarianten

Wenn eines Ihrer Farbfelder in GemPages nicht richtig funktioniert, finden Sie hier einige Schritte zur Fehlerbehebung und Lösung des Problems:

Variantenkonfiguration in Shopify

Stellen Sie sicher, dass Ihre Produktvarianten in Shopify richtig eingerichtet sind:

• Aktiver Status: Überprüfen Sie, ob das Produkt und seine Varianten in Ihrem Online-Shop aktiv und verfügbar sind.
• Verkaufskanäle: Bestätigen Sie, dass für das Produkt der Vertriebskanal „Online-Shop“ ausgewählt ist.
• Varianten-Setup: Überprüfen Sie, ob jede Variante eine einzigartige Kombination von Optionen wie Farbe und Größe hat.

Überprüfen Sie die Produktmoduleinstellungen

• Klicken Sie im GemPages Editor auf das Produktmodul.
• Unter dem Ausgewähltes Produkt Stellen Sie im Abschnitt sicher, dass das richtige Produkt zugewiesen ist.

Häufige Fragen zum Großhandel mit Lebensmitteln und Getränken

1. Kann ich jede Produktvariante als separate Produktseite anzeigen?

Shopify unterstützt standardmäßig nicht die Anzeige von Varianten als separate Produktseiten.

Eine gängige Problemumgehung besteht jedoch darin, Erstellen Sie separate Produkte für jede Variante, und verknüpfen Sie sie dann manuell mithilfe von Metafeldern oder einem benutzerdefinierten Abschnitt als „Variantengruppe“.

2. Was ist der Unterschied zwischen Varianten und Einzelprodukten?

Varianten teilen sich dieselbe Produktseite und verwenden Farbfelder/Dropdowns, um zwischen Optionen (z. B. Größen, Farben) zu wechseln.

Einzelne Produkte verfügen über eigene Produktseiten und URLs. Dies wird häufig verwendet, wenn die einzelnen Varianten sehr unterschiedliche Fotos, Preise oder Beschreibungen aufweisen.

3. Wie verknüpfe ich separate Produktseiten wie Varianten miteinander?

Sie können verwenden:

• Manuelle Verlinkung in Produktbeschreibungen oder benutzerdefinierten Blöcken (z. B. „Auch verfügbar in…“)
• Produktempfehlungs-Apps
• Benutzerdefinierte Liquid-Abschnitte oder Metafelder (erfordert einige Shopify-Kenntnisse)

4. Wie kann ich die Zoomfunktion aktivieren, wenn ich mit der Maus über das Bild einer Variante fahre?

Zoom wird über die Steuerung gesteuert. Element „Produktbilder“nicht in den Varianten-Farbmustern.
So aktivieren Sie es:

• Klicken Sie auf die Produktbilder Element im Editor.
• Der Titelbild > Hover-Aktion, wählen Zoom.
• Passen Sie den Zoomtyp und den Zoomwert nach Bedarf an.

5. Warum wird die Zoom-Funktion nicht ausgelöst, wenn ich mit der Maus über ein Farbmuster fahre?

Nur Farbmuster der Varianten das ausgewählte Produktbild ändernSie haben keinen Einfluss auf das Zoomverhalten.
Um den Zoom-Effekt zu aktivieren, konfigurieren Sie ihn in Produktbilder > Schwebefunktionnicht innerhalb der Einstellungen des Farbfeldelements.

6. Wie kann ich den Preis für Produktvarianten in Shopify bearbeiten?

Sie können die Preise der Varianten direkt in Ihrem Shopify-Adminbereich aktualisieren. Gehen Sie zu ProdukteWählen Sie das Produkt mit Varianten aus, dann im Varianten Abschnitt aktualisieren AnzeigenPreise Feld für die Variante und klicken GespeichertDer neue Preis wird automatisch auf Ihrer Produktseite angezeigt, auch auf Seiten, die mit GemPages erstellt wurden.