UX i kurvpanelet

Fragtberegnere i Shopifys kurvpaneler: bedste praksis

Design, placér, test og mål en fragtberegner i dynamiske kurvpaneler i Shopify uden at forstyrre kassen.

Opdateret 21. september 2026 · Af ShipCalc-teamet hos MerchantOS

Kort svar

En fragtberegner i kurvpanelet skal besvare spørgsmålet om destination og pris uden at gøre panelet til en ekstra kasse. Placer den tæt på subtotalen eller kasseknappen, hold den sammenklappede tilstand kompakt, bevar panelets luk- og kasseknapper, beregn igen efter ændringer i kurven, og test adfærden med tastatur, touch, på mobil og efter temaopdateringer. Fordi paneler er temaspecifikke, skal kompatibiliteten verificeres i præcis det tema, der kører i produktion.

Bevar panelets hovedopgave

Kurvpanelet er der for at gennemgå ordren og fortsætte med at handle eller gå til kassen. En fragtberegner skal støtte den beslutning, ikke dominere den. Brug en kort opfordring, gradvis visning og kompakte resultater, der forbliver læsbare ved siden af subtotalen og kasseknapperne.

Opdatér, når kurven ændres

En forældet beregning er værre end ingen beregning. At tilføje, fjerne eller ændre antal kan ændre vægt, subtotal, profilkombinationer og retten til gratis fragt. Beregneren skal opdatere sin sammenhæng eller tydeligt bede om en ny beregning.

Vil du have, at kunderne ser priserne før kassen?ShipCalc viser dine eksisterende Shopify-priser på produktsider, i kurve og i kurvpaneler. Se, hvordan det virker.

Design til smal, dynamisk plads

Paneler er ofte smalle og kan rulles. Undgå vandret overløb, hold berøringsflader behagelige, dæk ikke kasseknappen, og meld ændrede resultater til hjælpemidler. En indlæsningstilstand skal reservere plads, så panelet ikke hopper.

Test igen efter temaændringer

Temaer kan udskifte panelets kode, klassenavne eller visningsadfærd ved en opdatering. Notér den anvendte version og vælger, og medtag beregneren i hver regressionstest ved temaopgraderinger.

Tjekliste

  • Synlig tæt på subtotalen eller kassen
  • Kompakt lukket tilstand
  • Intet vandret overløb
  • Kasseknappen er fortsat tilgængelig
  • Beregner igen efter ændringer i kurven
  • Indlæsningstilstand og tilstand uden pris passer
  • Tastaturfokus følger en logisk rækkefølge
  • Ændrede resultater bliver meldt
  • Testet på mobil
  • Temaopdateringer udløser ny test

Spørgsmål

Bruger alle Shopify-temaer det samme kurvpanel?

Nej. Panelernes kode og adfærd varierer efter tema og version, så kompatibiliteten skal testes.

Skal beregneren åbne automatisk?

Hold den som regel kompakt, indtil kunden beder om en beregning, medmindre fragten er den afgørende faktor for sortimentet.

Hvor skal resultaterne vises?

Hold resultaterne tæt på indtastningsfeltet og subtotalen, så kasseknappen stadig er synlig og brugbar.

Kilder

Sider i Shopify Hjælpecenter kan åbne på engelsk.

Prøv ShipCalc gratis

Vis fragtprisen, før kunderne når at spørge.

Har du spørgsmål først? Tal med os.

Start gratis prøveperiode
  • 14 dages gratis prøveperiode
  • Ingen temakode