Dieser Leitfaden bietet einen umfassenden Überblick darüber, wie du das Erscheinungsbild von personalisierten In‑Page‑Personalisierungselementen in deinem Shopify‑Shop anpassen kannst. Wir sehen uns die CSS‑Selektoren und Best Practices an, damit du deinen Kundinnen und Kunden ein maßgeschneidertes und ansprechendes Einkaufserlebnis bieten kannst.
Die CSS-Struktur auf Shopify verstehen
Jede Personalisierungskomponente auf deiner Shopify-Seite ist in einem bestimmten CSS-Framework strukturiert. Diese Struktur ermöglicht gezieltes Styling und sorgt für ein einheitliches Design über all deine personalisierten Elemente hinweg. Schauen wir uns die wichtigsten Bestandteile an:
Hauptcontainer
Der Hauptcontainer dient als Wrapper für alle Personalisierungs-Komponenten. Verwende die folgende Klasse, um deiner gesamten Personalisierungssektion ein globales Styling zu geben:
.g-selector-container: Diese Klasse stellt den primären Wrapper dar.
Personalisierungsarten
Verschiedene Personalisierungsarten, zum Beispiel Text, Bilder oder Varianten, werden durch zusätzliche Klassen unterschieden. So kannst du je nach Inhaltstyp gezielte Styles anwenden:
.g-selector-variants: Für die Personalisierung basierend auf Produktvarianten wie Größe oder Farbe..g-selector-text: Für textbasierte personalisierte Anpassungen..g-selector-image: Für Personalisierungen mit Bildern, etwa von Nutzerinnen und Nutzern hochgeladene Bilder..g-selector-collection: Zum Anzeigen einer Sammlung von Optionen, zum Beispiel Farbmuster oder Designs..g-selector-condition: Für bedingte Personalisierungslogik, bei der Optionen basierend auf vorherigen Nutzerauswahlen angezeigt werden.
Etikett für Elementname
Jeder Personalisierungstyp enthält ein Kindelement für das Label oder den Titel. Du kannst dieses Label mit dem folgenden Selektor personalisieren:
.g-selector-label: Verwende diesen Selektor, um den Text zu gestalten, der die Personalisierungsoptionen beschreibt, zum Beispiel „Wähle deine Größe“ oder „Wähle eine Farbe.“
Schaltflächen und Zustände auf Shopify personalisieren
Buttons sind entscheidende Elemente bei der Personalisierung und werden oft verwendet, um Varianten oder Bedingungen auszuwählen. So kannst du ihr Aussehen personalisieren:
Schaltflächen-Container und Schaltflächen
.g-selector-buttons: Diese Klasse steht für den Container, der alle Buttons für eine bestimmte Option enthält..g-selector-button: Diese Klasse wird auf jede einzelne Schaltfläche innerhalb des Containers angewendet.
Schaltflächenzustände
Du kannst verschiedene Zustände von Buttons gestalten, um Nutzerinnen und Nutzern visuelles Feedback zu geben:
.g-selector-button-active: Diese Klasse wird angewendet, wenn eine Schaltfläche gerade von der/dem Benutzer*in ausgewählt ist..g-selector-button-disabled: Diese Klasse wird angewendet, wenn eine Schaltfläche nicht verfügbar ist oder nicht angeklickt werden kann.
Bild-Miniaturen auf Shopify gestalten
Für Personalisierungen, die bildbasierte Auswahloptionen wie Farbmuster beinhalten, kannst du die folgende Klasse verwenden:
.g-selector-collection-thumbnail: Diese Klasse wird auf jede Bild-Miniaturansicht in einer Sammlung angewendet. Du kannst diese Klasse personalisieren, um die Größe, Ränder und das Layout dieser Bilder anzupassen.
Beispiel‑CSS‑Anpassungen auf Shopify
Unten findest du ein Beispiel dafür, wie du das Erscheinungsbild der Selektoren mit CSS personalisieren kannst. Achte darauf, die Konsistenz mit deiner Marke zu wahren und für Responsivität auf verschiedenen Geräten zu sorgen.
/* Allgemeines Styling für den Container */.g-selector-container { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } /* Styling für Labels */.g-selector-label { font-size: 14px; color: #333; margin-bottom: 8px; } /* Schaltflächen */.g-selector-button { background-color: #007bff; color: #fff; padding: 10px; border: none; cursor: pointer; } .g-selector-button-active { background-color: #28a745; } .g-selector-button-disabled { background-color: #ccc; cursor: not-allowed; } /* Miniaturansichten – Anpassungen */.g-selector-collection-thumbnail { width: 100px; height: 100px; border: 2px solid #ddd; margin: 5px; }
Best Practices für Personalisierung auf Shopify
Konsistenz wahren: Achte darauf, dass deine Personalisierungen zu deinem gesamten Website-Branding passen, um ein stimmiges Nutzererlebnis zu schaffen.
Auf allen Geräten testen: Teste die Responsivität deiner personalisierten Anpassungen sowohl auf Desktop- als auch auf Mobilgeräten.
Barrierefreiheit verbessern : Verwende kontrastreiche Farben für Text und Buttons und sorge für klare Fokuszustände bei allen interaktiven Elementen, damit deine Website für alle Nutzer*innen zugänglich ist.