Share
Uw Shopify-winkel intuïtiever maken, is een geweldige manier om meer verkopen te converteren en een groter aantal items per afhandeling te krijgen. Gecombineerd met het weergeven van uw producten in een eenvoudige lijst, kunnen we de ervaring van het toevoegen aan een winkelwagentje eenvoudig maken met slechts één muisklik, zonder dat u naar de productvermeldingspagina hoeft te navigeren.
Deze aanpassing kan werken in een raster- of lijstweergave en heeft eigenlijk maar een paar wijzigingen nodig om het werkend te krijgen, plus het is eenvoudig uitbreidbaar. Dus laten we aan de slag gaan en de inkomsten van uw winkel maximaliseren!
Hier is een voorbeeld van wat u met deze aanpassing kunt maken. We hebben een winkel die herdenkingsmunten verkoopt, en voor het gebruiksgemak kan de gebruiker de hoeveelheid van elke munt selecteren en aan winkelwagen toevoegen zonder de pagina te verlaten.
Dit wordt bereikt via een AJAX-call geschreven in JavaScript, die een verzoek verzendt naar de Shopify-API. In wezen kan de browser het formulier via een achtergrondverzoek indienen en de gebruiker op de pagina houden.
Om dit te doen, moeten we het Shopify-thema aanpassen, dus log in op je admin en ga naar de Online winkel en dan de Thema's sectie (of voor een snelkoppeling, druk op G w T).
Klik nu op de ... knop op uw thema en kies HTML / CSS bewerken. Kijk in dit gedeelte links en klik op de snippets map en voeg vervolgens een nieuw fragment toe.
Bel je fragment ajaxify-cart en klik Maak een fragment.
Open nu dit bestand, selecteer alles en plak de inhoud in de ajaxify-cart.liquid fragment dat zojuist is gemaakt.
Zorg ervoor dat je Opslaan je wijzigingen voordat je afsluit. Als u de tekst van de ajaxify-winkelwagen wilt wijzigen, kunt u de tekenreeksen in dit bestand wijzigen, zoals addToCartBtnLabel. Lees de leesmij van het ajaxify-winkelwagentje voor meer informatie over de configuratie.
Klik nu in de map lay-outs op het bestand theme.liquid. Vind het einde
% include 'ajaxify-cart'%
Dit omvat de ajaxify-cart fragment dat u zojuist aan alle pagina's hebt toegevoegd, zodat de code beschikbaar is wanneer we er in de volgende stap een beroep op doen.
U kunt de ajaxify-cart en andere fragmenten ook binnen de
Zorg ervoor dat je je hebt opgeslagen theme.liquid bestand voordat het venster wordt afgesloten.
Nu u de basis hebt gelegd voor de ajax-kar die is geïnstalleerd, kunnen we nog enkele wijzigingen toevoegen om meer functies van de Shopify API te gebruiken.
Laten we een hoeveelheidveld aan het formulier toevoegen door het thema van de productvermelding te wijzigen. Doorzoek uw themafragmentbestanden om het formulier voor toevoegen aan winkelwagentje te vinden; je kunt het aanpassen zoals hieronder:
Sla het bestand nu op en kijk in de browser, en je hebt ook een veld voor de hoeveelheid op je formulier.
Ga naar je winkel en ga naar een product. Als alles volgens plan verloopt, voegt de knop Toevoegen aan winkelwagentje met het veld voor de hoeveelheid nu toe aan de winkelwagen zonder de pagina te vernieuwen.
Als dit niet werkt, controleer dan de voorgaande stappen en kijk in de webbrowser voor webontwikkelaarstools om te zien of er fouten zijn gerapporteerd.
Om uw verzameling in een lijst weer te geven, hebben we een aantal CSS nodig om dat mogelijk te maken. Wijzig het css-bestand van uw thema en voeg het volgende toe om dit te bereiken.
Notitie: Houd er rekening mee dat sommige thema's mogelijk anders zijn dan het thema dat we gebruikten, wat het thema van de Stille Oceaan is, maar om deze kennis aan te passen aan uw thema, weet u dat het basisprincipe het toevoegen van een thema is. zweven: links; gecombineerd met breedte-instellingen.
.product-lijst-item-titel font-size: 16px; regelhoogte: 22 px; marge: 5px 0 0; float: left; breedte: 50%; .product-list-item-price float: left; breedte: 10%; margin-top: 5px .product-list-item-details formulier float: left; breedte: 30%;
Als u dit wilt laten reageren op werken op mobiel en op een desktopcomputer, moet u mediaquery's zoals de volgende gebruiken om de float leeg te maken:
@media (min-width: 1020px) .product-list-item-title-list font-size: 16px; regelhoogte: 22 px; marge: 5px 0 0; float: left; breedte: 50%; kleur: # 000 .product-list-item-price-list float: left; breedte: 10%; margin-top: 5px .product-list-item-details-lijstformulier float: left; breedte: 30%; @media alleen scherm en (min-device-width: 320px) en (max-device-width: 480px) en (-webkit-min-device-pixel-ratio: 2) .product-list-item-title -list font-size: 16px; regelhoogte: 22 px; marge: 20 px 0 0; float: none; .product-list-item .product-list-item-price-list float: none; .product-list-item-details-list form float: none; padding-left: 90px;
Stel dat u bijvoorbeeld alleen de knoppen in de collecties wilt weergeven, niet op uw startpagina. Dit kan eenvoudig worden gedaan door een voorwaarde toe te voegen aan uw vloeibare sjabloonbestand.
Open uw sjabloon en voeg de volgende voorwaarden toe waaraan u wilt dat de knop Toevoegen aan winkelwagentje wordt weergegeven, bijvoorbeeld in de lay-out van uw productlijst waar we de hoeveelheid hebben toegevoegd. Voeg de toe % if collection.title% voorwaardelijk als in de volgende code:
% if collection.title%% stop als %
U kunt criteria opgeven die u wilt in plaats van de % if collection.title% als u liever controleert op een andere waarde, bijvoorbeeld of het product op voorraad is of welke categorie of tags het heeft toegepast.
U kunt de CSS van uw thema wijzigen om de weergave van de ajax-winkelwagen aan te passen en naar hartenlust in te stellen. Enkele bruikbare klassen om te wijzigen zijn .cart-count en # cart-count a: eerst.
Als u de toegevoegde waarde aan winkelwagen wilt opgeven, kunt u ook de koppeling wijzigen om de winkelwagen met de klassen te bekijken #gocart p a, #cart, en .afrekenen em.
Als u het totale aantal items wilt wijzigen, bekijkt u de .aantal voorwerpen klasse.
Bovendien, aan het einde van de ajaxify-cart.liquid snippet zijn de volgende kleuren die u kunt bewerken.
.ajaxified-cart-feedback weergave: blok; regelhoogte: 36px; tekengrootte: 90%; vertical-align: middle; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-feedback a border-bottom: 1px solid;
Wijzig de uitlijning, marges en opvulling om bij uw thema te passen en krijg de beste weergave voor uw eindgebruikers.
Vergeet niet om te controleren op mobiele resoluties om te zien hoe de ajax-kar werkt. Mogelijk moet u sommige mediaquery's toevoegen zodat deze op alle schermen goed worden weergegeven.
Zoals eerder vermeld, kunt u de volgende mediacondities gebruiken om dit te controleren:
@media (min-width: 1020px) / * Klassen gaan hier voor breedbeeld * / @media alleen scherm en (min-device-width: 320px) en (max-device-width: 480px) and (-webkit- min-apparaat-pixel-ratio: 2) / * Lessen gaan hier voor mobiele apparaten * /
U hebt nu dus een geoptimaliseerde winkelwagencomponent in uw winkel, wat betekent dat de inkoopworkflow enigszins gestroomlijnd is voor de eindgebruiker. Hopelijk leidt dit tot meer conversies. In combinatie met het weergeven van uw producten in een lijst met de instelling van de hoeveelheid, is de kans op een grotere bestelling enigszins toegenomen.
Voor sites met vaak gekochte verbruiksgoederen en diegenen die een breed scala aan meerdere aankopen in één keer proberen aan te bieden, werkt de ajaxify-winkelwagen heel goed.
In de toekomst wilt u wellicht meer ajax-elementen toevoegen aan uw site. Als dit het geval is, zou uw eerste referentiepunt de Shopify API zijn en de bron voor het winkelwagentje uit elkaar halen (ajaxify-cart.liquid) om nauwkeuriger te bekijken hoe de oproepen worden gedaan.
Hiervoor is een basiskennis van JavaScript en AJAX vereist, maar maak je geen zorgen als je een nieuwkomer bent - het is echt heel basismateriaal inderdaad.
Alle bewerkingen voor een AJAX-gesprek zijn te vinden in de $ .ajax sectie van het bestand, en meer informatie over hoe dit werkt, is te vinden op de jQuery-website.
Ik hoop dat je het leuk vindt om je winkels aan te passen en je omzet te vergroten met deze nieuwe concepten!
Accentsconagua