Lägg till egen CSS

Appens stilinställningar täcker det mesta som butiker behöver. När de inte gör det – en viss kantradie eller en justering som bara ska gälla på mobil – kan du lägga till egen CSS.

Caution

Det här är den enda genuint tekniska sidan i dokumentationen. Om du inte är bekväm med CSS kan du i stället beskriva vad du vill ha för [email protected]. Teamet kan oftast ta fram exakt rätt kodsnutt, och CSS du aldrig skriver är CSS som inte kan gå sönder när ditt tema uppdateras.

Börja med de inbyggda inställningarna

Nästan varje utseendeändring som folk tar till CSS för är redan en inställning under Quote settings > Customize. Kontrollera dessa innan du skriver något.

Var	Vad du kan ställa in
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color och Font size.
Quote form > Style	En stilförinställning, 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 och Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color och Background color – det är de enda två som den flytande widgeten tar.

De flesta utseendeändringar är redan inställningar – börja här.

Note

Match theme styling if possible gör mycket av jobbet på egen hand: ”Theme styling applies on your storefront and is not shown in this preview.” Slå på den och titta på din live-butik innan du bestämmer att formuläret behöver CSS. Se Match your theme style.

Caution

Ett jobb som CSS aldrig bör få är att dölja ett pris eller en köpknapp. Advanced settings > Hide price har riktiga inställningar för det, inklusive Hide Add To Cart button och Hide Buy Now button. En CSS-regel lämnar kvar priset på sidan, där det kan blinka till innan din stilmall hunnit laddas – se Hide Add to Cart and Buy now.

Var du ska förvara din CSS

Oavsett var du förvarar egen CSS ska den ligga någonstans där du hittar och kan ångra den. CSS i ditt eget tema har en nyttig bieffekt: den versionshanteras tillsammans med temat, så om du duplicerar temat innan du redigerar har du något att gå tillbaka till.

Note

Gå igenom de inbyggda inställningarna ovan innan du skriver något. Om du inte kan avgöra om en ändring hör hemma i en inställning eller i CSS kan du fråga [email protected] först – då slipper du underhålla en regel du aldrig behövde.

Hitta vad du ska rikta in dig på

Högerklicka på elementet i din butik och välj Inspect. Då ser du de klassnamn du kan skriva regler mot.

Inspektera offertknappen i din egen butik för att hitta vad du ska rikta in dig på.

Två saker är bra att veta innan du börjar:

• Offertknappen visas med den Button text du har angett, på den plats du valde under Button position – så kontrollera Product page button position innan du börjar leta efter den.
• Den flytande offertwidgeten, märkt Quote (n), ligger i en behållare med klassen grfq-quote-widget-container.

Note

Hittar du inte knappen på en kollektionssida för att inspektera den? Håll muspekaren över ett produktkort. I moderna teman kopplar appen den till temats egen snabbtilläggskontroll, så den har noll opacitet tills kortet hovras och visas sedan som en liten ikon i stället för en knapp med text. Det är temats beteende, inte en saknad stil – se Quote button on collection pages.

Några praktiska regler

Regel	Varför
Ändra en sak i taget	När något går sönder vet du vilken regel som orsakade det.
Testa på mobil	De flesta offertförfrågningar kommer från mobiler, och en justering som bara gjorts för datorn går ofta sönder där.
Behåll en kopia någon annanstans	Klistra in din CSS i en anteckning också, så att du kan återställa den vid behov.
Undvik !important när du kan	Den vinner i dag och gör varje framtida ändring svårare.
Kommentera varje regel	Om sex månader är ett oförklarat block med CSS något som ingen vågar ta bort.

Efter ett temabyte

Börja med appinbäddningen i det nya temat. Den är aktiverad i ditt tema, och tills den är aktiverad syns inget av det appen gör i din butik – se Enable the app in your theme.

Kontrollera sedan din CSS. Den är skriven mot ditt temas markup, så efter ett temabyte eller en större temauppdatering bör du titta på din offertknapp, ditt offertformulär och din flytande widget – reglerna kan behöva justeras.

Nästa steg

• Change button text and colors – knappinställningarna att prova först
• Match your theme style – låt formuläret följa ditt tema automatiskt
• Contact support – be om en kodsnutt