Aangepaste CSS toevoegen

De stijlinstellingen van de app dekken het meeste wat winkels nodig hebben. Als dat niet zo is — een bepaalde afronding van hoeken, een aanpassing die alleen op mobiel moet gelden — kun je eigen CSS toevoegen.

Opgepast

Dit is de enige echt technische pagina in deze documentatie. Ben je niet vertrouwd met CSS, beschrijf dan aan [email protected] wat je wilt. Het team kan meestal de exacte snippet leveren, en CSS die je nooit schrijft, is CSS die niet kan breken wanneer je thema wordt bijgewerkt.

Begin met de ingebouwde instellingen

Bijna elke uiterlijke wijziging waarvoor mensen naar CSS grijpen, is al een instelling in Quote settings > Customize. Controleer deze voordat je iets schrijft.

Waar	Wat je kunt instellen
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color en Font size.
Quote form > Style	Een stijlvoorinstelling, plus 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 en Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color en Background color — dit zijn de enige twee die de zwevende widget accepteert.

De meeste uiterlijke wijzigingen zijn al instellingen — begin hier.

Opmerking

Match theme styling if possible doet al veel werk: “Theme styling applies on your storefront and is not shown in this preview.” Schakel het in en bekijk je live webshop voordat je besluit dat het formulier CSS nodig heeft. Zie Je thema-stijl overnemen.

Opgepast

Eén klus waarvoor je CSS nooit moet gebruiken, is een prijs of koopknop verbergen. Advanced settings > Hide price heeft daar echte instellingen voor, waaronder Hide Add To Cart button en Hide Buy Now button. Een CSS-regel laat de prijs in de pagina staan, waar die kan oplichten voordat je stylesheet is geladen — zie Add to cart en Nu kopen verbergen.

Waar je je CSS bewaart

Waar je aangepaste CSS ook bewaart, zorg dat je hem kunt terugvinden en ongedaan maken. CSS in je eigen thema heeft een nuttig neveneffect: hij wordt met het thema van versies voorzien, dus als je het thema dupliceert voordat je bewerkt, heb je iets om naar terug te gaan.

Opmerking

Loop eerst de ingebouwde instellingen hierboven door voordat je iets schrijft. Kun je niet bepalen of een wijziging in een instelling of in CSS thuishoort, vraag het dan eerst aan [email protected] — zo hoef je geen regel te onderhouden die je nooit nodig had.

Vinden wat je moet aanpassen

Klik met de rechtermuisknop op het element in je webshop en kies Inspect. Daarmee zie je de klassenamen waarvoor je regels kunt schrijven.

Inspecteer de offerteknop in je eigen webshop om te zien wat je moet aanpassen.

Twee dingen zijn goed om te weten voordat je begint:

• De offerteknop wordt getoond met de Button text die je instelt, op de plek die je onder Button position hebt gekozen — controleer dus Product page button position voordat je ernaar gaat zoeken.
• De zwevende offertewidget, met het label Quote (n), zit in een container met de klasse grfq-quote-widget-container.

Opmerking

Kun je de knop op een collectiepagina niet vinden om hem te inspecteren? Beweeg de muis over een productkaart. Bij moderne thema’s koppelt de app hem aan de eigen snelle toevoegknop van het thema, dus hij heeft nul dekking totdat je over de kaart beweegt en verschijnt dan als een klein pictogram in plaats van een knop met label. Dat is gedrag van het thema, geen ontbrekende stijl — zie Offerteknop op collectiepagina’s.

Een paar praktische regels

Regel	Waarom
Wijzig één ding tegelijk	Als er iets kapotgaat, weet je welke regel het veroorzaakte.
Test op mobiel	De meeste offerteaanvragen komen van telefoons en een aanpassing die alleen voor desktop is bedoeld, gaat daar vaak stuk.
Bewaar elders een kopie	Plak je CSS ook in een notitie, zodat je hem kunt herstellen als dat nodig is.
Vermijd !important waar mogelijk	Het wint vandaag en maakt elke latere wijziging lastiger.
Voorzie elke regel van commentaar	Over zes maanden is een ongeannoteerd blok CSS iets wat niemand durft te verwijderen.

Na een themawijziging

Begin met de app-insluiting op het nieuwe thema. Die is ingeschakeld in je thema, en zolang hij niet is ingeschakeld, verschijnt niets van wat de app doet in je webshop — zie De app inschakelen in je thema.

Controleer daarna je CSS. Die is geschreven voor de opmaak van je thema, dus bekijk na een themawissel of een grote themaupdate je offerteknop, offerteformulier en zwevende widget — regels moeten misschien worden aangepast.

Volgende stappen

• Knoptekst en kleuren wijzigen — de knopinstellingen om eerst te proberen
• Je thema-stijl overnemen — laat het formulier je thema automatisch volgen
• Contact opnemen met support — vraag om een snippet