Eigenes CSS hinzufügen

Die Stileinstellungen der App decken das meiste ab, was Shops brauchen. Wenn nicht – etwa ein bestimmter Eckenradius oder eine Anpassung, die nur auf Mobilgeräten gelten soll –, können Sie eigenes CSS hinzufügen.

Achtung

Das ist die einzige wirklich technische Seite in dieser Dokumentation. Wenn Sie sich mit CSS nicht wohlfühlen, beschreiben Sie Ihren Wunsch stattdessen an [email protected]. Das Team kann in der Regel das passende Snippet liefern – und CSS, das Sie nie schreiben, kann bei einem Theme-Update auch nicht kaputtgehen.

Beginnen Sie mit den integrierten Einstellungen

Fast jede optische Änderung, für die man zu CSS greift, ist bereits eine Einstellung unter Quote settings > Customize. Prüfen Sie diese, bevor Sie etwas schreiben.

Wo	Was Sie festlegen können
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color und Font size.
Quote form > Style	Eine Stilvorlage sowie Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color und Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color und Background color – das sind die einzigen beiden, die das schwebende Widget übernimmt.

Die meisten optischen Änderungen sind bereits Einstellungen – beginnen Sie hier.

Hinweis

Match theme styling if possible erledigt allein schon viel: „Theme styling applies on your storefront and is not shown in this preview.“ Aktivieren Sie die Option und sehen Sie sich Ihren Live-Onlineshop an, bevor Sie entscheiden, dass das Formular CSS braucht. Siehe Theme-Stil übernehmen.

Achtung

Eine Aufgabe sollten Sie CSS nie übertragen: einen Preis oder einen Kaufbutton auszublenden. Dafür gibt es unter Advanced settings > Hide price richtige Einstellungen, darunter Hide Add To Cart button und Hide Buy Now button. Eine CSS-Regel lässt den Preis auf der Seite stehen, wo er aufblitzen kann, bevor Ihr Stylesheet geladen ist – siehe „In den Warenkorb“ und „Jetzt kaufen“ ausblenden.

Wo Sie Ihr CSS aufbewahren

Wo auch immer Sie eigenes CSS ablegen: Bewahren Sie es an einem Ort auf, an dem Sie es wiederfinden und rückgängig machen können. CSS in Ihrem eigenen Theme hat einen nützlichen Nebeneffekt: Es wird zusammen mit dem Theme versioniert, sodass Sie durch das Duplizieren des Themes vor der Bearbeitung etwas haben, auf das Sie zurückgehen können.

Hinweis

Arbeiten Sie die integrierten Einstellungen oben durch, bevor Sie etwas schreiben. Wenn Sie nicht sicher sind, ob eine Änderung in eine Einstellung oder in CSS gehört, fragen Sie zuerst [email protected] – so pflegen Sie keine Regel, die Sie nie gebraucht hätten.

Herausfinden, was angesprochen werden soll

Klicken Sie in Ihrem Onlineshop mit der rechten Maustaste auf das Element und wählen Sie Untersuchen (Inspect). Dort sehen Sie die Klassennamen, für die Sie Regeln schreiben.

Untersuchen Sie den Angebotsbutton in Ihrem eigenen Onlineshop, um herauszufinden, was Sie ansprechen müssen.

Zwei Dinge sollten Sie vorab wissen:

• Der Angebotsbutton wird mit dem von Ihnen festgelegten Button text dargestellt, und zwar an der Stelle, die Sie unter Button position gewählt haben – prüfen Sie also Product page button position, bevor Sie ihn suchen.
• Das schwebende Angebots-Widget mit der Beschriftung Quote (n) befindet sich in einem Container mit der Klasse grfq-quote-widget-container.

Hinweis

Sie finden den Button auf einer Kollektionsseite nicht, um ihn zu untersuchen? Fahren Sie mit der Maus über eine Produktkarte. Bei modernen Themes hängt die App ihn an das theme-eigene Schnellhinzufügen-Element, sodass er mit der Deckkraft null unsichtbar ist, bis die Karte überfahren wird, und dann als kleines Symbol statt als beschrifteter Button erscheint. Das ist das Verhalten des Themes, kein fehlender Stil – siehe Angebotsbutton auf Kollektionsseiten.

Ein paar praktische Regeln

Regel	Warum
Ändern Sie immer nur eine Sache auf einmal	Wenn etwas kaputtgeht, wissen Sie, welche Regel schuld war.
Testen Sie auf Mobilgeräten	Die meisten Angebotsanfragen kommen von Smartphones, und eine reine Desktop-Anpassung funktioniert dort oft nicht.
Bewahren Sie eine Kopie an anderer Stelle auf	Fügen Sie Ihr CSS zusätzlich in eine Notiz ein, damit Sie es bei Bedarf wiederherstellen können.
Vermeiden Sie !important, wo möglich	Es setzt sich heute durch und macht jede künftige Änderung schwieriger.
Kommentieren Sie jede Regel	In sechs Monaten traut sich niemand mehr, einen unerklärten CSS-Block zu löschen.

Nach einem Theme-Wechsel

Beginnen Sie mit der App-Einbettung im neuen Theme. Sie wird in Ihrem Theme aktiviert, und solange sie nicht aktiviert ist, erscheint nichts von dem, was die App tut, in Ihrem Onlineshop – siehe App in Ihrem Theme aktivieren.

Prüfen Sie dann Ihr CSS. Es ist auf das Markup Ihres Themes geschrieben. Sehen Sie sich also nach einem Theme-Wechsel oder einem größeren Theme-Update Ihren Angebotsbutton, das Angebotsformular und das schwebende Widget an – Regeln müssen möglicherweise angepasst werden.

Nächste Schritte

• Buttontext und Farben ändern – die Button-Einstellungen, die Sie zuerst ausprobieren sollten
• Theme-Stil übernehmen – das Formular automatisch Ihrem Theme folgen lassen
• Support kontaktieren – ein Snippet anfragen