Der Theme-Block gibt einer eingebetteten Veröffentlichung einen sichtbaren Platz auf der Shopify-Produktseite. Was er zeigt, konfigurierst du in Composerie, und seine Reihenfolge innerhalb der Produktvorlage steuerst du in Shopify.
Das eingebettete Layout wählen
Wähle für eine erste Veröffentlichung im Bildschirm Veröffentlichen des Produkts die Option Eingebettet. Dieser Bildschirm verwendet die Voreinstellungen des Modus. Den früheren Schritt Konfigurieren und die Preset-Auswahl gibt es dort nicht. Die detaillierten Anzeigeeinstellungen prüfst du in den Shop-Einstellungen des Produkts.
Mit erweiterten Einstellungen kannst du die Variantenauswahl des Themes ersetzen, eine Live-Vorschau zeigen, Titel und Preis ersetzen, Conversion-Elemente hinzufügen und Composerie die Aktion In den Warenkorb übernehmen lassen. Aktiviere nur die Einstellungen, die du mit dem Theme getestet hast.
Den Shopify-Block platzieren
Öffne über den Einrichtungsdialog von Composerie die Produktvorlage in Shopify. Lass den Block im Hauptformular des Produkts, nahe bei den Kaufelementen, und speichere.
Den Customizer in Composerie gestalten
Öffne im Dashboard Customizer, um Theme, Markenfarben, Schriftart, Buttons, Layout und erweiterte Optionen festzulegen. Rechts findest du eine Live-Vorschau für Desktop und Handy.
Eigenes CSS verwenden
Öffne in Customizer den Bereich Erweitert und nutze Benutzerdefiniertes CSS für kleine kosmetische Änderungen. Das CSS bleibt innerhalb des Customizer-Roots und ist auf 4000 Zeichen begrenzt.
Verwende diese stabilen Klassen statt generierter Utility-Klassen:
| Selektor | Element |
|---|---|
.composerie-input | Text- und andere Eingabefelder |
.composerie-label | Feldbeschriftungen |
.composerie-textarea | Mehrzeilige Textfelder |
.composerie-select | Dropdown-Felder |
.composerie-dropzone | Bereiche für Foto-Uploads |
.composerie-variant | Varianten- und Materialauswahl |
.composerie-addon | Einzelne Add-on-Elemente |
Ändere zum Beispiel die Rahmenfarbe von Texteingaben:
.composerie-input {
border-color: #2563eb;
}Selektoren für In den Warenkorb und Preis, breite Button-Selektoren und unsicheres CSS werden herausgefiltert. Nutze für Kauf-Buttons und Preise die Darstellungseinstellungen. Behalte beim Aktualisieren deines CSS die vorhandenen Selektoren bei und teste die gewünschten Elemente in der Live-Vorschau und im Shop auf Desktop- und Handy-Größen, bevor du veröffentlichst.
Wo ändere ich das eingebettete Layout?
Wähle für eine erste Veröffentlichung Eingebettet unter Veröffentlichen. Prüfe die detaillierten Anzeigeeinstellungen in den Shop-Einstellungen des Produkts und kontrolliere dann die gewünschte Veröffentlichung im Shop.
Wo ändere ich Farben und Schriftarten?
Öffne Customizer in der Seitenleiste von Composerie und nutze Theme und Branding.
Sollte ich jede erweiterte Einstellung aktivieren?
Nein. Aktiviere nur die Einstellungen, die dein Theme braucht, und prüfe jede einzelne in einem Test im Shop.
Weiter
Gehe die Checkliste für die Vorschau durch, bevor du veröffentlichst.