Logga in
Starta gratis testversion

Uppgradera din onlinekassa

Du kan anpassa din onlinekassa för att utvidga ditt varumärke, förändra meddelanden, komma med erbjudanden och göra andra förbättringar för dina kunders upplevelse. För att se till att dina anpassningar är förenliga med pågående ändringar som görs av Shopify måste du regelbundet uppdatera din kassa.

Gör följande för att förbereda dig för denna uppgradering:

  1. Förhandsgranska den nya kassan och prova din kundinriktade kassaupplevelse. Beroende på de anpassningar du har gjort i kassan kan du behöva göra ändringar i checkout.liquid-filen innan du kan uppgradera.
  2. När du är nöjd med dina ändringar uppgraderar du din butik för att använda den nya Shopify Checkout.

På den här sidan

Förhandsgranska din kassa och prova om det finns fel

Innan du uppgraderar din butik för att använda den nya versionen av kassa, ska du se till att förhandsgranska ändringarna.

Steg:

  1. Från din Shopify-administratör går du till sidan Uppgradera kassan och klickar sedan på Förhandsgranska kassan.
  2. Välj ditt aktuella tema från listan och klicka sedan på Förhandsgranska.
  3. Skapa en testbetalning genom att gå igenom betalningsprocessen som en kund.

Om du hittar några fel vid dessa tester kan vissa av dina anpassningar av kassa stå i konflikt med förbättringar i den nya versionen. Om så är fallet måste du göra ändringar i checkout.liquid-filen innan du uppgraderar.

Lösa fel

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Klicka på ...-knappen och sedan på Duplicera.
  3. Gå till Fler teman, hitta ditt duplicerade tema och klicka sedan på knappen ... > Redigera kod. Gör dina ändringar och testa dem med denna duplicerade och opublicerade version av ditt tema.
  4. Öppna filen checkout.liquid.
  5. Förhandsgranska filen checkout.liquid från ditt duplicerade tema med hjälp av den nya Shopify-kassan:
    1. Från din Shopify-administratör går du till sidan Uppgradera kassan, klickar på Förhandsgranska kassa och väljer sedan det duplicerade temat.
    2. Slutför testordrarna i förhandsgranskningen.

Om det uppstår fel eller du märker problem i hur kassan ser ut visuellt, måste du redigera din checkout.liquid-fil för att hantera dem.

Uppgradera till den nya Shopify Checkout

Uppgradering av din kassa är en tvåstegsprocess som kräver att du uppgraderar Shopify Checkout och ersätter det aktuella, publicerade temat med den duplicerade kopian som innehåller dina ändringar.

Välj en lugnare tid att uppgradera (till exempel tidig morgon, sen kväll eller på helgen) för att minimera potentiella avbrott.

Steg:

  1. Från sidan kassauppgradering klickar du på uppgradera kassa (den här knappen finns längst ned på sidan).
  2. Om du stött på fel när du först förhandsgranskar ditt tema ska du först se till att de har lösts (se Lösa fel ovan). Publicera sedan ditt uppdaterade duplicerade tema:
    1. Klicka på Teman i din Webbshop.
    2. Hitta ditt duplicerade tema och klicka på knappen ... > Publicera.

Din kassa har uppgraderats och ditt duplicerade tema är nu ditt aktuella tema.

Vad är nytt i Shopify Checkout

Den nya versionen av Shopify Checkout innehåller följande ändringar och nya funktioner:

Prenumerationer

Flera avsnitt har lagts till i Shopify-kassan så att du kan erbjuda prenumerationsprodukter samtidigt som du bibehåller dina kassaanpassningar. Med dessa avsnitt kan du sälja prenumerationsprodukter och bearbeta återkommande betalningar direkt i Shopify-kassan.

När du har slutfört uppgraderingen av kassan kan du erbjuda prenumerationer genom att lägga till en prenumerationsapp från Shopify App Store eller bygga en anpassad app med nya prenumerations-API:er.

Läs mer om prenumerationer i Shopifys hjälpcenter:

  • När prenumerationer har aktiverats visas leveransmetoder som används för prenumerationer separat från de för engångsköp.
  • .product_description_variant Span.product_description_selling_plan visas som en ytterligare post-egenskap när det finns en prenumeration som är associerad med produkten.
  • En återkommande summa med ett tillhörande verktygstips visas under summan i orderöversikten.
  • Leveransalternativ för prenumerationer visas när en prenumerationsprodukt ingår i ordern.

Merförsäljning

Nya merförsäljningsappar för efterköp finns i Shopify App Store. Dessa appar visar erbjudanden om efterköp till dina kunder direkt i Shopify-kassan och ändrar deras avslutade order för att inkludera den extra produkten utan att ange fakturerings- eller leveransinformation igen.

Den här kassauppgraderingen inkluderar ändringar i dina kassafiler som gör att merförsäljning efter köp fungerar med din anpassade kassa.

Mer information om merförsäljning efter inköp.

När en giltig efterköpsapp installeras i Shopify-administratören kommer kunderna att få erbjudanden om efterköp.

Dricks i kassan

Dricksalternativ kan användas för att låta kunder inkludera dricks med sin webborder eller för att samla in donationer istället för dricks. När dricks är aktiverat visas avsnittet Lägg till dricks i steget betalningsmetod i kassan. Avsnittet Lägg till dricks innehåller tre förvalda dricksalternativ utöver ett fält för att ange ett anpassat dricksbelopp.

När dricks är aktiverat visas avsnittet Lägg till dricks i steget betalningsmetod i kassan.

Läs mer om att erbjuda dricksalternativ.

Hämta i butik och lokal leverans

Hämta i butik och leverans är nya leveransmetoder som låter kunden ta emot sin order lokalt. När dessa leveransmetoder aktiverats kan kunden välja Hämta i butik eller leverans i leveranssteget i kassan.

Lär dig hur du aktiverar hämta i butik och lokal leverans.

  • Ytterligare fält för lokal leverans visas när lokal leverans är aktiverat och valt av kunden.
  • Om hämta i butik är aktiverat visas ett avsnitt med leveransmetod för kunden på sidan Information i kassan. Om leverans inte är tillgängligt visas endast upphämtningsinformation.

  • Leveransmetoder visas som distinkta flikar.

    • Om kunderna väljer Leverera uppmanas de att ange sin leveransinformation och tillgängliga leveransmetoder visas när de klickar på Fortsätt till leverans.
    • Om kunderna väljer Upphämtning visas en lista över upphämtningsplatser. Kunder klickar på alternativknappen för önskad upphämtningsplats och klickar sedan på Fortsätt till betalning.

  • Leveransinformationen hämtas inte om kunderna väljer Upphämtning i leveranssteget i kassan. Kunderna måste ange faktureringsinformation i betalningssteget i kassan.

  • Lokala leveransanvisningar visas på orderstatussidan. Dessa kan redigeras genom att du i din Shopify-administratör går till Inställningar > Frakt och leverans. Hitta den plats du vill redigera i avsnittet Hämta i butik och klicka på Hantera.

  • Orderstatussidan har uppdaterats för att visa förloppet för leveranser och upphämtningar. Meddelanden visas när:

    • en order har förberetts och är klar för leverans.
    • en leverans har slutförts. Det här meddelandet innehåller även en länk för att beställa samma varor igen.
    • en upphämtningsorder har bekräftats. Det indikerar att kunden kommer att få ett e-postmeddelande när den är redo att hämtas.
    • En upphämtningsorder är klar att hämtas.
    • En upphämtningsorder har hämtats.

Ytterligare internationella fält

Vissa länder har unika leveransregler som du måste uppfylla för att dina försändelser ska nå dina kunder. Ytterligare fält är nu tillgängliga för länder med unika leveransregler. Dessa nya fält visas i steget betalningsmetod i kassan.

Läs mer om ytterligare internationella fält.

  • Ytterligare kassafält visas endast för kunder i Brasilien, Sydkorea, Italien och Kina.

Track order with Shop-knapp

Knappen Track order with Shop på orderstatus-och tacksidorna har uppdaterats med en ny design.

Läs mer om Shop-appen.

  • En textknapp har lagts till som uppmanar kunderna att spåra sitt köp i Shop-appen.
  • Parametrar har lagts till för att visa Shop Pay-spårning.
  • Rendering för knappen Track order with Shop i följande fall:
    • leveransförsök
    • bekräftelse
    • levererad
    • misslyckades
    • under transport
    • kan inte levereras
    • ute för leverans

Uppdateringar av orderstatussida

Flera uppdateringar har gjorts på orderstatussidan.

  • Ett specifikt avsnitt för presentkortsinformation har skapats som visar när ett presentkort har köpts.
  • Prenumerationsinformation har lagts till.
  • Klassen icon-svg--align-text-bottom har tagits bort.
  • data-step="thank-you" har ändrats till data-step="thank_you". Om du använder detta attribut för att identifiera vilken sida i kassan som kunden befinner sig på ska du istället använda JavaScript-objektet Shopify.Checkout.page.
  • Ett orderstatuskort har lagts till.

Allmänna ändringar av fil

  • div.content-box__row har nu role="table".
  • show_qr.js läggs till om kunden befinner sig i tacksteget och har ett QR-paket.
  • En kontroll har lagts till för att se till att kunden har tillgång till kassan.
  • Presentkort visas nu med checkouts/order_status/gift_cards.
  • Kontaktinformationens inriktning har åtgärdats med enforce_content_directionality.
  • Leveransinformation har flyttats till checkouts/web/checkouts/contact_information/pickup.
  • Visning av flera leveransposter i sidofältet i orderöversikten stöds nu.
  • tr.total-line visas endast om det finns uppdaterade summor.
  • Allmänna betalningsposter stöds nu.
  • Ändra valuta i kassan stöds nu.

  • #payment-gateway-subfields har nu klasserna:

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

  • Kreditkortsverktygstips har justerats och finns nu i div.field__icon.

  • Aria-sedeln har tagits bort från hela beskrivningen för fraktkostnader.

  • Formulärfält för fraktkostnader har flyttats till checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Skelett/laddningstillstånd

Laddningstillstånden för betalningssidor har uppdaterats och lägger till skelett som är synliga medan sidan läses in eller döljer selektivt vissa element tills laddningen har slutförts. Dessa ändringar optimerar laddningstiderna.

  • Objekt dolda under laddning:

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

  • Objekt som visar ett skelett under laddning:

    • 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

Felmeddelande

Nytt felmeddelande har lagts till i kassan:

  • En varning om personnummer har lagts till i adressfältet.
  • En varning som indikerar att det inte finns några fraktkostnader tillgängliga för en varukorg, destination eller ett land har delats in i två olika varningsmeddelanden: ett varningsmeddelande som visar att det inte finns några tillgängliga kostnader för en varukorg eller destination och en separat varning som visar att det inte finns några tillgängliga kostnader för ett land.
  • En varningsbanner har lagts till i kassan när du försöker slutföra ett köp i en utvecklingsbutik.
  • Ett meddelande har lagts till som visas när kunden inte kommer att debiteras i kassan.
  • En varningsbanner har lagts till för att visa ett autentiseringsändringsfel.
  • Ett felmeddelande har lagts till för att indikera när leveransmetoder inte är tillgängliga i leveranssteget i kassan.

Ändringar i dataattribut

Trekkie har tagits bort från följande objekt:

  • 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
  • Inmatningsfält i kassan:
    • {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

Förbättrad tillgänglighet

Flera ändringar har införts i kassan för att säkerställa överensstämmelse med webbtillgänglighetsstandarderna. Detta gör det enklare att navigera i kassaprocessen för kunder som använder tillgänglighetsteknik, till exempel skärmläsare.

  • Lade till role="list" på ul för följande:

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

  • Verktygstipset har tagits bort från aria-labelledby på telephone_field.

  • I Shop har inmatningsetikettens namn ändrats för att hänvisa till telefonen.

  • Lade till h3-rubriker vid inväntande av skatter.

  • Lade till h3-rubriker vid omdirigering.

  • När du laddar leveransmetoder har p-taggen ändrats till en h3-tagg.

  • Automatiskt slutförande hänvisar nu till mobile tel i stället för phone.

  • Uppdaterade div[data-processing-order] genom att lägga till role="region".

  • Uppdaterade div[data-announce-change] med följande:

    • lade till role="region"
    • ange aria-labelledby för att matcha ID för rubrikelementet
    • ange aria-describedby för att matcha ID för innehållselementet

  • Uppdaterade div.content-box blank-slate med följande:

    • lade till role="region"
    • ange aria-labelledby för att matcha ID för rubrikelementet

  • Express-kassans rutnät har förbättrats för att använda ul- och li-element istället för div.

  • Uppdaterade orderöversikten med följande:

    • förbättrad klarhet angående försäljningspris och ordinarie pris
    • ändrade spann till dl-tagg
    • ändrade del-taggen till dt- och dd-taggar.

  • Uppdaterade uppgifterna för betalningsmetoder med följande:

    • span.radio__label__accessory ändrad till div.radio__label__accessory
    • span.visually-hidden ändrad till h3.visually-hidden
    • span.payment-icon-list__more ändrad till li.payment-icon-list__more
    • span.content-box__small-text ändrad till small.content-box__small-text

Relaterade länkar

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!