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 kassa- och kontosidor utan att behöva ändra någon kod.

Du kan använda varumärkesredigeraren för att redigera färger och kassakomponenter för valfri kassakonfiguration. Ändringar som du gör i din kassadesign med hjälp av varumärkesredigeraren gäller för alla sidor i din kassa, inklusive tacksidan, orderstatussidan och sidor för nya kundkonton.

För att starta varumärkesredigeraren från din Shopify-admin klickar du på Appar > Checkout Blocks och sedan på Varumärkesredigerare.

Anpassa kassafärger

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

Steg:

Anpassa globala färger
  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Klicka på Globala färger i avsnittet Färger.

  4. För att åsidosätta en befintlig kassafärg klickar du på ikonen i avsnittet Globala färger och väljer 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.
    • Ange HEX-färgkoden i det tillgängliga fältet.
  5. Klicka på Spara.

Anpassa färgscheman
  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. I avsnittet Färger klickar du på Schema 1, Schema 2, Schema 3 eller Schema 4 för att anpassa ett specifikt färgschema.

  4. Välj någon av följande komponenter som du vill anpassa:

    • Huvudfärger
    • Formulärkontroller
    • Primär knapp
    • Sekundär knapp
  5. Klicka på ikonen i avsnittet Bas bredvid den färgtyp du vill anpassa och 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.
    • Ange HEX-färgkoden i det tillgängliga fältet.
  6. Valfritt: Om du redigerar schemat för Formulärkontroller, Primär knapp eller Sekundär knapp kan du även anpassa färgerna för interaktionsbeteendet Vid val eller Vid hovring. Klicka på ikonen bredvid den färgtyp du vill anpassa och 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.
    • Ange HEX-färgkoden i det tillgängliga fältet.
  7. 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 kunder på webbläsarfliken i kassan.
  • Globalt: Justera hörnradien för alla element (formulärinmatningar, knappar och kort).
  • Sidhuvud och logotyp: Välj sidhuvudets position i kassan, samt om länkstigar, en varukorgslänk och en logotyp ska visas.
  • Huvudinnehåll: Tillämpa designscheman på kassans huvudinnehållsyta, inklusive bakgrundsbilder, kantlinjebredder och färgscheman.
  • Ordersammanfattning: Tillämpa designscheman på sidofältet i kassan som innehåller kundens ordersammanfattning, inklusive bakgrundsbilder, kantlinjebredder och färgscheman.
  • Sidfot: Välj sidfotens bredd i kassan, samt om butikspolicyer ska visas.
  • Typografi: Välj teckenstorlek, teckensnittsfamilj, teckensnittsvikt, storlek, kerning och skiftlägen för upp till tre rubriknivåer.
  • Knappar: Välj utfyllnad, kantlinjer och stilar för de primära och sekundära knapparna.
  • Formulär: Anpassa stilarna för inmatningar i kassaformulär, såsom kryssrutor, textfält och valda alternativ från en lista.
  • Produktminiatyrer: Justera kantlinje- och hörnradiestilar för produktbilder i kassan.

Steg:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. I avsnittet Anpassningar klickar du på något av de element du vill anpassa, till exempel Sidhuvud och logotyp.

  4. Använd de tillgängliga anpassningsalternativen för att justera kassaelementet efter dina önskemål.

  5. Klicka på Spara.

Växla kassakonfigurationer

När du öppnar varumärkesredigeraren redigerar du som standard den kassakonfiguration som för närvarande är Aktiv. Du kan dock använda varumärkesredigeraren för att ändra vilken kassakonfiguration du vill redigera, samt skapa nya kassakonfigurationer.

Mer information om att hantera dina aktiva kassakonfigurationer och kassautkast.

Steg:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Klicka på namnet på den aktuella kassakonfigurationen för att öppna en rullgardinsmeny med en lista över den aktiva konfigurationen och eventuella utkast till konfigurationer, och välj sedan den kassakonfiguration som du vill anpassa:

    • Välj en befintlig konfiguration som du vill redigera.
    • Klicka på ⊕ Skapa ny konfiguration för att omdirigeras till Kassa-inställningarna i din Shopify-admin.

Förhandsgranska kassan

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

Steg:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Gör de anpassningar du vill i kassakonfigurationens färger eller kassaelement.

  4. Klicka på Förhandsgranska.

Exportera och importera kassakonfigurationer

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

Exportera en kassakonfiguration:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Välj den kassakonfiguration som anpassningar har tillämpats på med varumärkesredigeraren.

  4. Klicka på Fler åtgärder > Exportera konfiguration.

Kassakonfigurationen laddas ned som en .json-fil till din lokala enhet.

Importera en kassakonfiguration:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Välj den kassakonfiguration som du vill tillämpa den importerade varumärkesprofilen på.

  4. Klicka på Fler åtgärder > Importera konfiguration.

  5. Ladda upp din JSON-fil med varumärkesprofilen i dialogrutan 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å Importera och fortsätt.
  6. Granska den förinlästa anpassningskonfigurationen. Ändra den vid behov.

  7. Klicka på Spara.

Återställ kassastilen till standard

När du redigerar en färg eller ett kassaelement med hjälp av varumärkesredigeraren kan du återställa det specifika värdet till standardvärdet genom att klicka på Återställ bredvid färgen eller elementet som du ändrade.

Du kan när som helst återställa varumärkesanpassningen för din kassakonfiguration till Shopifys standardvärden. Om du återställer kassakonfigurationen raderas alla anpassningar på alla sidor i varumärkesredigeraren. Den här åtgärden kan inte ångras.

Steg:

  1. Gå till Appar > Checkout Blocks från din Shopify-admin.

  2. Klicka på Varumärkesredigerare.

  3. Välj den kassakonfiguration som du vill återställa.

  4. Klicka på Återställ till standard.

  5. Klicka på Fortsätt i dialogrutan Återställa till standardstilar?.