Dieser Artikel zeigt Ihnen, wie Sie die Benutzerdefiniertes Produktfeldelement in GemPages, um zusätzliche Informationen von Kunden auf Ihren Shopify-Produktseiten zu sammeln.
Was ist das benutzerdefinierte Produktfeldelement?
Das Benutzerdefiniertes Produktfeldelement ist ein flexibles Tool, mit dem Sie beim Kauf eines Produkts zusätzliche Kundendaten erfassen können. Je nach Bedarf können Sie verschiedene Feldtypen wie Textfelder, Kontrollkästchen, Dropdown-Menüs oder Optionsfelder anzeigen, um spezifische Informationen zu erfassen.
Anwendungen:
- Sammeln Sie personalisierte Notizen oder gravieren Sie Text.
- Kunden nach Lieferanweisungen fragen.
- Bietet Anpassungsmöglichkeiten (Farbe, Größe, Verpackung).
- Erfassen von Informationen, die nicht von den Standardproduktoptionen von Shopify abgedeckt werden.
Alle über Produkt-Benutzerdefinierte Felder gesammelten Daten werden der Bestellung beigefügt und in Ihrem Shopify Admin > Bestellungen sobald die Bestellung bestätigt ist.

So fügen Sie ein benutzerdefiniertes Produktfeld hinzu
Hinweis: Da der Benutzerdefiniertes Produktfeld ist ein untergeordnetes Element des Produktmodul, es muss immer in einem Produktmodul platziert werden, um richtig zu funktionieren.
Folge diesen Schritten:
Schritt 1:: In dem GemPages Dashboard, wählen Sie die Seite aus, an der Sie arbeiten möchten, und öffnen Sie den Editor.
Schritt 2:: Wenn Sie keine haben Produktmodul, ziehen Sie eines per Drag & Drop auf Ihre Seite.
Schritt 3:: Ziehen Sie das benutzerdefinierte Feldelement per Drag & Drop an die gewünschte Stelle im Produktmodul.

TIPP: Sie können einem Produktmodul mehr als ein benutzerdefiniertes Produktfeld hinzufügen, wenn Sie mehrere Informationen erfassen müssen.
Klicken Sie nach dem Hinzufügen auf das Element, um es zu öffnen Einstellungsfeld in der linken Seitenleiste. Dieses Panel enthält zwei Registerkarten: Einstellungen als auch Erweitert:

Konfigurieren der Registerkarte „Einstellungen“
1. Art
Wählen Sie den Eingabestil. Sie können wählen zwischen:
- Text: Einzeilige Eingabe für kurze Notizen.
- Textbereich: Mehrzeiliges Feld für längere Kommentare.
- E-Mail: Für E-Mail-Adressen formatiertes Eingabefeld.
- Checkbox: Ermöglicht Kunden die Auswahl mehrerer Optionen.
- Radio knopf: Kunden können nur eine Option aus einer Gruppe auswählen.
- Dropdown: Ein kompaktes Auswahlfeld für Einzelauswahloptionen.
- versteckt: Für Kunden unsichtbar, sendet aber dennoch einen vordefinierten Wert mit der Bestellung.

2. Produktquelle
Zeigt an, zu welchem Produkt das benutzerdefinierte Feld gehört. Um es zu ändern, öffnen Sie die Produktauswahl im Produktmodul.

3. Optionsverwaltung
Verfügbar für Kontrollkästchen, Optionsfeld und Dropdown Typen. Hier können Sie:
- Optionen hinzufügen oder entfernen.
- Optionsbeschriftungen bearbeiten.
- Ordnen Sie die Auswahlmöglichkeiten neu an, um die Anzeigereihenfolge zu steuern.

4. Größe
(Nicht verfügbar für den Typ „Versteckt“)
- Breite: Standardmäßig umfassen Felder 100 % des Containers. Sie können wechseln zu Inhalt anpassen (automatisch) wenn bevorzugt.
- Größe: Die Standardeinstellung ist „Automatisch“. Passen Sie es an, wenn Sie ein größeres Eingabefeld wünschen.
- Symbol- und Textlücke: Steuert den Abstand zwischen Symbol und Text in Kontrollkästchen- oder Radio-Layouts.

5. Hintergrund
(Nicht verfügbar für den Typ „Versteckt“)
Legen Sie eine Hintergrundfarbe oder ein Muster für Ihr Eingabefeld fest.

6. Form
(Nicht verfügbar für den Typ „Versteckt“)
Diese Einstellungen steuern die allgemeine Form und den Stil des Eingabefelds:
- Rand: Passen Sie die Rahmenstärke, den Stil (durchgehend, gestrichelt, gepunktet) und die Farbe an.
- Ecke: Legen Sie den Randradius fest.
- Schatten: Wenden Sie Schlagschatten an, um Tiefe zu verleihen und das Feld hervorzuheben.

7. Textstil eingeben
Verfügbar für Text, Textbereich und E-Mail Typen. Zu den Optionen gehören:
- Platzhalter: Standardtext, der vor der Eingabe angezeigt wird.
- Schriftart: Wählen Sie aus verfügbaren Schriftarten oder wenden Sie eine benutzerdefinierte Schriftart an.
- Größe, Farbe und Gewicht: Passen Sie die Typografie an die Lesbarkeit und das Branding an.
- Zeilenhöhe und Buchstabenabstand: Optimieren Sie den Textabstand.
- Texttransformation: Wandeln Sie Text in Großbuchstaben, Kleinbuchstaben oder Großbuchstaben um.

Für Kontrollkästchen-, Options- und Dropdownfelder werden in diesem Abschnitt die Optionsbezeichnungen angepasst.
8. Etikette
(Nicht verfügbar für den Typ „Versteckt“)
Feldbezeichnung ein- oder ausblenden. Sie können Folgendes anpassen:
- Inhaltstext.
- Schriftart, Größe, Farbe, Gewicht.
- Abstand und Texttransformation.

9. Hover-Effekt
Steuern Sie, wie das Feld beim Bewegen des Mauszeigers aussieht:
- Hintergrundfarbe.
- Textfarbe.
- Rahmengestaltung.
- Eckenradius.
- Schatten.

10. Fokuseffekt
Passen Sie den Stil an, wenn ein Feld aktiv oder ausgewählt ist:
- Hintergrund.
- Textfarbe.
- Grenze.
- Eckenradius.
- Schatten

11. Configuration
- Feldname: Weisen Sie eine Kennung für die Backend-Referenz zu.
- Erforderlich: Aktivieren Sie diesen Schalter, um zu verhindern, dass Benutzer diese Informationen umgehen.
- Nur Nummer: Aktivieren Sie diese Auswahl, um ausschließlich Zahleneingaben zuzulassen.
- Min./Max. Zeichen: Passen Sie mit dem Schieberegler die minimal und maximal zulässige Zeichenanzahl nach Wunsch an.

12. Fehlermeldung
Geben Sie eine benutzerdefinierte Fehlermeldung für ungültige Eingaben oder fehlende Pflichtfelder ein.

13. Ausrichten
Richten Sie das Feld innerhalb des Containers links, mittig oder rechts aus.

Konfigurieren der Registerkarte „Erweitert“
Für erweiterte Anpassungen navigieren Sie bitte zu Registerkarte Erweitert und befolgen Sie die Anweisungen in Dieser Artikel.
Vielen Dank für Ihre Kommentare