Använda varumärkesredigeraren i Checkout Blocks

Du kan använda varumärkesredigeraren i Checkout Blocks, som drivs av Checkout Branding API, för att anpassa utseendet på dina betalnings- och kontosidor utan att behöva ändra någon kod.

Du kan använda varumärkesredigeraren för att redigera färger och kassaelement för alla kassakonfigurationer. Ändringar som du gör i din kassadesign med hjälp av varumärkesredigeraren gäller för alla sidor i din kassa, till exempel tacksidan, orderstatussidan och nya kundkontosidor.

Öppna varumärkesredigeraren från din Shopify-admin genom att klicka på Appar > Checkout Blocks och sedan på Branding editor.

På den här sidan

Anpassa kassafärger

I avsnittet Färger kan du anpassa basfärgerna i din kassa. Du kan även anpassa upp till fyra färgscheman som gäller för enskilda avsnitt när du vill göra mer detaljerade redigeringar av din design. Du kan redigera färgtyper, bland annat accentfärger (för interaktiva element, till exempel länkar) och varumärkesfärger (som används för element som primära och sekundära knappar).

Steg:

Customize global colors

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Klicka på Globala färger i avsnittet Färger.
Om du vill åsidosätta en befintlig kassafärg går du till avsnittet Globala färger och klickar på ikonen ⊕. Välj sedan den färg du vill ha genom att göra något av följande:
- Använd färgväljaren för att välja färg.
- Skriv in HEX-färgkoden i det tillgängliga fältet.
Klicka på Spara.

Customize color schemes

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
I avsnittet Färger klickar du på Schema 1, Schema 2, Schema 3 eller Schema 4 om du vill anpassa ett visst färgschema.
Välj någon av följande komponenter som du vill anpassa:
- Huvudfärger
- Formulärskontroller
- Primär knapp
- Sekundär knapp
Gå till avsnittet Bas och klicka på ikonen ⊕ intill den färgtyp som du vill anpassa. Välj sedan den färg du vill ha genom att göra något av följande:
- Använd färgväljaren för att välja färg.
- Skriv in HEX-färgkoden i det tillgängliga fältet.
Valfritt: Om du redigerar schemat för formulärskontrollerna, den primära knappen eller den sekundära knappen kan du även anpassa färgerna för interaktionsbeteendena Vald och Vid hovring. Klicka på ikonen ⊕ intill den färgtyp som du vill anpassa. Välj sedan den färg du vill ha genom att göra något av följande:
- Använd färgväljaren för att välja färg.
- Skriv in HEX-färgkoden i det tillgängliga fältet.
Klicka på Spara.

Anpassa kassaelement

I avsnittet Anpassningar i varumärkesredigeraren kan du redigera följande element i kassan:

Favoritikon: Välj den ikon som visas för kunderna på webbläsarfliken i kassan.
Globalt: Justera hörnradien för alla element (formulärinmatningar, knappar och kort).
Sidhuvud och logotyp: Välj sidhuvudposition i kassan, samt om du vill visa länkstigar, en varukorgslänk och en logotyp.
Primärt: Tillämpa designscheman för kassans huvudinnehållsområde, med till exempel bakgrundsbilder, kantlinjebredder och färgscheman.
Ordersammanfattning: Tillämpa designscheman i sidofältet i kassan som innehåller kundens ordersammanfattning, med till exempel bakgrundsbilder, kantlinjebredder och färgscheman.
Sidfot: Välj sidfotsbredd i kassan, samt om du vill visa butikspolicyer.
Typografi: Välj teckensnittsstorlek, teckensnittsfamilj och teckensnittsvariant, storlek, kerning och skiftläge för upp till 3 nivåer av sidhuvuden.
Knappar: Välj utfyllnad, kanter och stil för de primära och sekundära knapparna.
Formulär: Anpassa stilen för indata i kassaformulär, till exempel kryssrutor, textfält och valda alternativ från en lista.
Produktminiatyrer: Justera stil för kantlinjer och hörnradie för produktbilder i kassan.

Steg:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Klicka på något av de element som du vill anpassa i avsnittet Anpassningar, till exempel Header & logo (Sidhuvud och logotyp).
Justera kassaelementet efter dina önskemål med hjälp av de tillgängliga anpassningsalternativen.
Klicka på Spara.

Växla kassakonfigurationer

När du öppnar varumärkesredigeraren redigerar du kassakonfigurationen som för närvarande är live som standard. Du kan ändra vilken kassakonfiguration du vill redigera med hjälp av varumärkesredigeraren samt skapa nya kassakonfigurationer.

Läs mer om hur du hanterar livekonfigurationer och konfigurationsutkast för kassan.

Steg:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Klicka på namnet på den aktuella kassakonfigurationen, så öppnas en rullgardinsmeny som innehåller en lista med livekonfigurationen samt eventuella konfigurationsutkast. Välj sedan den kassakonfiguration som du vill anpassa:
- Välj en befintlig konfiguration som du vill redigera.
- Klicka på ⊕ Create new configuration (⊕ Skapa ny konfiguration), så omdirigeras du till kassainställningarna i din Shopify-admin.

Förhandsgranska kassan

Du kan förhandsgranska de ändringar du gör i varumärkesredigeraren när som helst genom att välja den kassakonfiguration som du vill förhandsgranska och sedan klicka på Förhandsgranska. Kassa- och kontoredigeraren öppnas i en separat flik med alla dina ändringar tillämpade så att du kan förhandsgranska hur de visas i kassan.

Steg:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Gör eventuella anpassningar av färgerna eller kassaelementen i din kassakonfiguration som du vill justera.
Klicka på Förhandsgranska.

Exportera och importera kassakonfigurationer

Du kan exportera och importera kassakonfigurationer med hjälp av JSON-filer.

Exportera en kassakonfiguration:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Välj kassakonfigurationen med tillämpade anpassningar med hjälp av varumärkesredigeraren.
Klicka på More actions (Fler åtgärder) > Export configuration (Exportera konfiguration).

Kassakonfigurationen laddas ner som en .json på din lokala enhet.

Importera en kassakonfiguration:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Välj den kassakonfiguration som du vill tillämpa den importerade varumärkesprofilen på.
Klicka på More actions (fler åtgärder) > Import configuration (importera konfiguration).
Ladda upp JSON-filen med varumärkesprofilen i dialogrutan Import checkout branding (Importera varumärkesprofil för kassan):
1. Klicka på Lägg till fil.
2. Välj lämplig JSON-fil från din enhet.
3. Klicka på Import and continue (importera och fortsätt).
Granska den förinlästa anpassningskonfigurationen. Ändra den efter behov.
Klicka på Spara.

Återställ din kassastil till standardformatet

När du redigerar en färg eller ett kassaelement med hjälp av varumärkesredigeraren kan du återställa det specifika värdet tillbaka till standardvärdet genom att klicka på Återställ intill den färg eller det element som du har ändrat.

Du kan när som helst återställa hela kassakonfigurationens varumärkesprofil till Shopifys standardvärden. Om du återställer kassakonfigurationen rensas alla anpassningar på alla sidor i varumärkesredigeraren. Den här åtgärden kan inte ångras.

Steg:

Från Shopify-admin, klicka på Appar > Checkout Blocks.
Klicka på Branding editor (Varumärkesredigeraren).
Välj den kassakonfiguration som du vill återställa.
Klicka på Återställ till standard.
I dialogrutan som bekräftar om du vill återställa till standardstilen klickar du på Fortsätt.