Hva er Shopify Væske? En rask oversikt over det grunnleggende

Mer enn 4.4 millioner e-handelsnettsteder er bygget ved hjelp av Shopify plattform. Det er alt-i-ett e-handelsplattformen som har rystet nettet siden starten i 2006. Selgere velger denne plattformen for å være vert for nettbutikkene deres av mange grunner, fra enkelt betalingsoppsett til innebygde markedsføringsverktøy og mye mer i tillegg.

Men en av de kritiske aspektene ved Shopify er dens intuitive nettstedbygger med tusenvis av temaer og Shopify app-integrasjoner å velge mellom.

Imidlertid mens ingen kode-bygger lar deg lage fantastiske og unike nettsteder, det er noen begrensninger. Når du for eksempel begynner å bygge nettbutikken din, må du velge et tema som definerer arrangementet og kontrollnivået du får over innholdet ditt. Selv om du velger et tomt tema, dvs. et uten innhold, er det fortsatt en underliggende kodearkitektur som forhåndsdefinerer hvordan innhold er organisert.

Men det er gode nyheter. Hvis du vil lage din egen Shopify mal for nettstedet ditt eller andres, det er Shopify Væske.

Interessert? Bli med meg mens jeg prøver å svare på spørsmålet: Hva er Shopify Væske? La oss dykke inn!

Hva er Shopify Væske?

Interessant, Shopify Væske har eksistert siden Shopifysin oppstart. Når ShopifySkaperne laget først plattformen, de konstruerte et åpen kildekode-prosjekt for å tjene som malspråk for alle Shopify nettsted maler.

For uinnvidde refererer 'åpen kildekode-programmeringsspråk' til en programvares kildekode som er fritt tilgjengelig for allmennheten, slik at alle kan bruke, modifisere og distribuere koden til ethvert formål.

Laget med Ruby, Shopify Flytende fungerer i hovedsak som en plassholder slik at du kan sette inn data i et forhåndsdefinert format (mer om dette nedenfor).

Så hvordan fungerer dette?

For å forstå dette må du først vite at nettsteder vanligvis er statiske eller dynamiske. Statiske butikker er hardkodet for å vise innhold nøyaktig slik det er skrevet, for eksempel i HTML. Derimot kan et dynamisk nettsted vise forskjellig innhold avhengig av hvordan brukeren samhandler med det.

La oss nå si at du har en statisk nettside; det grunnleggende skjelettet til nettstedet er forhåndsinnstilt, men du ønsker å gjengi dynamisk innhold. Det er her man skriver Shopify Væske i HTML-koden din er nyttig. Dette egner seg som en plassholder for dynamisk innhold.

Shopify Væske fungerer som et mellomledd mellom butikken din og Shopifysin server, slik at Liquid kan hente data fra Shopifysin server og lever den til butikken din. Væske kan be om tre hovedtyper av data:

Objekter
Tags
Filter

Nedenfor skal vi utforske hver datatype etter tur:

Flytende gjenstander

Objekter ligner på et bibliotek med funksjoner eller innhold; innenfor hvert objekt er det ulike egenskaper.

Hvis du ikke er kjent med begrepet objekter, her er en kort oversikt:

Et objekt er et grunnleggende konsept i programmering. Et objekt består av to komponenter:

Egenskaper som definerer tilstanden til objektet
Funksjoner som definerer oppførselen til objektet

For bedre å illustrere hvordan dette fungerer, bruker vi et ikke-kodingsrelatert eksempel. For eksempel en bil. Her kan bilen, dvs. objektet, ha funksjoner som "akselerere", "svinge" og "bremse". I motsetning til dette kan egenskapene være bilens "vinduer", "dører" osv.

Enkelt sagt, gjenstander er viktige konsept i koding fordi de hjelper til med å organisere komplekse systemer i mer håndterbare biter.

La oss for eksempel si at du lager en egendefinert Shopify tema og ønsker å vise en bloggtittel i malen din. Du kan bruke Liquid til å hente den informasjonen fra Shopifysin server og vise den et sted på siden. I dette eksemplet er dette stykket Liquid-kode du vil bruke for å oppnå dette:

{{Blog.title}}

La oss bryte ned dette:

Her,'blog' er objektet.
Eiendommen vi ønsker innenfor dette bibliotek er merket med 'tittel».
De '' forteller Liquid hvordan disse to databitene er relatert.
De doble parentesene er flytende syntaks som definerer {{innhold/utdata du vil ha}} du ønsker fra Shopify server.

Flytende tagger

Når du bruker Shopify Flytende, tagger legger logikk til innholdet vi ber om fra Shopify server for å hjelpe med å definere når innhold skal være synlig på siden. La oss for eksempel si at vi ønsker å vise en spesiell grafikk på våre festlige blogginnlegg. Dvs. vi vil at denne grafikken bare skal vises når en bestemt betingelse er oppfylt.

Slik kan dette se ut:

{% if blog.title == 'feiring' %}

**bilde HTML**

{% slutt om %}

Dette kan virke komplisert, men hvis vi bryter det ned, er det ganske enkelt å forstå:

Tagger bruker en litt annen syntaks enn objekter som ser slik ut {%…%}.
Den første taggen {% if blog.title == 'feiring' %} forteller Liquid hvilken betingelse som må oppfylles før du ber om innhold fra serveren.
Tilstanden vi ba om er definert av en 'hvis'-uttalelse. Hvis du er kjent med koding, vil du vite at "hvis"-setninger fungerer ved å sammenligne to eller flere datastykker med hverandre. Hvis de samsvarer, vil den gå videre til neste linje i koden vår. Her, if blog.title == 'feiring,' Vi ber Liquid sjekke om bloggtittelen vår inneholder ordet "feiring". Hvis den gjør det, vil den gå ned til neste linje i koden vår. Hvis den ikke gjør det, returnerer ikke Liquid noe innhold.
I dette eksemplet, hvis vi har en bloggtittel som inneholder ordet 'feiring', vil Liquid trekke og vise HTML-bildet vårt.
Når den gjør dette, går den til følgende linje {% slutt om %}, som avslutter programmet vårt.

Dette er bare ett eksempel på hva du kan gjøre med tagger. Shopify Væske har tagger til:

Kontroll når koden kjøres
Repetere/køyring (gjenta) en kodeblokk
Vise visse HTML-markeringer
Lag nye variabler.

Væskefiltre

Filtre er kodebiter som endrer eller modifiserer utdataene til et objekt. De kan for eksempel endre farge, skrifttype, størrelse eller utseende til nettstedelementer.

Men i tillegg til å endre objektets synlige aspekter, kan de utføre funksjoner på et objekt. Hvis du for eksempel ønsker å vise bloggtitlene dine i upcase, kan et filter hjelpe deg med å oppnå dette uten å manuelt endre alle bloggtitlene dine:

{{ blog.title | uppercase }}

Syntaksen for filtre er {{…}}.
Her er objektegenskapen vi ser etter 'bloggtittel'.
Filteret vi bruker er store bokstaver.
De '|' skiller inn og ut fra koden vår.

Nå, når en bruker ser på bloggtittelen vår, vises den med store bokstaver.

fordeler med Shopify Flytende

Anta at du er en nettstedsdesigner eller utvikler. I så fall en av de viktigste fordelene med Shopify Flytende er at du ikke trenger butikkdataene (dvs. informasjon om butikken) for å opprette eller endre en nettside. Dette er fordi når en bruker først lager en Shopify lagre, er all informasjon lagret på Shopify server, noe som betyr at du kan bruke Liquid til å enkelt hente dataene du trenger.

Men hvis du ikke er en nettutvikler, men i stedet bare er en butikkeier som ønsker å pusse opp butikken din, er det fordeler for deg også:

Lett å lære og bruke: Liquid har en enkel syntaks og er lett å forstå, noe som gjør den tilgjengelig for utviklere og ikke-utviklere.
Dynamisk innhold: Væske gir mulighet for dynamisk innholdsskaping
passelig: Med Liquid kan du lage tilpassede maler og temaer, som gir deg full kontroll over utseendet og følelsen til e-handelsbutikken din.
Forbedret ytelse: Flytende maler kompileres og bufres, og forbedres nettstedets ytelse og hastighet sammenlignet med andre malmotorer.
Stort samfunn: Shopify har et stort brukerfellesskap som gir tilgang til et vell av kunnskap og støtte, noe som gjør det lettere å finne løsninger på vanlige væskerelaterte problemer.

Krav

Så hva trenger du for å begynne å bruke Shopify Væske?

Annonsering ⓘ

Hvis du allerede har en Shopify oppbevare, Shopify Væske vil være tilgjengelig for deg å bruke gratis. Vi vil diskutere hvordan du kan finne Liquid nedenfor. Men alt du trenger å vite for nå er at hvert nettsted som er opprettet på Shopify er bygget med Liquid, slik at du kan begynne å redigere denne koden manuelt så snart du har laget et nettsted.

Men hvis du ikke har en Shopify butikk, må du lage en for å begynne å leke med Liquid.

Først, gå over til Shopify og velg en plan. Fyll inn dine opplysninger og opprett din konto.
Fra din Shopify admin, klikk på temaer. Shopify gir automatisk et standardtema. Du kan la dette være som det er eller velge et annet tema å starte fra.
Shopify har en sjekkliste du kan gå gjennom for å fullføre butikken din. Du vil gjøre alt det grunnleggende, som å legge til produktsider, designe butikkfronten din osv.

Nå som du har det grunnleggende skjelettet til nettbutikken din, kan du hente disse dataene fra Shopify server og tilpass den ved å bruke Liquid (mer om dette nedenfor).

Selv om du ikke trenger noen kodeerfaring for å begynne å bruke Liquid, vil kjennskap til grunnleggende kodeprinsipper gjøre reisen din enklere. Men for det meste kan du finne omfattende selvhjelpsdokumentasjon og opplæringsprogrammer på Shopify utviklerportal. Her finner du en hel seksjon dedikert til Grunnleggende om flytende.

Det anbefales at du bruker litt tid på å se gjennom disse veiledningene før du starter. Selv om Liquid er et kraftig tilpasningsverktøy, har det også potensial til å ødelegge nettstedet ditt hvis du ikke vet hva du gjør!

Komme i gang med Shopify Flytende

Så ved å bruke det vi har lært så langt, la oss se hvordan vi kan gå frem for å redigere vår Shopify tema ved hjelp av Liquid.

For å få tilgang til Liquid, følg disse trinnene:

Dupliser temaet ditt: For å unngå større uhell er det lurt å lage en kopi av temaet ditt før du starter. På den måten, hvis du gjør noen feil, din original Shopify temaet forblir intakt. For å gjøre dette, naviger til temadelen på høyre side av din Shopify dashbord. Velg temaet du vil redigere, og klikk på handlinger for å se rullegardinmenyen. Velg nå duplikat.
Gi nytt navn til duplikatet ditt: Når du dupliserer et tema, vil du se det vises i listen over temaer. Du kan gi nytt navn til kopien din slik at du ikke blander sammen originalen og duplikatet. Bare klikk på handlingsknappen igjen og trykk gi nytt navn på rullegardinmenyen.
Gå inn i kodeeditoren: Velg nå handlinger på duplikatet ditt igjen og velg rediger kode. Du vil bli henvist til den komplette listen over koder innenfor temaet ditt. Ta en titt på mappene som er oppført til høyre. Du bør se en haug med mapper som inneholder forskjellige aspekter av temaet ditt, for eksempel layout, maler, seksjoner osv. Åpne maler-mappen.
Koding i væske: Inne i maler-mappen vil du se en liste over filer med filtypen .liquid. Du kan også opprette en ny flytende filmal ved å velge plussknappen i malmappen. Den vil spørre deg hvilken mal du vil lage, dvs. side, seksjon, blogg osv., og navngi filen. For å redigere en fil, dobbeltklikk på en malfil, og den åpnes i koderedigeringsprogrammet til høyre.

Inne i enhver Liquid-fil vil du se et HTML-skript. Dette er skjelettet til nettstedet ditt. Du kan bruke det flytende språket i denne HTML-en for å hente informasjon fra Shopify server. Så lenge du bruker den riktige Liquid-syntaksen, dvs. parentesene, bør den gjengi innholdet ditt deretter.

For å illustrere, la oss gå gjennom et enkelt eksempel:

Endre størrelse på bilder ved hjelp av Shopify Flytende

Bilder er en viktig del av de fleste Shopify butikker. Men hvis du bruker flere bilder, kan det være et mareritt å dimensjonere alle riktig, slik at de vises pent. For å fikse dette ser vi på img_url filter. I likhet med andre filtre er img_url designet for å endre innholdet det tar fra Shopify server. Du kan bruke dette filteret til å endre bildenes størrelse, skalering, format og beskjæring.

Dette er en utmerket teknikk fordi filteret bare midlertidig endrer et eksisterende bilde; den lager ikke et nytt bilde hver gang for å gjengi malen din, så det vil ikke senke nettstedets lastetid.

Så hvordan endrer vi størrelsen på et bilde?

Først må vi bestemme hvor vi vil bruke endringene. Du kan bruke img_url filter til ethvert objekt med en bildeegenskap, inkludert:

Produkter
Produktvarianter
Artikler
Kategorier
Artikler

Når du har bestemt deg for hvilke bilder du vil redigere, må du vite hvilken eiendom du ønsker å målrette mot. For å finne ut hvilke egenskaper som har et bildeattributt, se på Shopifysin liste over objekter og deres egenskaper.

I dette eksemplet målretter vi bloggartikkelbildene våre.

Her er den grunnleggende koden:

{{ blog.articles.image | img_url: ‘100×100' }}

Sammenbrudd:

Blogg er objektet vi leter etter, og vi vil ha eiendommen artikler, da denne inneholder alle artiklene i bloggen vår. Spesielt ønsker vi å endre bildene i bloggartiklene våre, så vi retter oss mot bilde eiendom innenfor artikler.
Nå bruker vi filteret img_url. Hvis vi lot dette være som det er, ville det ganske enkelt vise et bilde hentet fra nettadressen gitt av Shopify server. Vi skal imidlertid også gi en ekstra parameter: bildestørrelsen '100×100' (noter det Shopify bruker piksler for å bestemme størrelsesområder).
Til slutt pakker vi inn koden vår ved hjelp av Liquid-dobbeltparentes-syntaksen, som brukes til filtre.

Og vi er ferdige! Dette skal returnere utdata for alle bloggbildene våre, slik at de er 100 x 100 piksler i størrelse.

Tips og takeaways

Jeg håper at etter å ha lest denne artikkelen, har du nå svar på spørsmålet: Hva er Shopify Væske?

Som du kan se, Shopify Flytende er et allsidig verktøy som kan tjene ulike funksjoner når du designer eller redigerer en Shopify mal. Selv om det er litt av en læringskurve, når du først har blitt vant til det, er det rimelig enkelt å bruke – spesielt sammenlignet med andre mer komplekse kodespråk som Javascript.

Hvis du er interessert i å bruke Shopify Flytende, vi vil råde deg til å følge disse takeawayene for å få mest mulig ut av det:

Start med en solid forståelse av Liquid: En sterk forståelse av Liquid vil tillate deg å bygge mer komplekse tilpassede temaer. Med dette grunnlaget kan nye brukere utnytte det fulle potensialet til Shopify å skape unike og engasjerende nettbutikker.
Test temaet ditt grundig: Testing er viktig for å sikre at ditt tilpassede tema fungerer som forventet på tvers av forskjellige nettlesere og enheter. Ved å oppdage kompatibilitetsproblemer tidlig, unngår du potensiell frustrasjon for kundene dine.
Bruk tilgjengelige verktøy og ressurser: Shopify har et vell av ressurser tilgjengelig for å hjelpe temautviklere, så bruk dem! Når det brukes, kan dette gjøre utviklingsprosessen raskere og enklere.

Med alle disse punktene dekket, tror jeg det er trygt å si det Shopify Væske kan være en morsom og effektiv måte å oppdatere eller skape en mer engasjerende og dynamisk Shopify oppbevare.

Det er alt fra meg; over til deg. Fortell meg om dine erfaringer med Shopify Væske i kommentarfeltet nedenfor!