Inloggen
Gratis proefperiode starten

Werken met de branding-editor in Checkout Blocks

Je kunt de branding-editor in Checkout Blocks (mogelijk gemaakt door de Checkout Branding API) gebruiken om het uiterlijk van je betaal- en accountpagina aan te passen zonder dat je code hoeft te wijzigen.

Je kunt de branding-editor gebruiken om de kleuren en checkout-elementen voor elke checkoutconfiguratie te bewerken. Wijzigingen die je met de branding-editor aanbrengt in het ontwerp van de checkout zijn van toepassing op alle pagina's van de checkout, inclusief de bedanktpagina, de bestelstatuspagina en de pagina's voor nieuwe klantaccounts.

Als je de branding-editor in het Shopify-beheercentrum wilt starten, klik je op Apps > Checkout Blocks en tot slot op Branding-editor.

Op deze pagina

De kleuren van de checkout aanpassen

In de sectie Kleuren kun je de basiskleuren van je checkout aanpassen. Je kunt ook tot maar liefst vier kleurschema's aanpassen die je op afzonderlijke secties toepast als je je ontwerp in meer detail wil bewerken. Je kunt kleurtypen bewerken, zoals accentkleuren (voor interactieve elementen, zoals links) en merkkleuren (voor elementen als primaire en secundaire knoppen).

Stappen:

Customize global colors
  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Klik in de sectie Kleuren op Algemene kleuren.

  4. Als je een bepaalde checkoutkleur wil vervangen, klik je in de sectie Algemene kleuren op het pictogram ⊕ en selecteer je de gewenste kleur op een van de volgende manieren:

    • Gebruik de kleurkiezer om de kleur te selecteren.
    • Typ de HEX-kleurcode in het beschikbare veld.

  5. Klik op Opslaan.

Customize color schemes
  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Klik in de sectie Kleuren op Schema 1, Schema 2, Schema 3 of Schema 4 om een specifiek kleurenschema aan te passen.

  4. Selecteer een van de volgende onderdelen die je wil aanpassen:

    • Hoofdkleuren
    • Besturingselementen formulier
    • Primaire knop
    • Secundaire knop

  5. Klik in de sectie Basis op het pictogram ⊕ naast het kleurtype dat je wil aanpassen en selecteer de gewenste kleur op een van de volgende manieren:

    • Gebruik de kleurkiezer om de kleur te selecteren.
    • Typ de HEX-kleurcode in het beschikbare veld.

  6. Optioneel: Als je het schema voor de Besturingselementen formulier, Primaire knop of Secundaire knop bewerkt, kun je ook de kleuren voor de muisinteractie Bij selectie of Bij aanwijzen aanpassen. Klik op het pictogram ⊕ naast het kleurtype dat je wil aanpassen en selecteer de gewenste kleur op een van de volgende manieren:

    • Gebruik de kleurkiezer om de kleur te selecteren.
    • Typ de HEX-kleurcode in het beschikbare veld.

  7. Klik op Opslaan.

Checkout-elementen aanpassen

Je kunt de volgende elementen van de checkout bewerken in de sectie Aanpassingen van de branding-editor:

  • Favicon: kies het pictogram dat tijdens het afrekenen aan klanten wordt weergegeven op het browsertabblad.
  • Algemeen: pas de hoekradius voor alle elementen aan (formulierinvoer, knoppen en kaarten).
  • Koptekst en logo: selecteer de positie van de koptekst in de checkout en of je broodkruimels, een winkelwagenlink en een logo wil weergeven.
  • Hoofd: pas ontwerpschema's toe op het hoofdgedeelte van de checkout, waaronder achtergrondafbeeldingen, randbreedten en kleurenschema's.
  • Besteloverzicht: pas ontwerpschema's toe op de zijbalk van de checkout met het besteloverzicht van de klant, waaronder achtergrondafbeeldingen, randbreedten en kleurenschema's.
  • Voettekst: selecteer de breedte van de voettekst van de checkout en of je het winkelbeleid wil weergeven.
  • Typografie: selecteer de tekengrootte, de lettertypefamilie en het lettertypegewicht, de grootte, spatiëring en hoofd-/kleine letters voor maximaal drie niveaus kopteksten.
  • Knoppen: selecteer de opvulling, randen en stijlen van de primaire en secundaire knoppen.
  • Formulieren: pas de stijlen aan voor de invoer op het checkoutformulier, zoals selectievakjes, tekstvelden en in een lijst geselecteerde opties.
  • Productminiaturen: pas de stijlen voor de rand en hoekradius aan voor productafbeeldingen in de checkout.

Stappen:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Klik in de sectie Aanpassingen op de elementen die je wil aanpassen, bijvoorbeeld Koptekst en logo.
  4. Pas het checkout-element aan met behulp van de beschikbare aanpassingsopties.
  5. Klik op Opslaan.

Checkoutconfiguraties wisselen

Wanneer je de branding-editor opent, bewerk je standaard de checkoutconfiguratie die op dat moment Live is. Maar je kunt met de branding-editor een andere checkoutconfiguratie kiezen om te bewerken en nieuwe checkoutconfiguraties maken.

Lees meer over het beheren van je checkoutconfiguraties die de status 'Live' en 'Concept' hebben.

Stappen:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Klik op de naam van de huidige checkoutconfiguratie. Er wordt een vervolgkeuzelijst geopend met de live configuratie en eventuele conceptconfiguraties waarin je de configuratie kiest die je wil aanpassen:
    • Selecteer een bestaande configuratie die je wil bewerken.
    • Klik op ⊕ Nieuwe configuratie maken. Je wordt omgeleid naar de instellingen voor de Checkout in het Shopify-beheercentrum.

Een voorbeeld van de checkout bekijken

Je kunt op elk gewenst moment de wijzigingen bekijken die je in de branding-editor hebt gemaakt: selecteer de checkoutconfiguratie die je wil bekijken en klik op Voorbeeld. De checkout- en accounteditor wordt op een apart tabblad met al je wijzigingen geopend, zodat je een voorbeeld kunt bekijken van hoe dit er bij de checkout uitziet.

Stappen:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Maak de gewenste aanpassingen aan de kleuren of andere elementen van je checkoutconfiguratie.
  4. Klik op Voorbeeld.

Checkoutconfiguraties exporteren en importeren

Je kunt checkoutconfiguraties met JSON-bestanden exporteren en importeren.

Een checkoutconfiguratie exporteren:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Selecteer de checkoutconfiguratie met de aanpassingen die je er met de branding-editor in hebt aangebracht.
  4. Klik op Meer acties > Configuratie exporteren.

De checkoutconfiguratie wordt als een .json naar je lokale apparaat gedownload.

Een checkout-configuratie importeren:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Selecteer de checkoutconfiguratie waarop je het geïmporteerde merkprofiel wil toepassen.
  4. Klik op Meer acties > Configuratie importeren.

  5. Upload je JSON-brandingbestand in het dialoogvenster Checkout-branding importeren:

    1. Klik op Bestand toevoegen.
    2. Selecteer het desbetreffende JSON-bestand op je apparaat.
    3. Klik op Importeren en doorgaan.

  6. Controleer de vooraf geladen aanpassingsconfiguratie. Wijzig deze waar nodig.

  7. Klik op Opslaan.

De checkoutstijl terugzetten naar standaardinstellingen

Wanneer je een kleur of een checkout-element met de branding-editor bewerkt, kun je de desbetreffende waarde terugzetten naar de standaardwaarde: klik op Opnieuw instellen naast de kleur of het element die of dat je hebt gewijzigd.

Je kunt op elk gewenst moment de hele checkoutconfiguratie-branding terugzetten naar de standaardwaarden van Shopify. Als je de checkoutconfiguratie opnieuw instelt, worden alle aanpassingen op alle pagina's van de branding-editor gewist. Deze actie kan niet ongedaan worden gemaakt.

Stappen:

  1. Klik in het Shopify-beheercentrum op Apps > Checkout Blocks.
  2. Klik op Branding-editor.
  3. Selecteer de checkoutconfiguratie die je opnieuw wil instellen.
  4. Klik op Opnieuw instellen op standaardwaarden.
  5. In het dialoogvenster Opnieuw instellen op standaardwaarden? klik je op Doorgaan.
Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.