Brug af branding-redigeringsværktøjet i Checkout Blocks

Du kan bruge branding-redigeringsværktøjet i Checkout Blocks, som er baseret på Checkout Branding API, til at tilpasse det æstetiske udtryk på dine betalings- og kontosider uden at skulle redigere kode.

Du kan bruge branding-redigeringsværktøjet til at redigere farverne og elementerne på betalingssiden for en hvilken som helst konfiguration af betalingssiden. Ændringer, som du foretager i designet af din betalingsside ved hjælp af branding-redigeringsværktøjet, gælder for alle sider i din betalingsproces, herunder takkesiden, ordrestatussiden og siderne for nye kundekonti.

Du starter branding-redigeringsværktøjet fra din Shopify-administrator ved at klikke på Apps > Checkout Blocks og derefter på Branding-redigeringsværktøj.

Tilpas farver for betalingssiden

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

Trin:

Tilpas globale farver
  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. I afsnittet Farver skal du klikke på Globale farver.

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

    • Brug farvevælgeren til at vælge farven.
    • Indtast HEX-farvekoden i det tilgængelige felt.
  5. Klik på Gem.

Tilpas farveskemaer
  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  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
    • Formularelementer
    • Primær knap
    • Sekundær knap
  5. I afsnittet Base skal du klikke på ikonet ved siden af den farvetype, du vil tilpasse, og derefter vælge den ønskede farve ved at gøre et af følgende:

    • Brug farvevælgeren til at vælge farven.
    • Indtast HEX-farvekoden i det tilgængelige felt.
  6. Valgfrit: Hvis du redigerer skemaet for Formularelementer, Primær knap eller Sekundær knap, kan du også tilpasse farverne for interaktionsadfærden Ved valg eller Ved hover. Klik på ikonet ud for den farvetype, du vil tilpasse, og vælg derefter den ønskede farve ved at gøre et af følgende:

    • Brug farvevælgeren til at vælge farven.
    • Indtast HEX-farvekoden i det tilgængelige felt.
  7. Klik på Gem.

Tilpas elementer for betalingssiden

I afsnittet Tilpasninger i editoren til branding kan du redigere følgende elementer for din betalingsside:

  • Favicon: Vælg det ikon, der vises for kunder i browserfanen under betaling.
  • Global: Tilpas hjørneradius for alle elementer (formularfelter, knapper og kort).
  • Sidehoved og logo: Vælg placeringen af sidehovedet på betalingssiden, samt om der skal vises brødkrummer, et link til indkøbskurven og et logo.
  • Hovedområde: Anvend designskemaer på hovedindholdsområdet på betalingssiden, herunder baggrundsbilleder, kantbredder og farveskemaer.
  • Ordreoversigt: Anvend designskemaer på sidepanelet på betalingssiden, der indeholder kundens ordreoversigt, herunder baggrundsbilleder, kantbredder og farveskemaer.
  • Sidefod: Vælg sidefodens bredde på betalingssiden, samt om butikkens politikker skal vises.
  • Typografi: Vælg skriftstørrelse, skrifttypefamilie, skriftvægt, størrelse, knibning og brug af store/små bogstaver for op til 3 niveauer af overskrifter.
  • Knapper: Vælg udfyldning, kanter og styles for de primære og sekundære knapper.
  • Formularer: Tilpas styles for inputfelter i betalingsformularen, f.eks. afkrydsningsfelter, tekstfelter og valgte indstillinger fra en liste.
  • Produktminiaturer: Juster kant- og hjørneradius-styles for produktbilleder på betalingssiden.

Trin:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. I afsnittet Tilpasninger skal du klikke på et af de elementer, du vil tilpasse, f.eks. Sidehoved og logo.

  4. Juster betalingselementet efter dine præferencer ved hjælp af de tilgængelige tilpasningsmuligheder.

  5. Klik på Gem.

Skift konfiguration for betalingssiden

Når du åbner branding-editoren, redigerer du som standard den konfiguration af betaling, der aktuelt er Aktiv. Du kan dog ændre, hvilken konfiguration af betaling du vil redigere ved hjælp af branding-editoren, og du kan også oprette nye konfigurationer af betaling.

Få mere at vide om administration af dine aktive konfigurationer og kladdekonfigurationer af betaling.

Trin:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. Klik på navnet på den aktuelle konfiguration af betaling for at åbne en rullemenu, der indeholder en liste over den aktive konfiguration og eventuelle kladdekonfigurationer, og vælg derefter den konfiguration af betaling, 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 Betalingsside.

Forhåndsvis din betalingsside

Du kan til enhver tid forhåndsvise de ændringer, du foretager i editoren til branding, ved at vælge den konfiguration for betalingssiden, du vil forhåndsvise, og derefter klikke på Forhåndsvis. Editoren til betalingsside og konti åbnes i en separat fane med alle dine ændringer anvendt, så du kan forhåndsvise, hvordan de vises på betalingssiden.

Trin:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. Foretag de tilpasninger af farverne eller elementerne i din konfiguration for betalingssiden, som du vil justere.

  4. Klik på Forhåndsvis.

Eksport og import af konfigurationer for betalingssiden

Du kan eksportere og importere konfigurationer for betalingssiden ved hjælp af JSON-filer.

Sådan eksporterer du en konfiguration for betalingssiden:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. Vælg den konfiguration for betalingssiden, som der er anvendt tilpasninger på, ved hjælp af editoren til branding.

  4. Klik på Flere handlinger > Eksportér konfiguration.

Konfigurationen for betalingssiden downloades som en .json-fil til din lokale enhed.

Sådan importerer du en konfiguration for betalingssiden:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. Vælg den konfiguration for betalingssiden, som du vil anvende den importerede brandingprofil på.

  4. Klik på Flere handlinger > Importér konfiguration.

  5. I dialogboksen Importér branding for betalingssiden skal du uploade din JSON-fil med branding:

    1. Klik på Tilføj fil.
    2. Vælg den relevante JSON-fil fra din enhed.
    3. Klik på Importér og fortsæt.
  6. Gennemgå den forudindlæste konfiguration for tilpasning. Rediger den efter behov.

  7. Klik på Gem.

Nulstil stilen for din betalingsside til standard

Når du redigerer en farve eller et element for betalingssiden i editoren til branding, kan du nulstille den specifikke værdi til standardværdien ved at klikke på Nulstil ved siden af den farve eller det element, du har ændret.

Du kan til enhver tid nulstille hele brandingen for din konfiguration af betalingssiden til Shopifys standardværdier. Nulstilling af konfigurationen for betalingssiden rydder alle tilpasninger på alle sider i brandingeditoren. Denne handling kan ikke fortrydes.

Trin:

  1. Gå til Apps > Checkout Blocks i din Shopify-administrator.

  2. Klik på Editor til branding.

  3. Vælg den konfiguration af betalingssiden, som du vil nulstille.

  4. Klik på Nulstil til standard.

  5. I dialogboksen Nulstil til standardtypografier? skal du klikke på Fortsæt.