De branding-editor in Checkout Blocks gebruiken

Je kunt de branding-editor in Checkout Blocks, die wordt mogelijk gemaakt door de Checkout Branding API, gebruiken om de vormgeving van je checkout- en accountpagina's aan te passen zonder dat je code hoeft te bewerken.

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

Als je de branding-editor wilt openen vanuit het Shopify-beheercentrum, klik je op Apps > Checkout Blocks en vervolgens op Branding-editor.

Checkout-kleuren aanpassen

In de sectie Kleuren kun je de basiskleuren van je checkout aanpassen. Je kunt ook tot 4 kleurenschema's aanpassen die op afzonderlijke secties worden toegepast als je je ontwerp gedetailleerder wilt bewerken. Je kunt kleursoorten bewerken, waaronder accentkleuren (voor interactieve elementen, zoals links) en merkkleuren (gebruikt voor elementen zoals primaire en secundaire knoppen).

Stappen:

Checkout-elementen aanpassen

In de sectie Aanpassingen van de Branding-editor kun je de volgende elementen van je checkout bewerken:

• Favicon: kies het pictogram dat tijdens de checkout aan klanten wordt weergegeven in het browsertabblad.
• Algemeen: pas de hoekstraal aan voor alle elementen (formulierinvoervelden, knoppen en kaarten).
• Koptekst en logo: selecteer de positie van de koptekst in de checkout en geef aan of je broodkruimels, een link naar de winkelwagen en een logo wilt weergeven.
• Hoofdgedeelte: pas ontwerpschema's toe op het hoofdcontentgebied van de checkout, inclusief achtergrondafbeeldingen, randbreedtes en kleurenschema's.
• Besteloverzicht: pas ontwerpschema's toe op de zijbalk van de checkout met het besteloverzicht van de klant, inclusief achtergrondafbeeldingen, randbreedtes en kleurenschema's.
• Voettekst: selecteer de breedte van de voettekst in de checkout en geef aan of je het winkelbeleid wilt weergeven.
• Typografie: selecteer de lettergrootte, lettertypefamilie, tekenstijl, grootte, spatiëring en kapitalisatie voor maximaal 3 niveaus van koppen.
• Knoppen: selecteer de padding, randen en stijlen van de primaire en secundaire knoppen.
• Formulieren: pas de stijlen aan voor invoervelden van het checkout-formulier, zoals selectievakjes, tekstvelden en geselecteerde opties uit een lijst.
• Productminiaturen: pas de rand- en hoekstraalstijlen aan voor productafbeeldingen in de checkout.

Stappen:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Klik in de sectie Aanpassingen op een van de elementen die je wilt aanpassen, zoals Koptekst en logo.

4. Pas het checkout-element naar wens aan met de beschikbare aanpassingsopties.

5. Klik op Opslaan.

Wisselen van checkout-configuraties

Wanneer je de branding-editor opent, bewerk je standaard de checkout-configuratie die momenteel Actief is. Je kunt echter wijzigen welke checkout-configuratie je in de branding-editor wilt bewerken en je kunt nieuwe checkout-configuraties aanmaken.

Meer informatie over het beheren van je actieve en concept-checkout-configuraties.

Stappen:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Klik op de naam van de huidige checkout-configuratie om een vervolgkeuzelijst te openen met een overzicht van de actieve configuratie en eventuele conceptconfiguraties. Selecteer vervolgens de checkout-configuratie die je wilt aanpassen:

   • Selecteer een bestaande configuratie die je wilt bewerken.
   • Klik op ⊕ Nieuwe configuratie aanmaken om te worden doorgestuurd naar de Checkout-instellingen van je Shopify-beheercentrum.

Een voorbeeld van je checkout bekijken

Je kunt op elk gewenst moment een voorbeeld van de wijzigingen bekijken die je in de Branding-editor aanbrengt door de checkout-configuratie te selecteren waarvan je een voorbeeld wilt bekijken en vervolgens op Voorbeeld bekijken te klikken. De checkout- en accounteditor wordt geopend in een apart tabblad met al je wijzigingen, zodat je een voorbeeld kunt bekijken van hoe ze in de checkout worden weergegeven.

Stappen:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Breng de gewenste aanpassingen aan in de kleuren of checkout-elementen van je checkout-configuratie.

4. Klik op Voorbeeld bekijken.

Checkout-configuraties exporteren en importeren

Je kunt checkout-configuraties exporteren en importeren met JSON-bestanden.

Een checkout-configuratie exporteren:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Selecteer met de Branding-editor de checkout-configuratie waarop aanpassingen zijn toegepast.

4. Klik op Meer acties > Configuratie exporteren.

De checkout-configuratie wordt als een .json-bestand gedownload naar je lokale apparaat.

Een checkout-configuratie importeren:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Selecteer de checkout-configuratie waarop je het geïmporteerde brandingprofiel wilt toepassen.

4. Klik op Meer acties > Configuratie importeren.

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

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

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

7. Klik op Opslaan.

Je checkout-stijl opnieuw instellen

Wanneer je een kleur of checkout-element bewerkt met de Branding-editor, kun je de specifieke waarde opnieuw instellen op de standaardwaarde door naast de kleur of het element dat je hebt gewijzigd op Opnieuw instellen te klikken.

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

Stappen:

1. Ga vanuit je Shopify-beheercentrum naar Apps > Checkout Blocks.

2. Klik op Branding-editor.

3. Selecteer de checkoutconfiguratie die je opnieuw wilt instellen.

4. Klik op Terugzetten naar standaard.

5. Klik in het dialoogvenster Terugzetten naar standaardstijlen? op Doorgaan.