Bruke merkevareredigeringen i Checkout Blocks

Du kan bruke merkevareredigeringen i Checkout Blocks, som drives av Checkout Branding API, til å tilpasse utseendet på kasse- og kontosidene uten å måtte endre kode.

Du kan bruke merkevareredigeringen til å redigere fargene og kasseelementene for alle kassekonfigurasjoner. Endringer du gjør i kasseutformingen med merkevareredigeringen, gjelder for alle sider i kassen, inkludert takkesiden, statussiden og nye kundekontosider.

For å starte merkevareredigeringen fra Shopify-administrator, klikker du på Apper > Checkout Blocks og deretter på Merkevareredigering.

Tilpass farger i kassen

I Farger-seksjonen kan du tilpasse grunnfargene i kassen. Du kan også tilpasse opptil fire fargeskjemaer som gjelder for enkeltseksjoner når du vil gjøre mer detaljerte endringer i designet. Du kan redigere fargetyper, inkludert aksentfarger (for interaktive elementer, som koblinger) og merkevarefarger (brukes for elementer som primære og sekundære knapper).

Trinn:

Tilpass globale farger
  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Klikk på Globale farger i Farger-seksjonen.

  4. For å overstyre en eksisterende farge i kassen klikker du på -ikonet i Globale farger-seksjonen, og deretter velger du fargen du vil ha ved å gjøre ett av følgende:

    • Bruk fargevelgeren til å velge fargen.
    • Skriv inn HEX-fargekoden i det tilgjengelige feltet.
  5. Klikk på Lagre.

Tilpass fargeskjemaer
  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. I Farger-seksjonen klikker du på Skjema 1, Skjema 2, Skjema 3 eller Skjema 4 for å tilpasse et bestemt fargeskjema.

  4. Velg en av følgende komponenter du vil tilpasse:

    • Hovedfarger
    • Skjemakontroller
    • Primær knapp
    • Sekundær knapp
  5. Klikk på -ikonet ved siden av fargetypen du vil tilpasse i Base-seksjonen, og velg deretter fargen du vil ha ved å gjøre ett av følgende:

    • Bruk fargevelgeren til å velge fargen.
    • Skriv inn HEX-fargekoden i det tilgjengelige feltet.
  6. Valgfritt: Hvis du redigerer skjemaet for Skjemakontroller, Primær knapp eller Sekundær knapp, kan du også tilpasse fargene for interaksjonsatferden Ved valg eller Ved pekerkontakt. Klikk på -ikonet ved siden av fargetypen du vil tilpasse, og velg deretter fargen du vil ha ved å gjøre ett av følgende:

    • Bruk fargevelgeren til å velge fargen.
    • Skriv inn HEX-fargekoden i det tilgjengelige feltet.
  7. Klikk på Lagre.

Tilpass kasse-elementer

I Tilpasninger-seksjonen i Branding editor kan du redigere følgende elementer i kassen:

  • Favicon: Velg ikonet som vises for kundene i nettleserfanen i kassen.
  • Globalt: Juster hjørneradius for alle elementer (skjemafelt, knapper og kort).
  • Topptekst og logo: Velg posisjonen til toppteksten i kassen, i tillegg til om du vil vise søkebaner, en handlekurvkobling og en logo.
  • Hoveddel: Bruk designskjemaer på hovedinnholdsområdet i kassen, inkludert bakgrunnsbilder, kantlinjebredder og fargeskjemaer.
  • Bestillingsoversikt: Bruk designskjemaer på sidefeltet i kassen som inneholder kundens bestillingsoversikt, inkludert bakgrunnsbilder, kantlinjebredder og fargeskjemaer.
  • Bunntekst: Velg bredden på bunnteksten i kassen, i tillegg til om du vil vise butikkretningslinjer.
  • Typografi: Velg skriftstørrelse, skrifttypefamilie, skrifttykkelse, størrelse, kerning og bruk av store/små bokstaver for opptil tre overskriftsnivåer.
  • Knapper: Velg utfylling, kantlinjer og stiler for de primære og sekundære knappene.
  • Skjemaer: Tilpass stilene for skjemafelt i kassen, som avmerkingsbokser, tekstfelter og valgte alternativer fra en liste.
  • Produktminiatyrbilder: Juster stilene for kantlinje og hjørneradius for produktbilder i kassen.

Trinn:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Klikk på et av elementene du vil tilpasse i Tilpasninger-seksjonen, for eksempel Topptekst og logo.

  4. Bruk de tilgjengelige tilpasningsalternativene til å justere kasse-elementet etter eget ønske.

  5. Klikk på Lagre.

Bytt kassekonfigurasjoner

Når du åpner redigeringsprogrammet for merkevarebygging, redigerer du kassekonfigurasjonen som er Aktiv som standard. Du kan imidlertid bytte til en annen kassekonfigurasjon du vil redigere med redigeringsprogrammet for merkevarebygging, eller opprette nye kassekonfigurasjoner.

Finn ut mer om å administrere aktive kassekonfigurasjoner og utkast til kassekonfigurasjoner.

Trinn:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Klikk på navnet til gjeldende kassekonfigurasjon for å åpne en rullegardinmeny med en liste over den aktive konfigurasjonen og eventuelle konfigurasjonsutkast, og velg deretter kassekonfigurasjonen du vil tilpasse:

    • Velg en eksisterende konfigurasjon du vil redigere.
    • Klikk på ⊕ Opprett ny konfigurasjon for å bli videresendt til Kasse-innstillingene i Shopify-administratorpanelet.

Forhåndsvis kassen

Du kan når som helst forhåndsvise endringene du gjør i Branding editor ved å velge kassekonfigurasjonen du vil forhåndsvise, og deretter klikke på Forhåndsvisning. Redigeringsverktøyet for kasse og kontoer åpnes i en egen fane med alle endringene lagt til, slik at du kan forhåndsvise hvordan de ser ut i kassen.

Trinn:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Gjør eventuelle tilpasninger av kassekonfigurasjonens farger eller kasse-elementer du vil justere.

  4. Klikk på Forhåndsvisning.

Eksportere og importere kassekonfigurasjoner

Du kan eksportere og importere kassekonfigurasjoner ved hjelp av JSON-filer.

Eksporter en kassekonfigurasjon:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Velg kassekonfigurasjonen med tilpasninger som er lagt til i Branding editor.

  4. Klikk på Flere handlinger > Eksporter konfigurasjon.

Kassekonfigurasjonen lastes ned som en .json-fil til den lokale enheten din.

Importer en kassekonfigurasjon:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Velg kassekonfigurasjonen du vil bruke den importerte merkevareprofilen på.

  4. Klikk på Flere handlinger > Importer konfigurasjon.

  5. I dialogboksen Importer merkevarebygging for kasse laster du opp JSON-filen for merkevarebygging:

    1. Klikk på Legg til fil.
    2. Velg den aktuelle JSON-filen fra enheten din.
    3. Klikk på Importer og fortsett.
  6. Se gjennom den forhåndslastede tilpasningskonfigurasjonen. Endre den ved behov.

  7. Klikk på Lagre.

Tilbakestill kassestilen til standard

Når du redigerer en farge eller et kasse-element i Branding editor, kan du tilbakestille den bestemte verdien til standardverdien ved å klikke på Tilbakestill ved siden av fargen eller elementet du endret.

Du kan når som helst tilbakestille all merkevarebygging for kassekonfigurasjonen til Shopifys standardverdier. Tilbakestilling av kassekonfigurasjonen fjerner alle tilpasninger på alle sider i redigeringsprogrammet for merkevarebygging. Handlingen kan ikke angres.

Trinn:

  1. Gå til Apper > Checkout Blocks fra Shopify-administratorpanelet.

  2. Klikk på Branding editor.

  3. Velg kassekonfigurasjonen du vil tilbakestille.

  4. Klikk på Tilbakestill til standard.

  5. I dialogboksen Tilbakestille til standardstiler? klikker du på Fortsett.