Log ind
Start en gratis prøveperiode

Sådan bruger du brandingeditoren i Checkout Blocks

Du kan bruge brandingeditoren i Checkout Blocks, der er drevet af Checkout Branding API'en, til at tilpasse æstetikken på dine betalings- og kontosider uden at skulle ændre noget af koden.

Du kan bruge brandingeditoren til at redigere farver og betalingselementer for enhver betalingskonfiguration. Ændringer, du foretager i designet på din betalingsproces ved hjælp af brandingeditoren, gælder for alle sider i din betalingsproces, herunder siderne Tak og Ordrestatus og siderne med nye kundekonti.

Hvis du til starte brandingeditoren fra din Shopify-administrator, skal du klikke på Apps > Checkout Blocks og derefter klikke på Brandingeditor.

På denne side

Tilpas farverne på betalingssiden

I afsnittet Farver kan du tilpasse basisfarverne på din betalingsside. Du kan også tilpasse op til fire farveskemaer, der gælder for individuelle afsnit, hvis du vil foretage mere detaljerede ændringer i dit design. Du kan redigere farvetyper, herunder markeringsfarver (for interaktive elementer, som f.eks. links) og brandfarver (bruges til elementer, som f.eks. primære og sekundære knapper).

Trin:

Customize global colors
  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. I afsnittet Farver skal du klikke på Globale farver.

  4. Hvis du vil tilsidesætte eksisterende farver på betalingssiden, skal du i afsnittet Globale farver klikke på ikonet ⊕ og derefter vælge den ønskede farve ved at foretage en af følgende handlinger:

    • Brug farvevælgeren til at vælge farven.
    • Skriv hex-farvekoden i det tilgængelige felt.

  5. Klik på Gem.

Customize color schemes
  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. I afsnittet Farver skal du klikke på Skema 1, Skema 2, Skema 3 eller Skema 4 for at tilpasse et bestemt farveskema.

  4. Vælg en af følgende komponenter, som du vil tilpasse:

    • Hovedfarver
    • Indstillinger for formular
    • Primær knap
    • Sekundær knap

  5. I afsnittet Basis skal du klikke på ikonet ⊕ ud for den farvetype, du vil tilpasse, og derefter vælge den ønskede farve ved at foretage en af følgende handlinger:

    • Brug farvevælgeren til at vælge farven.
    • Skriv hex-farvekoden i det tilgængelige felt.

  6. Valgfrit: Hvis du redigerer skemaet for Indstillinger for formular, Primær knap eller Sekundær knap, kan du også tilpasse farverne for interaktionsadfærden ved Når der vælges eller Når der peges. Klik på ikonet ⊕ ud for den farvetype, du vil tilpasse, og vælg derefter den ønskede farve ved at foretage en af følgende handlinger:

    • Brug farvevælgeren til at vælge farven.
    • Skriv hex-farvekoden i det tilgængelige felt.

  7. Klik på Gem.

Tilpas elementer i betalingsprocessen

I afsnittet Tilpasninger i brandingeditoren kan du redigere følgende elementer i din betalingsproces:

  • Favoritikon: Vælg det ikon, der skal vises for kunder på browserfanen under betalingsprocessen.
  • Globalt: Juster hjørneradius for alle elementer (formularinput, knapper og kort).
  • Sidehoved og logo: Vælg sidehovedets placering på betalingssiden, samt om brødkrummer, link til indkøbskurven og logo skal vises.
  • Hovedindhold: Anvend designskemaer på området med hovedindhold på betalingssiden, herunder baggrundsbilleder, kantbredde og farveskemaer.
  • Ordreoversigt: Anvend designskemaer på sidebjælken på betalingssiden, som indeholder kundens ordreoversigt, herunder baggrundsbilleder, kantbredde og farveskemaer.
  • Sidefod: Vælg sidefodsbredden på betalingssiden og, hvorvidt butikkens politikker skal vises.
  • Typografi: Vælg skriftstørrelse, skrifttypefamilie samt skriftens vægt, størrelse, knibning og forskellen på små og store bogstaver i op til tre niveauer i sidehoveder.
  • Knapper: Vælg margen, kanter og typografier for de primære og sekundære knapper.
  • Formularer: Tilpas typografierne for input i betalingsformularer, som f.eks. afkrydsningsfelter, tekstfelter og valgte indstillinger på en liste.
  • Miniaturebilleder af produkter: Juster typografier for kant og hjørneradius for produktbilleder på betalingssiden.

Trin:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. I afsnittet Tilpasninger skal du klikke på et af de elementer, du vil tilpasse, f.eks. Sidehoved og logo.
  4. Du kan justere betalingssideelementet efter eget valg ved hjælp af de tilgængelige tilpasningsmuligheder.
  5. Klik på Gem.

Skift betalingskonfiguration

Når du åbner brandingeditoren, redigerer du som standard den betalingskonfiguration, der er live i øjeblikket. Du kan dog ændre, hvilken betalingskonfiguration du vil redigere ved hjælp af brandingeditoren, samt oprette nye betalingskonfigurationer.

Få mere at vide om administration af din betalingssides live- og kladdekonfigurationer.

Trin:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. Klik på navnet på den aktuelle betalingskonfiguration for at åbne en rullemenu, der indeholder en liste over livekonfigurationen samt eventuelle kladdekonfigurationer, og vælg derefter den betalingskonfiguration, du vil tilpasse:
    • Vælg en eksisterende konfiguration, som du vil redigere.
    • Klik på ⊕ Opret ny konfiguration for at blive omdirigeret til din Shopify-administrators indstillinger for betaling.

Se en forhåndsvisning af din betalingsside

Du kan til enhver tid se en forhåndsvisning af de ændringer, du foretager i brandingeditoren, ved at vælge den betalingskonfiguration, du vil se en forhåndsvisning af, og derefter klikke på Forhåndsvisning. Betalings- og kontoeditoren startes på en separat fane med alle dine ændringer inkluderet, så du kan se en forhåndsvisning af, hvordan de ser ud på betalingssiden.

Trin:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. Foretag eventuelle tilpasninger i din betalingskonfigurations farver eller betalingselementer, som du vil justere.
  4. Klik på Forhåndsvisning.

Sådan eksporterer og importerer du betalingskonfigurationer

Du kan eksportere og importere betalingskonfigurationer ved hjælp af JSON-filer.

Eksportér en betalingskonfiguration:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. Vælg den betalingskonfiguration, der har tilpasninger, ved hjælp af brandingeditoren.
  4. Klik på Flere handlinger > Eksportér konfiguration.

Betalingskonfigurationen downloades som en .json på din lokale enhed.

Importér en betalingskonfiguration:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. Vælg den betalingskonfiguration, som du vil anvende den importerede brandingprofil på.
  4. Klik på Flere handlinger > Importér konfiguration.

  5. Upload din JSON-fil med branding i dialogboksen Importér betalingsbranding:

    1. Klik på Tilføj fil.
    2. Vælg den rette JSON-fil fra din enhed.
    3. Klik på Importér og fortsæt.

  6. Gennemgå den forudindlæste tilpasningskonfiguration. Rediger efter behov.

  7. Klik på Gem.

Nulstil typografien på din betalingsside til standard

Når du redigerer en farve eller et betalingselement ved hjælp af brandingeditoren, kan du nulstille den specifikke værdi tilbage til standardværdien ved at klikke på Nulstil ud for den farve eller det element, du har ændret.

Du kan når som helst nulstille hele brandingen af din betalingskonfiguration til Shopifys standardværdier. Hvis du nulstiller betalingskonfigurationen, ryddes alle tilpasninger på tværs af alle sider i brandingeditoren. Denne handling kan ikke fortrydes.

Trin:

  1. Fra din Shopify-administrator skal du klikke på Apps > Checkout Blocks.
  2. Klik på Brandingeditor.
  3. Vælg den betalingskonfiguration, du vil nulstille.
  4. Klik på Nulstil til standard.
  5. I dialogboksen Vil du nulstille til standardtypografien? skal du klikke på Fortsæt.
Kan du ikke finde de svar, du leder efter? Vi er her for at hjælpe.