Share
Att göra din Shopify butik mer intuitiv är ett bra sätt att konvertera mer försäljning och få ett större antal artiklar per kassa. Kombinerade med att visa dina produkter på en enkel lista kan vi göra erfarenheten av att lägga till i kundvagnen så enkel som bara en klickoperation utan att behöva navigera till produktinformationssidan.
Denna modifiering kan fungera i en rutnät eller listdisplay och behöver egentligen bara några förändringar för att få det att fungera, plus det är lätt att utvidga. Så låt oss börja och maximera din butiks intäktsgenerering!
Här är ett exempel på vad du kan skapa med denna ändring. Vi har en butik som säljer jubileumsmynt och för enkel användning kan användaren välja mängden av varje mynt och lägga till i kundvagnen utan att lämna sidan.
Detta uppnås via ett AJAX-samtal skrivet i JavaScript som skickar en begäran till Shopify API. I huvudsak kan webbläsaren skicka in formuläret via en bakgrundsförfrågan och behålla användaren på sidan.
För att göra detta måste vi ändra Shopify-temat, så logga in på din admin och gå in i Webbutik och sedan teman sektion (eller för en genväg, tryck på G W T).
Klicka nu på ... knappen på ditt tema och välj Redigera HTML / CSS. Inne i det här avsnittet, se till vänster och klicka på utdrag mapp och lägg sedan till ett nytt utdrag.
Ring ditt formulär ajaxify-cart och klicka Skapa snippet.
Öppna nu den här filen, välj allt och kopiera klistra in innehållet i ajaxify-cart.liquid fragmentet som just har skapats.
Se till att du Spara dina ändringar innan du avslutar Om du vill ändra texten på ajaxify-vagnen kan du titta på att ändra strängarna i den här filen, till exempel addToCartBtnLabel. För mer information om konfiguration, läs readme för ajaxify-vagnen.
Nu, i din layouts-mapp, klicka på theme.liquid-filen. Hitta slutet
% include 'ajaxify-cart'%
Detta kommer att inkludera ajaxify-cart snippet du just har lagt till på alla sidor så koden är tillgänglig när vi anropar den i nästa steg.
Du kan inkludera ajaxify-cart och andra snippets också inuti
Se till att du har sparat din theme.liquid filen innan du lämnar fönstret.
Nu när du har grunden för ajaxvagnen på plats, kan vi lägga till några fler ändringar för att utnyttja fler funktioner i Shopify API.
Låt oss lägga till ett kvantitetsfält i formuläret genom att ändra produktlistan. Titta igenom dina temaprofilfiler för att hitta formuläret för tillägg i kundvagnen; Du kan ändra det enligt följande:
Spara nu filen och ta en titt i webbläsaren, och du kommer också att ha ett antalfält på din blankett.
Besök din butik och gå till någon produkt, och om allt har gått till plan, lägg till knappen i kundvagnen, där kvantfältet nu läggs till i kundvagnen utan att uppdatera sidan.
Om det inte fungerar fungerar du med de föregående stegen och tittar i webbläsarens felkonsol för webbutvecklare, för att se om det har rapporterats fel.
För att visa din samling i en lista behöver vi några CSS för att få det att hända. Ändra ditt temas css-fil och lägg till följande för att uppnå detta.
Notera: Tänk på att vissa teman kan visa sig annorlunda än det tema vi använde, vilket är temat Stilla havet, men att anpassa denna kunskap till ditt tema, veta att grundprincipen lägger till en flyta till vänster; kombinerat med breddinställningar.
.produktlista-objekt-titel font-size: 16px; linjehöjd: 22px; marginal: 5px 0 0; flyta till vänster; bredd: 50%; . produktlista-objekt-pris float: left; bredd: 10%; margin-top: 5px .product-list-item-details form float: left; bredd: 30%;
För att göra det lätt att arbeta på mobil och skrivbord måste du använda mediefrågor som följande för att rensa float:
@media (minbredd: 1020px) .product-list-item-title-list font-size: 16px; linjehöjd: 22px; marginal: 5px 0 0; flyta till vänster; bredd: 50%; färg: # 000. produktlista-objekt-prislista float: left; bredd: 10%; margin-top: 5px .product-list-item-details-list form float: left; bredd: 30%; endast medias bredd: 320px) och (max-enhetens bredd: 480px) och (-webkit-min-enhet-pixel-förhållande: 2) .product-list-item-title -lista font-size: 16px; linjehöjd: 22px; marginal: 20px 0 0; float: none; .product-list-item . produktlista-objekt-prislista float: none; .product-list-item-details-list form float: none; padding-vänster: 90px;
Säg, till exempel, du vill bara visa knapparna i samlingarna, inte på din hemsida. Detta kan enkelt göras genom att lägga till en villkorlig för din flytande mallfil.
Öppna din mall och lägg till följande villkorliga var du vill att knappen Lägg till i kundvagn ska visas, till exempel i din produktlista layout där vi bifogade kvantiteten. Lägg till % om collection.title% villkorat enligt följande kod:
% om collection.title%% endif%
Du kan ange vilka kriterier du vill i stället för % om collection.title% om du hellre vill kontrollera ett annat värde, till exempel om produkten finns i lager eller vilken kategori eller taggar den har tillämpat.
Du kan ändra CSS i ditt tema för att ändra Ajax cart-skärmen och anpassa den till ditt hjärtans innehåll. Några användbara klasser att ändra är .kund-count och # cart-count a: first.
För att ange värdet som läggs till i kundvagnen kan du också ändra länken för att se vagnen med klasserna #gocart p a, #vagn, och .checkout em.
För att ändra det totala antalet artiklar, kolla på .item-count klass.
Dessutom, i slutet av ajaxify-cart.liquid snippet är följande färger som du kan redigera.
.ajaxified-cart-feedback display: block; linjehöjd: 36px; typsnittstorlek: 90%; vertikaljustering: mitt; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-feedback a border-bottom: 1px solid;
Ändra justering, marginal och vaddering som matchar ditt tema och få den bästa skärmen du kan för dina slutanvändare.
Kom ihåg att kolla på mobila upplösningar för att se hur ajaxvagnen fungerar. Det kan hända att du måste lägga till några mediefrågor så att den kommer att visas snyggt på alla skärmar.
Som tidigare nämnts kan du använda följande mediekonditioner för att kontrollera detta:
@media (minbredd: 1020px) / * Klasser går här för bredbildsskärm * / @media enbart skärm och (min enhetbredd: 320px) och (max enhetbredd: 480px) och (-webkit- min-enhet-pixel-förhållande: 2) / * Klasser går här för mobila enheter * /
Så du har nu en ajaxifierad kundvagn i din butik, vilket betyder att inköps arbetsflödet är något strömlinjeformat för slutanvändaren. Förhoppningsvis kommer detta att leda till fler omvandlingar. I kombination med att dina produkter visas i en lista med kvantinställningen har sannolikheten för en större order ökat något.
För webbplatser som ofta köpte förbrukningsvaror och de som försöker erbjuda ett brett utbud av flera inköp i en kassa, fungerar ajaxify-vagnen mycket bra.
Vidare kan du lägga till fler ajax-element till din webbplats. Om så är fallet, skulle din första referenspunkt vara Shopify API - och ta bort källan som tillhandahålls för kundvagnen (ajaxify-cart.liquid) för att titta närmare på hur samtalen görs.
En grundläggande förståelse av JavaScript och AJAX skulle krävas för att göra detta, men oroa dig inte om du är nykomling - det är verkligen väldigt grundläggande saker faktiskt.
All behandling för ett AJAX-samtal finns i $ .ajax avsnittet av filen, och mer information om hur detta fungerar kan hittas på jQuery-webbplatsen.
Jag hoppas att du gillar att ändra dina butiker och öka din försäljning med dessa nya koncept!
Accentsconagua