Oppgrader kassen på nett

Du kan tilpasse kassen din på nett for å utvide merkevaren din, endre meldinger, tjene opp tilbud og gjøre andre forbedringer for kundenes opplevelser. For å sikre at tilpasningene dine er kompatible med pågående endringer som er gjort av Shopify, må du oppdatere kassen med jevne mellomrom.

Du må gjøre følgende for å klargjøre denne oppgraderingen:

1. Forhåndsvis den nye kassen og test hvordan det er for kundene å gå til kassen. Alt ettersom hvilke tilpasninger du har gjort i kassen, må du kanskje gjøre endringer i checkout.liquid-filen før du kan oppgradere.
2. Etter du er fornøyd med endringene, må du oppgradere butikken din for å bruke den nye Shopify-kassen.

Forhåndsvis kassen og se etter feil

Før du oppgraderer butikken din til den nye versjonen av kassen, må du sørge for å gjennomgå endringene.

Trinn:

1. Fra Shopify-administrator går du til siden for Kasseoppgradering, og klikker deretter Forhåndsvis kasse.
2. Velg det gjeldende temaet fra listen og klikk på Forhåndsvisning.
3. Opprett en testkasse ved å fortsette gjennom betalingsprosessen som kunde.

Merk

Noen betalingsleverandører har en minimumspris for testkasser. For Shopify Payments er det 0,50 CAD, 0,35 USD eller 0,30 EUR. Andre betalingsleverandører kan ha andre terskelverdier.

Hvis du får en feilmelding som sier Betalingen din kunne ikke behandles akkurat nå, prøv igjen om noen minutter, kan du prøve å øke prisen på testbestillingen, eller gjennomføre en testbetaling med gratis varer.

Hvis du finner noen feil under disse testene, er noen av tilpasningene i kassen din i konflikt med andre forbedringer i den nye versjonen. Hvis det er tilfelle, må du gjøre endringer i checkout.liquid-filen før du oppgraderer.

Løse feil

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Klikk på …-knappen og deretter på Dupliser.
3. Fra Flere temaer finner du det dupliserte temaet og klikker på knappen … > Rediger kode. Gjør endringene og test dem ved å bruke dette duplikatet og den upubliserte versjonen av temaet.

Merk

Når du gjør endringer i et tema eller tester et tema, oppretter du en kopi og jobber med kopien. Hvis du gjør en feil mens du jobber med kopien, kan du slette kopien og deretter opprette en ny kopi fra det opprinnelige temaet uten å påvirke kundene dine.

1. Åpne checkout.liquid-filen.

2. Forhåndsvis checkout.liquid-filen fra det dupliserte temaet med den nye Shopify-kassen:

Hvis du har feil eller har lagt merke til problemer med hvordan kassen ser ut rent visuelt, må du redigere checkout.liquid-filen for å løse problemet.

Oppgrader til den nye Shopify-kassen

Oppgradering av kassen er en totrinnsprosess som krever at du oppgraderer Shopify-kassen og erstatter det nåværende, publiserte temaet med den dupliserte kopien som inneholder endringene.

Advarsel

Forsikre deg om at du har forhåndsvist kassen din før du gjør denne oppgraderingen. Du må være sikker på at denne oppgraderingen ikke påvirker kasseopplevelsen til kundene dine, og at de fortsatt kan betale for bestillingene sine i den nye kassen.

Velg en mindre travel tid på dagen for å utføre oppgraderingen (for eksempel tidlig om morgenen, sent på kvelden eller i helgen) for å minimere eventuelle forstyrrelser.

Trinn:

1. Fra Kasseoppgraderingsiden klikker du på Oppgrader kasse (denne knappen er plassert nederst på siden).

2. Hvis du har oppdaget feil ved første forhåndsvisning av temaet, må du først sørge for at de er løst (se Løse feil over). Publiser deretter det oppdaterte dupliserte temaet:

Kassen er oppgradert og det dupliserte temaet er nå det nye temaet ditt.

Hva er nytt i Shopify-kassen

Den nye versjonen av Shopify-kassen inneholder følgende endringer og nye funksjoner:

• Abonnementer
• Mersalg
• Tipsing i kassen
• Henting og lokal leveranse
• Ytterligere internasjonale felt
• Spor bestilling med Shop-knapp
• Oppdateringer av statusside
• Generelle filendringer
• Skjeletter/innlastingstilstander
• Feilmeldinger
• Endringer i dataattributter
• Tilgjengelighetsforbedringer

Abonnementer

Flere seksjoner er lagt til i Shopify-kassen, slik at du kan tilby abonnementsprodukter samtidig som du opprettholder kassetilpasningene. Disse seksjonene lar deg selge abonnementsprodukter og behandle gjentakende betalinger direkte i Shopify-kassen.

Etter at du har fullført kasseoppgraderingen kan du tilby abonnementer ved å legge til en abonnementsapp fra Shopify App Store, eller bygge en tilpasset app med nye abonnement-API-er.

Finn ut mer om abonnementer i Shopify Help Center.

• Når abonnementer er aktivert vises fraktmetodene som brukes for abonnementer separat fra de som har engangskjøp.
• .product_description_variant Span.product_description_selling_plan vises som en ekstra varelinje hvis det er et abonnement knyttet til produktet.
• En periodisk totalsum med et tilhørende verktøytips vises under totalsummen i bestillingssammendraget.
• Fraktalternativer for abonnementer vises når et abonnementsprodukt er inkludert i bestillingen.

Mersalg

Nye oppsalgs apper for etter kjøp er tilgjengelig i Shopify App Store. Disse appene presenterer tilbudene etter kjøp til kundene dine direkte i Shopify-kassen, og modifiserer deres fullførte bestilling til å inkludere det oppsolgte produktet uten å måtte legge inn betalings-eller fraktinformasjon.

Denne kasseoppgraderingen inkluderer endringer i betalingsfilene som sørger for at mersalg etter kjøpet fungerer med den tilpassede kassen.

Finn ut mer om mersalg etter kjøpet.

• Når en gyldig app for etterkjøpssalg er installert i Shopify-administrator vil kundene motta etterkjøpstilbud.

Merk

Tilpasning av etterkjøpssiden gjøres inne i tredjepartsappen for mersalg. Den kan ikke tilpasses med checkout.liquid.

Tipsing i kassen

Tipsalternativer kan brukes til å la kunder legge til tips i nettbestillingen deres, eller for å innhente donasjoner i stedet for tips. Når tipsing er aktivert vises en Legg til tips-seksjon i betalingsmetodetrinnet i kassen. Legg til tips-seksjonen inkluderer tre forhåndsvalgte tipsalternativer i tillegg til et felt for å angi et egendefinert tipsbeløp.

Finn ut mer om å tilby tipsalternativer.

• Når tipsing er aktivert vises en Legg til tips-seksjon i betalingsmetodetrinnet i kassen.

Henting og lokal leveranse

Lokal henting og levering er nye leveringsmetoder som lar kunder motta bestillingene sine lokalt. Når disse leveringsmetodene er aktivert, kan kundene velge lokal henting eller levering i frakttrinnet i kassen.

Finn ut hvordan du aktiverer lokal henting og lokal levering.

• Ytterligere felt for lokal levering vises når lokal levering er aktivert og valgt av kunden.
• Hvis lokal henting er aktivert vises en leveringsmetodeseksjon for kunden på Informasjon-siden i kassen. Hvis frakt ikke er tilgjengelig, vises bare henteinformasjon.

• Leveringsmåter vises som distinkte faner.

  • Hvis du velger Send blir kundene bedt om å oppgi leveringsinformasjon, og viser tilgjengelige leveringsmåter når man klikker Fortsett til frakt.
  • Hvis du velger Hent vises en liste over hentesteder. Kundene klikker på alternativknappen for det ønskede hentestedet og klikker på Fortsett til betaling.

• Hvis kunder velger Hent i leveringstrinnet i kassen blir ikke fraktinformasjonen innhentet. Kunder må angi faktureringsinformasjon i betalingstrinnet i kassen.

• Instruksjoner for lokal levering vises på siden for bestillingsstatus. Disse kan redigeres ved å gå til Innstillinger > Frakt og levering i Shopify-administrator. I Lokal henting-seksjonen finner du stedet du vil redigere og klikker på Administrer.

• Statussiden for bestillinger har blitt oppdatert for å vise fremdriften til leveranser og hentinger. Meldinger vises når:

  • en bestilling er klargjort og er klar til levering.
  • en leveranse er fullført. Denne meldingen inneholder også en kobling for å endre rekkefølgen på de samme varene.
  • en hentebestilling er bekreftet, noe som indikerer at kunden vil motta en e-post når den er klar til å hentes.
  • en hentebestilling er klar til å hentes.
  • en hentebestilling er hentet.

Ytterligere internasjonale felt

Noen land har unike fraktregler du må oppfylle for at forsendelsene dine skal nå kundene dine. Ytterligere felt er nå tilgjengelig for land med unike fraktregler. Disse nye feltene vises i betalingsmetodetrinnet i kassen.

Finn ut mer om internasjonale tilleggsfelter.

• Tilleggsfelter i kassen vises bare for kunder i Brasil, Sør-Korea, Italia og Kina.

Spor bestilling med Shop-knapp

Spor bestillingen med Shop-knappen på status- og takkesidene har blitt oppdatert med et nytt design.

Finn ut mer om Shop-appen.

• En tekstknapp er lagt til som ber kunder om å spore kjøpet sitt i Shop-appen.
• Det er lagt til parametere for å vise Shop Pay-sporing.
• Gjengivelse av Spor bestilling med Shop-knappen for følgende tilfeller:
  • forsøkt levert
  • bekreftelse
  • levert
  • mislyktes
  • i transitt
  • ikke-sendbar
  • ute til levering

Oppdateringer av statusside

Det er gjort flere oppdateringer på statussiden.

• Det er opprettet en dedikert seksjon for gavekortinformasjon som vises når det er kjøpt et gavekort.
• Det er lagt til abonnementsinformasjon.
• Klassen icon-svg--align-text-bottom har blitt fjernet.
• data-step="thank-you" har blitt endret til data-step="thank_you". Hvis du bruker denne attributten til å identifisere hvilken side i kassen kunden befinner seg på, må du bruke JavaScript-objektet Shopify.Checkout.page i stedet.
• Det er lagt til et bestillingsstatuskort.

Generelle filendringer

• div.content-box__row har nå role="table".
• Hvis kunden er på takkesteget og har QR-pakken, er show_qr.js lagt til.
• Det er lagt til en sjekk for å sikre at kunden har tilgang til kassen.
• Gavekort vises nå med checkouts/order_status/gift_cards.
• Retning for kontaktinformasjon har blitt fikset med enforce_content_directionality.
• Fraktinformasjon har blitt flyttet til checkouts/web/checkouts/contact_information/pickup.
• Visningen av flere fraktlinjer i sidemenyen med bestillingsoppsummering er nå støttet.
• tr.total-line vises bare hvis det er oppdaterte totalsummer.
• Generelle betalingslinjer støttes nå.
• Endring av valuta i kassen støttes nå.

• #payment-gateway-subfields har nå klassene:

  • .radio-wrapper content-box__row .content-box__row--secondary
  • .card-fields-container

• Verktøytips for kredittkort er justert og er nå i div.field__icon.

• Aria-etiketten er fjernet fra den fulle beskrivelsen av fraktpriser.

• Skjemafelt for fraktpriser har blitt flyttet til checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Skjeletter/innlastingstilstander

Innlastingstilstandene for kassesidene er oppdatert, og skjeletter er lagt til som er synlige når siden laster, eller med selektiv skjuling av visse elementer inntil innlastingen er fullført. Disse endringene optimaliserer innlastingstidene.

• Objekter som er skjult under innlasting:

  • del.total-recap__original-price
  • .total-line__price span.payment-due__currency
  • span.order-summary__emphasis

• Objekter som viser et skjelett under innlasting:

  • Span.total-recap__final-price
  • .product__price del.order-summary__small-text
  • .product__price del.order-summary__emphasis
  • .total-line__price span.payment-due__price
  • .total-line__price span.order-summary__emphasis
  • .total-line__price span.visually-hidden
  • .total-line__price.total-line--subtotal span.order-summary__emphasis

Feilmeldinger

Det er lagt til nye feilmeldinger i kassen.

• Det er lagt til en advarsel om kommunalt nummer i adressefeltet.
• En advarsel som indikerer at det ikke er noen tilgjengelige fraktpriser for en handlekurv, destinasjon eller land er delt opp i to ulike varselmeldinger: en advarsel som indikerer at det ikke er noen tilgjengelige priser for en handlekurv eller destinasjon, og en separat advarsel som indikerer at det ikke er noen tilgjengelige priser for et land.
• Et advarselsbanner er lagt til i kassen når du utfører et kjøp som er forsøkt i en utviklingsbutikk.
• Det er lagt til en merknad som vises når kunden ikke blir belastet i kassen.
• Et advarselsbanner er lagt til for å indikere en endringsfeil av autentisering.
• Det er lagt til en feilmelding for å indikere når det er utilgjengelige fraktmetoder i fraktsteget i kassen.

Endringer i dataattributter

Trekkie er fjernet fra følgende objekter:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Inndatafelt i kassen:
  • {type}_address_field
  • {type}_firstname_field
  • {type}_lastname_field
  • {type}_company_field
  • {type}_address1_google_autocomplete_field
  • {type}_address1_field
  • {type}_address2_field
  • {type}_city_field
  • {type}_country_field
  • {type}_province_field
  • {type}_zip_google_autocomplete_field
  • {type}_phone_field

Tilgjengelighetsforbedringer

Flere endringer har blitt introdusert i kassen for å sikre overensstemmelse med tilgjengelighetsstandarder for nett. Dette gjør det enklere å navigere i kasseprosessen for kunder som bruker tilgjengelighetsteknologi, for eksempel skjermlesere.

• La til role="list" på ul for følgende:

  • u.breadcrumb
  • ul.payment-method-list
  • ul.os-timeline
  • ul.policy-list

• Verktøytipset er fjernet fra aria-labelledby på telephone_field.

• I Shop er inndataetiketten endret for å henvise til telefonen.

• La til h3-overskrifter ved venting på skatter.

• La til h3-overskrifter ved omdirigering.

• Ved innlasting av fraktmetoder er p-taggen endret til en h3-tagg.

• Autofullfør henviser nå til mobile tel i stedet for phone.

• Oppdaterte div[data-processing-order] ved å legge til role="region".

• Oppdaterte div[data-announce-change] med følgende:

  • la til role="region"
  • satt aria-labelledby til å samsvare med id-en for overskriftselementet
  • satt aria-describedby til å samsvare med id-en for innholdsbeholderelementet

• Oppdaterte div.content-box blank-slate med følgende:

  • la til role="region"
  • satt aria-labelledby til å samsvare med id-en for overskriftselementet

• Rutenettet for ekspresskasse er forbedret ved å bruke ul- og li-elementer i stedet for div.

• Oppdaterte bestillingssammendraget med følgende:

  • bedre tydelighet rundt salgspris og vanlig pris
  • endret span til dl-tagg
  • endret del-tagg til dt- og dd-tagger.

• Oppdaterte betalingsdetaljmetoder med følgende:

  • span.radio__label__accessory endret til div.radio__label__accessory
  • span.visually-hidden endret til h3.visually-hidden
  • span.payment-icon-list__more endret til li.payment-icon-list__more
  • span.content-box__small-text endret til small.content-box__small-text

Relaterte koblinger

• Beste praksis for redigering av checkout.liquid
• checkout.liquid
• CSS i checkout.liquid