Share
Jeg brukte først Shopify ikke lenge siden den ble lansert i 2006. Jeg elsket at det var en enkel å bruke og konkurransedyktig priset vertsbasert e-handelsplattform. Men fremfor alt er temaet det jeg likte mest. La oss se på noen få enkle teknikker som gir deg kontroll over dine Shopify-temaer og leverer en enda mer utformet opplevelse til kundene dine.
Shopify-temaer (heretter kalt enkelt temaer) er enkle å konstruere. I tillegg til våre daglige verktøy i HTML, CSS, JavaScript, temaer bruker et malingsspråk som heter Liquid. Jeg ønsker å bevege seg utover det grunnleggende i denne artikkelen for å vise deg noen teknikker jeg nylig jobbet for for å belaste din Shopify-temautvikling. Hvis du ikke er kjent med temaer, kan du lære mer på Shopify Wiki.
Alle Shopify-kassene er sikkert vert på Shopify-domenet.
Temaer lar deg kontrollere hjemmet ditt, samlinger og individuelle produktsider. Her er en typisk Shopify-URL som viser et enkelt produkt:
http://store.theheadsofstate.com/products/chicago-travel-poster
"Heads of State" er et kjærlig produsert Shopify-nettsted som viser sine produkter veldig bra. Den ovennevnte nettadressen tar deg til deres Chicago Travel Poster, men hvis du, som meg, er litt av en URL-pedant, så kan du bli fristet til å hacke tilbake til:
http://store.theheadsofstate.com/products/
Denne nettadressen tar deg til en side som ikke er utformet i forhold til resten av nettstedet. Jeg tviler veldig mye på at dette skyldes mangel på tanke fra designerne. Det er faktisk Shopifys feil; temaer støtter for øyeblikket ikke en innfødt mal for siden tilgjengelig på /Produkter (eller / samlinger - de to er utskiftbare i denne konteksten). I stedet gir standardoppsettfilen en liste over tilgjengelige samlinger.
Heldigvis kan man raskt få kontroll over denne siden og bruke den til deres fordel. I temaets layout.liquid fil, du kan erstatte content_for_layout med følgende kodestykke:
% hvis mal == 'listesamlinger'% % inkluderer 'samlingsnotering'% % else% content_for_layout % endif%
Deretter oppretter du en fil som heter Samlingen-listing.liquid og lagre den i snippets-mappen din. Hvis noen besøker / samlinger eller /Produkter side, gjør vår layoutfil og inneholder vår egen utdrag i stedet for standardoppføringen.
Her er et raskt eksempel på hvordan du kan restylle samlingslisten ved å bruke din egen oppføring. Legg merke til at vi har tilgang til Shopify samlinger identifikator på denne siden:
Produktsamlinger
% for samling i samlinger% % med mindre collection.handle == 'frontpage'%
- collection.title % endunless% % endfor%
Du finner mer informasjon om variablene som er tilgjengelige for deg i samlinger samling på den utmerkede Shopify jukseplaten. Legg merke til hvordan vi bruker flytende logikk for å ekskludere samlingen med en håndtak av fronptage. Dette er en ofte brukt samling i temaer for å vise elementer på hjemmesiden, men vi ekskluderer det fordi den brukes mer til administrasjonsformål enn en logisk gruppe av relaterte produkter. Denne teknikken gjør at du kan holde stylingen konsistent og legge til ekstra data eller designelementer som du ser hensiktsmessig.
... ord snegler er kjent som håndtak.
Når du først begynner med temaer, blir du introdusert til begrepet oppsett. Som standard ser Shopify etter en standard layoutfil som heter layout.liquid, som bor i riktig navn oppsett mappe.
Det kan være tilfeller når designet ditt krever et alternativt oppsett. En tilnærming er å bruke betingede utsagn for å vise / skjule innhold avhengig av en variabel, for eksempel et bestemt produkt eller en innsamlingsside. Men et annet alternativ er å bruke en helt annen layoutfil. Dette kan være en mye enklere løsning hvis behovet ditt er forskjellig. Alt du trenger for å håndheve et alternativt layout, legges til følgende kode øverst i malen din:
% layout "produkt"%
Dette tvinger malen din til å bruke en oppsettfil som heter product.liquid plassert i temaet ditt oppsett mappe.
Du kan også angi at ingen layout skal brukes ved å spesifisere ingen, som dette:
% layout "ingen"%
Hvis du har brukt WordPress, vil du sannsynligvis være kjent med ideen om a slug. Det er et unikt navn gitt til et bestemt innlegg eller en side som brukes i en URL. For eksempel: "min første side". I Shopify er ordet snekker kjent som håndtak. Disse genereres automatisk når du lager et produkt, men selvfølgelig kan du endre dem hvis du ønsker å gjøre det. Våre produkthåndtak er også tilgjengelig for oss i vår product.liquid mal. Vi kan bruke håndtak å diktere vår produktmal. Her er en måte vi kunne gjøre dette på:
% if product.handle == 'my-new-t-shirt'% % inkluderer 'min nye t-skjorte'% % else% // Standardprodukt.liquid-kode går her % slutt om %
I dette eksemplet kontrollerer vi om produkthåndtaket av den nåværende forespørselen er "min nye-t-skjorte" og inkluderer en utdrag kalt "my-new-t-shirt" hvis sant. Dette tilsvarer å inkludere en fil som heter min nye-t-shirt.liquid som ligger i snippets-mappen.
For å ta dette et skritt videre, kan du slå standarden product.liquid inn i en utdrag. Jeg liker denne tilnærmingen fordi den holder hovedmalen din som en logisk kontroller, pent isolerer presentasjonsmarkeringen i sine egne filer.
Dette mønsteret kan bli litt modifisert for å bruke tildele og sak metoder, slik:
% assign handle = product.handle% % case handle% % når 'big-t-shirt'% % inkluderer 'big-t-shirt'% % når 'liten t-skjorte' % % inkluderer 'liten t-skjorte'% % else% % inkluderer 'produktstandard'% % end%%
Du kan også bruke produkthåndtaket til å tilordne forskjellige CSS-klasser til tag i layoutfilene dine. For eksempel:
% tilfelle mal% % når 'produkt'% % else% % slutt%
Du kan selvfølgelig utvide denne teknikken for å tilpasse tag basert på et hvilket som helst antall kriterier.
Alle Shopify-kassene er sikkert vert på Shopify-domenet. For noen blir det rettet mot en generisk kassettside, noe som kan være en smule ødeleggende når det gjelder brukeropplevelsen. Du kan imidlertid stille inn kassen din ved hjelp av CSS. Her er hva du trenger å gjøre:
Accentsconagua
checkout.css i temaets aktivmappe.!viktig regjere for å oppnå de ønskede resultatene.
Pass på at du sjekker ut wiki for komplette eksempler.
Du kan også bruke Væske i din checkout.css fil. Først må du omdøpe CSS-filen til checkout.css.liquid. Da kan du begynne å bruke flytende filtre. Her er et eksempel:
/ * Sett inn din egen logo (last opp separat til aktivmappen din) * / #logo height: 65px; bakgrunn: url ('logo-checkout.png' | asset_url | erstatt: 'http: //', 'https: //') sentrum no-repeat; Det er utrolig hvordan noen få endringer i grunnleggende CSS kan justere generisk kassa med eget design. Pass på å sjekke ut alle maler i kasseprosessen; Din CSS vil gjelde for et antall skjermer.
Temainnstillinger lar oss bruke Shopify-administratoren til å kontrollere data vi kan bruke i våre temaer. Vanlige bruksområder er stroppelinjer, fargeskjemaer på hele siden, og valg av skreddersydde bilder som skal vises i skyvegallerier rundt nettstedet. For å aktivere innstillinger i temaet, opprett bare en settings.html fil (notat nr. flytende forlengelse) og begynn å legge til relevante formelementer. For eksempel kan du inkludere følgende i din settings.html fil tillate redigering av nettstedets stroppelinje:
Legg merke til hvordan jeg angir standardverdien. Dette er viktig, spesielt når det gjelder CSS-verdier. For å få tilgang til denne verdien i vårt tema, refererer vi det enkelt til i flytende som følger:
settings.site_strapline
Vi kan også utnytte temainnstillinger i våre viktigste CSS-filer ved å legge til .væske utvidelse til vår viktigste CSS-fil. For eksempel:
kropp farge: settings.text_color; bakgrunnsfarge: settings.bg_color;
Det er veldig viktig å angi standardverdier for disse fargene i din settings.html fil. Hvis du ikke klarer å gjøre det, får din standard CSS-fil til å bli opprettet uten en verdi. Les mer på wiki: http://wiki.shopify.com/Theme_Settings
Shopify tilbyr også en JavaScript-API, og "cart" -informasjonen for den nåværende brukeren er direkte tilgjengelig for oss via en veldig enkel URL. Bare legg til .js utvidelse til vognadressen for å få en JSON-representasjon av vognen. Her er et eksempel:
"token": "7b0f09aca710a4ce688325a8add36c6b", "notat": null, "attributter": null, "total_pris": 0, "total_vekt": 100,0, "item_count": 1, "elementer": ["id": 229848636 , "tittel": "Insites: The Tour Coasters", "pris": 0, "line_price": 0, "quantity": 1, "sku": "", "gram": 100, "leverandør": "Viewport Industries "," properties ": null," variant_id ": 229848636," url ":" / products / insites-the-tour "," image ":" http://cdn.shopify.com/s/files/1 /0151/6407/products/png_1.png?783 "," handle ":" insider-the-tour "," requires_shipping ": true]," requires_shipping ": true
Dette gir deg en ekstrem mengde fleksibilitet og kreativ kraft. Du kan opprette en JavaScript-popup som viser innholdet i handlekurven eller injiser et lysbildefremvisning som markerer de valgte produktene. Selvfølgelig kan du gjøre disse tingene i maler, men dette gir deg flere muligheter for å gi en bedre brukeropplevelse.
Som med alle plattformer er det mange forskjellige måter å nærme seg det samme problemet, men jeg håper at disse seks tipsene er nyttige og nyttige for deg når du utvikler ditt neste Shopify-tema.
