Checkout Element

När du sätter upp din butik är huvudmålet att sälja dina produkter. Efter att du har lagt till övriga element för att fånga kundens intresse måste du lägga till checkout-elementet så att de kan slutföra köpet. Utan det förblir kunderna leads, och inga konverteringar sker. 

Så lägger du till ett Checkout Element

Börja med att öppna Store Builder och redigera Checkout Page.

Om du inte har anpassat sidan är checkout-elementet det enda elementet som lagts till. Klicka på det för att öppna dess inställningar.

Konfigurera hur elementet visas genom att ändra dess egenskaper. Detta inkluderar:

General

1. Element name: Detta hjälper dig att identifiera elementet i Layers-vyn.
2. Font Options: Här kan du justera storlek och vikt på typsnittet, eller byta typsnitt helt.

3. Sticky Contact: När detta är aktiverat fylls kundens uppgifter i automatiskt om deras data tidigare har sparats via en webbläsarcookie.
4. New Contact on Every Purchase: Växla den här funktionen på eller av för att välja om en ny kontaktpost ska skapas för varje köp.
5. Validate Disposable Email: När detta är aktiverat kontrollerar systemet om den angivna e-postadressen tillhör en engångsleverantör av e-post (t.ex. tillfälliga e-posttjänster som ofta används för spam eller tillfälliga syften) så att endast giltiga e-postadresser läggs in i systemet.

6. Button Actions: Välj om användaren ska omdirigeras till en annan Store-sida, en URL för ytterligare säljmöjligheter, eller om ytterligare information ska visas.
7. Text Options: Med den här funktionen kan du ändra texten som visas i elementets olika avsnitt.

Form Options: Anpassa det här avsnittet så att du bara samlar in relevant och nödvändig information, vilket möjliggör snabbare checkout.

• Full Name Validation: Aktivera det här alternativet för att verifiera det fullständiga namnet som varje användare anger i det relevanta fältet.
• Enable Billing Address: Aktivera den här funktionen för att samla in faktureringsadress från dina kontakter. Obs att faktureringsadressavsnittet inte är kopplat till skatteberäkningar.
• Toggle Shipping: Välj om fraktfälten ska visas eller döljas utifrån dina preferenser.
• Auto-complete Address: När detta är aktiverat ger funktionen adressförslag medan kunderna anger delvis adressinformation, vilket minskar inmatningstiden och förbättrar kundupplevelsen.
• Enable Postal Code and Country: Kräv att kontakter anger postnummer och land, särskilt för integration med NMI och Authorize.net.
• Enable Notes at Checkout: Aktivera den här funktionen så att dina kontakter kan lägga till ytterligare information eller särskilda önskemål under checkout för din granskning.

📌Obs: Fält för fraktuppgifter kan bara anpassas om Shipping har aktiverats. 

Följande fält kan markeras som Hidden, Optional eller Mandatory: Phone Number, Address, Country / State, City och Zip / Postal Code. Som standard är fälten i det här avsnittet satta till Mandatory.

📌Obs: Fraktpriser kan påverkas om vissa fält saknas i avsnittet Shipping Details. För livepriser från plattformar med flera transportörer, som Shippo, måste alla fält fyllas i av användaren.

Dessutom kan du begränsa produkterna till vissa platser och välja hur du samlar in kundernas platsuppgifter.

7. Coupon Options: Erbjud rabatter till dina kunder med kampanjkoder genom att växla om “Enable Coupon Codes”.
8. Terms & Conditions: Kryssrutan är obligatorisk när den är aktiverad, vilket innebär att checkout inte kan fortsätta utan godkännande.
9. Color Options: Anpassa färgerna på Checkout-elementet. Allt från bakgrund till text och betalningsknappens färger kan ändras här.

Styles

1. Margin & Padding: Välj hur elementet passar på sidan genom att justera margin- och padding-inställningarna.
2. Borders: Här kan du ändra utseendet på elementets kanter och hörn efter dina behov.
3. Shadow: Lägg till dimension och rörelse till elementet genom att lägga till box shadows.
4. Visibility: Välj om orderformuläret ska synas på mobila enheter, datorer eller båda genom att klicka på ikonen för att markera ditt önskade alternativ.
5. Custom Class: Ange en custom class i det avsedda fältet för att låsa upp ytterligare anpassningsalternativ. För att kopiera den anpassade CSS:en klickar du helt enkelt på “Copy”-ikonen till höger om referenskoden.

När du har anpassat elementet klart klickar du på Save för att behålla ändringarna eller Publish för att göra dem publika. Du kan nu enkelt driva försäljning för din butik med det här elementet och förbättra din förmåga att konvertera leads till livstidskunder.