Share
Å gjøre Shopify-butikken mer intuitiv, er en fin måte å konvertere mer salg til og få et større varenummer per kassa. Kombinert med å vise produktene dine i en enkel liste, kan vi gjøre opplevelsen av å legge til i handlekurven så enkel som bare en klikk-operasjon uten å måtte navigere til produktoppføringssiden.
Denne endringen kan fungere i et rutenett eller listevisning, og trenger bare noen få endringer for å få det til å fungere, pluss det er lett utvidbart. Så la oss komme i gang og maksimere butikkens inntektsgenerering!
Her er et eksempel på hva du kan opprette med denne modifikasjonen. Vi har en butikk som selger jubileumsmynter, og for enkel bruk kan brukeren velge mengden av hver mynt og legge til i handlekurven uten å forlate siden.
Dette oppnås via et AJAX-anrop skrevet i JavaScript som sender en forespørsel til Shopify API. I hovedsak kan nettleseren sende inn skjemaet via en bakgrunnsforespørsel og beholde brukeren på siden.
For å gjøre dette må vi endre Shopify-temaet, så logg inn i administrasjonen din og gå inn i Online-butikk og deretter temaer seksjon (eller for en snarvei, trykk G W T).
Klikk nå på ... knappen på temaet ditt og velg Rediger HTML / CSS. Se i denne delen, se til venstre og klikk på utdrag mappe og deretter legge til en ny utdrag.
Ring koden din ajaxify-cart og klikk Opprett brikke.
Åpne nå denne filen, velg alle, og kopier inn innholdet i ajaxify-cart.liquid utdrag som nettopp er opprettet.
Vær sikker på at du Lagre Dine endringer før du avslutter. Hvis du ønsker å endre teksten til ajaxify-vognen, kan du se på å endre strengene i denne filen, for eksempel addToCartBtnLabel. For mer informasjon om konfigurasjon, les readme for ajaxify vognen.
Nå, inne i layouts-mappen din, klikk på theme.liquid-filen. Finn slutt
% inkluderer 'ajaxify-cart'%
Dette vil inkludere ajaxify-cart kutt du nettopp har lagt til på alle sider, slik at koden er tilgjengelig når vi kaller det i neste trinn.
Du kan inkludere ajaxify-cart og andre utdrag også innenfor
Pass på at du har lagret din theme.liquid filen før du forlater vinduet.
Nå som du har grunnlaget for ajax-vognen på plass, kan vi legge til noen flere modifikasjoner for å utnytte flere funksjoner i Shopify API.
La oss legge til et feltfelt i skjemaet ved å endre produktoppføringstemaet. Se gjennom temautdragsfiler for å finne skjemaet for legg til i handlekurven; Du kan endre det som følger:
Lagre filen og ta en titt i nettleseren, og du vil også ha et feltfelt på skjemaet ditt.
Gå til butikken din og gå til et hvilket som helst produkt, og hvis alt har gått i plan, legger du til handlekurven, med mengdefeltet, legger du i handlekurven uten å forfriskne siden.
Hvis dette ikke virker, vennligst sjekk de forrige trinnene og se i feilkonsollen for webutviklerverktøyet i webleseren for å se om det er rapportert feil.
For å vise samlingen din i en liste, trenger vi noen CSS for å få det til å skje. Endre temaets css-fil og legg til følgende for å oppnå dette.
Merk: Husk at noen temaer kan vise annerledes enn temaet vi brukte, som er Stillehavet tema, men å tilpasse denne kunnskapen til temaet ditt, vet at det grunnleggende prinsippet er å legge til et flyte: venstre; kombinert med breddeinnstillinger.
.produktliste-element-tittel font-size: 16px; linjehøyde: 22px; margin: 5px 0 0; float: venstre; bredde: 50%; .product-list-item-price float: left; bredde: 10%; margin-top: 5px .product-list-item-details skjema float: left; bredde: 30%;
For å gjøre dette responsivt for arbeid på mobil og skrivebord, må du bruke medieforespørsler som for eksempel for å fjerne float:
@media (min-bredde: 1020px) .product-list-item-title-list font-size: 16px; linjehøyde: 22px; margin: 5px 0 0; float: venstre; bredde: 50%; farge: # 000. produktliste-vare-prisliste float: left; bredde: 10%; margin-top: 5px .product-list-item-details-list form float: left; bredde: 30%; @media-skjerm og (min-enhet-bredde: 320px) og (maksimal enhetbredde: 480px) og (-webkit-min-enhet-pixel-forhold: 2) . produktliste-element-tittel -list font-size: 16px; linjehøyde: 22px; margin: 20px 0 0; float: none; .product-list-item . produkt-liste-element-prisliste float: none; .product-list-item-details-list form float: none; padding-left: 90 piksler;
Si for eksempel at du bare vil vise knappene inne i samlingene, ikke på hjemmesiden din. Dette kan gjøres enkelt ved å legge til en betingelse for din flytende malfil.
Åpne malen din og legg til følgende betinget hvor du vil at knappen Legg til handlevogn skal vises, for eksempel i produktlisteoppsettet der vi lagt til mengden. Legg til % hvis collection.title% betinget som i følgende kode:
% hvis collection.title%% slutt om %
Du kan angi hvilke kriterier du vil ha i stedet for % hvis collection.title% hvis du hellere vil se etter en annen verdi, for eksempel om produktet er på lager eller hvilken kategori eller koder det har brukt.
Du kan endre CSS av temaet ditt for å endre ajax cart-skjermen og tilpasse det til ditt hjerte innhold. Noen nyttige klasser å modifisere er .kurv-count og # cart-count a: first.
For å angi verdien som er lagt til i handlekurven, kan du også endre linken for å se kurven med klassene #gocart p a, #cart, og .kassen em.
For å endre totalt antall elementer, se på .punkt-teller klasse.
I tillegg, på slutten av ajaxify-cart.liquid Utdrag er følgende farger du kan redigere.
.ajaxified-cart-feedback display: block; linjehøyde: 36px; skriftstørrelse: 90%; vertikaljustering: midt; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-tilbakemelding a border-bottom: 1px solid;
Endre justering, marginer og polstring for å matche temaet ditt og få den beste visningen du kan for sluttbrukerne dine.
Husk å se på mobiloppløsninger for å se hvordan ajax-vognen fungerer. Det kan hende du må legge til noen medieforespørsler slik at den vil vise seg pent på alle skjermer.
Som nevnt tidligere kan du bruke følgende mediebetingelser for å sjekke dette:
@media (min-bredde: 1020px) / * Klasser går her for bredskjerm * / @media bare skjerm og (min-enhet-bredde: 320px) og (maksimal enhet bredde: 480px) og (-webkit- min-enhet-pixel-forhold: 2) / * Klasser går her for mobile enheter * /
Så du har nå en ajaxified handlevognkomponent i butikken din, noe som betyr at innkjøps arbeidsflyten er noe strømlinet for sluttbrukeren. Forhåpentligvis vil dette resultere i flere konverteringer. I kombinasjon med å vise produktene i en liste med mengdeinnstillingen, har sannsynligheten for en større ordre økt noe.
For nettsteder som tilbyr ofte kjøpte forbruksvarer og de som prøver å tilby et bredt utvalg av flere kjøp i en kassa, fungerer ajaxify-vognen veldig bra.
Videre kan du legge til flere ajax-elementer på nettstedet ditt. Hvis det er tilfelle, vil ditt første referansepunkt være Shopify API - og ta fra kilden som er angitt for handlekurven (ajaxify-cart.liquid) å se nærmere på hvordan samtalene blir gjort.
En grunnleggende forståelse av JavaScript og AJAX ville være nødvendig for å gjøre dette, men ikke bekymre deg hvis du er nybegynner-det er virkelig veldig grunnleggende ting faktisk.
All behandling for et AJAX-anrop finnes i $ .ajax delen av filen, og mer informasjon om hvordan dette fungerer kan du finne på jQuery-nettstedet.
Jeg håper du liker å endre butikkene dine og øke salget med disse nye konseptene!
Accentsconagua