Hvad er Shopify Væske? En hurtig gennemgang af det grundlæggende

Over 4.4 millioner e-handelswebsteder er bygget ved hjælp af Shopify platform. Det er den alt-i-én e-handelsplatform, der har rystet nettet siden starten i 2006. Sælgere vælger denne platform til at hoste deres onlinebutikker af mange årsager, lige fra nem betalingsopsætning til indbyggede marketingværktøjer og meget mere. 

Men en af ​​de kritiske aspekter ved Shopify er dens intuitive webstedsbygger med tusindvis af temaer og Shopify app integrationer at vælge imellem. 

Dog, mens no-code builder lader dig oprette fantastiske og unikke websteder, der er nogle begrænsninger. For eksempel, når du begynder at bygge din online butik, skal du vælge et tema, der definerer arrangementet og niveauet af kontrol, du får over dit indhold. Selvom du vælger et tomt tema, dvs. et uden indhold - er der stadig en underliggende kodearkitektur, der foruddefinerer, hvordan indhold er organiseret.

Men der er gode nyheder. Hvis du vil skabe din egen Shopify skabelon til dit websted eller en andens, der er Shopify Væske.

Interesseret? Slut dig til mig, mens jeg forsøger at besvare spørgsmålet: Hvad er Shopify Væske? Lad os dykke ned!

Hvad er Shopify Væske?

Interessant, Shopify Væske har eksisteret siden Shopifys begyndelse. Hvornår Shopify's skabere designet først platformen, de konstruerede et open source-projekt, der skulle fungere som skabelonsprog for alle Shopify hjemmeside skabeloner. 

For de uindviede refererer 'open source-programmeringssprog' til en softwares kildekode, der er frit tilgængelig for offentligheden, hvilket giver enhver mulighed for at bruge, ændre og distribuere koden til ethvert formål. 

Oprettet ved hjælp af Ruby, Shopify Flydende fungerer i det væsentlige som en pladsholder, så du kan indsætte data i et foruddefineret format (mere om dette nedenfor).

Så hvordan fungerer dette?

For at forstå dette skal du først vide, at hjemmesider typisk er statiske eller dynamiske. Statiske butikker er hårdkodet til at vise indhold præcist, som det er skrevet, for eksempel i HTML. I modsætning hertil kan et dynamisk websted vise forskelligt indhold afhængigt af, hvordan brugeren interagerer med det. 

Lad os nu sige, at du har en statisk hjemmeside; webstedets grundlæggende skelet er forudindstillet, men du ønsker at gengive dynamisk indhold. Det er her at skrive Shopify Væske i din HTML-kode er praktisk. Dette egner sig som en pladsholder for dynamisk indhold. 

Shopify Væske fungerer som mellemled mellem din butik og Shopify's server, hvilket gør det muligt for Liquid at trække data fra Shopify's server og lever den til din butik. Liquid kan anmode om tre hovedtyper af data:

1. Objekter
2. Tags
3. filtre

Nedenfor vil vi udforske hver datatype efter tur:

Flydende genstande

Objekter ligner et bibliotek af funktioner eller indhold; inden for hvert objekt er der forskellige egenskaber. 

Hvis du ikke er bekendt med begrebet objekter, er her en kort oversigt:

Et objekt er et grundlæggende begreb i programmering. Et objekt består af to komponenter: 

1. Egenskaber, der definerer objektets tilstand
2. Funktioner, der definerer objektets adfærd

For bedre at illustrere, hvordan dette virker, bruger vi et ikke-kodningsrelateret eksempel. For eksempel en bil. Her kunne bilen, dvs. objektet, have funktioner som "accelerer", "drej" og "bremse". I modsætning hertil kunne egenskaberne være bilens "vinduer", "døre" osv. 

Kort sagt, objekter er en vigtig koncept i kodning fordi de hjælper med at organisere komplekse systemer i mere håndterbare bidder.

Lad os f.eks. sige, at du opretter en brugerdefineret Shopify tema og ønsker at vise en blog titel i din skabelon. Du kan bruge Liquid til at bringe disse oplysninger fra Shopify's server og vise den et sted på siden. I dette eksempel er dette stykket Liquid-kode, du ville bruge til at opnå dette:

{{Blog.title}} 

Lad os opdele dette:

• Her, 'blog' er objektet. 
• Ejendommen vi ønsker indenfor dette bibliotek er markeret med 'titel. ' 
•  '' fortæller Liquid, hvordan disse to databit er relateret. 
• De dobbelte parenteser er flydende syntaks, der definerer det {{indhold/output, du ønsker}}, du ønsker fra Shopify serveren. 

Flydende tags

Når du bruger Shopify Flydende, tags tilføjer logik til det indhold, vi anmoder om fra Shopify server for at hjælpe med at definere, hvornår indhold skal være synligt på siden. Lad os for eksempel sige, at vi ønsker at vise en bestemt grafik på vores festlige blogindlæg. Dvs. vi ønsker, at denne grafik kun skal vises, når en bestemt betingelse er opfyldt. 

Sådan kan det se ud:

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

**billede HTML**

{% Afslut Hvis %}

Dette kan virke komplekst, men hvis vi opdeler det, er det ret nemt at forstå:

• Tags bruger en lidt anden syntaks end objekter, der ser sådan ud  {%…%}.
• Det første mærke {% if blog.title == 'fest' %} fortæller Liquid, hvilken betingelse der skal være opfyldt, før den anmoder om indhold fra serveren.
• Den betingelse, vi bad om, er defineret af en 'hvis' erklæring. Hvis du er bekendt med kodning, vil du vide, at 'hvis'-udsagn fungerer ved at sammenligne to eller flere stykker data med hinanden. Hvis de matcher, vil den gå videre til næste linje i vores kode. Her,  if blog.title == 'fest,' vi beder Liquid om at tjekke, om vores blogtitel indeholder ordet 'fejring'. Hvis den gør det, vil den gå ned til næste linje i vores kode. Hvis det ikke gør det, returnerer Liquid ikke noget indhold.
• I dette eksempel, hvis vi har en blogtitel, der indeholder ordet 'celebration', vil Liquid trække og vise vores billed-HTML.
• Når den gør dette, går den til den følgende linje {% Afslut Hvis %}, som afslutter vores program.

Dette er blot et eksempel på, hvad du kan gøre med tags. Shopify Væske har tags til:

• kontrol når koden udføres
• Gentag/iteration (gentag) en kodeblok
• Skærm visse HTML-markeringer
• Opret nye variabler.

Flydende filtre

Filtre er stykker kode, der ændrer eller modificerer outputtet af et objekt. For eksempel kan de ændre hjemmesideelementers farve, skrifttype, størrelse eller udseende. 

Men ud over at ændre objektets synlige aspekter, kan de udføre funktioner på et objekt. For eksempel, hvis du vil vise dine blogtitler i upcase, kan et filter hjælpe dig med at opnå dette uden manuelt at ændre alle dine blogtitler:

{{ blog.title | uppercase }}

• Syntaksen for filtre er {{…}}.
• Her er objektegenskaben vi leder efter 'blog.title'.
• Det filter vi anvender er store bogstaver.
•  '|' adskiller input og output af vores kode.

Nu, når en bruger ser på vores blogtitel, vises den med store bogstaver.

Fordele ved Shopify Flydende

Antag, at du er webstedsdesigner eller -udvikler. I så fald en af ​​de væsentligste fordele ved Shopify Flydende er, at du ikke behøver butiksdataene (dvs. oplysninger om butikken) for at oprette eller ændre en hjemmeside. Dette skyldes, at når en bruger først laver en Shopify butik, er alle oplysninger gemt på Shopify server, hvilket betyder, at du kan bruge Liquid til blot at hente de data, du har brug for. 

Men hvis du ikke er en webudvikler, men i stedet blot er en butiksejer, der ønsker at pifte din butik op, er der også fordele for dig:

• Let at lære og bruge: Liquid har en simpel syntaks og er let at forstå, hvilket gør den tilgængelig for udviklere og ikke-udviklere.
• Dynamisk indhold: Væske giver mulighed for dynamisk indholdsskabelse
• Kan tilpasses: Med Liquid kan du oprette brugerdefinerede skabeloner og temaer, hvilket giver dig fuld kontrol over udseendet og følelsen af ​​din e-handelsbutik.
• Forbedret ydeevne: Flydende skabeloner kompileres og cachelagres, hvilket forbedrer hjemmesidens ydeevne og hastighed sammenlignet med andre skabelonmotorer.
• Stort fællesskab: Shopify har et stort brugerfællesskab, der giver adgang til et væld af viden og support, hvilket gør det lettere at finde løsninger på almindelige væskerelaterede problemer.

Krav

Så hvad skal du bruge for at begynde at bruge Shopify Væske?

Hvis du allerede har en Shopify butik, Shopify Væske vil være tilgængelig for dig at bruge gratis. Vi vil diskutere, hvordan du kan finde Liquid nedenfor. Men alt hvad du behøver at vide for nu er, at hvert websted, der er oprettet på Shopify er bygget med Liquid, så du kan begynde manuelt at redigere denne kode, så snart du har oprettet et websted.

Men hvis du ikke har en Shopify butik, skal du lave en for at begynde at lege med Liquid. 

1. Først skal du gå over til Shopify og vælge en plan. Udfyld dine oplysninger og opret din konto.
2. Fra din Shopify admin, klik på temaer. Shopify giver automatisk et standardtema. Du kan lade dette være som det er eller vælge et andet tema at starte fra.
3. Shopify har en tjekliste, du kan gå igennem for at fuldende din butik. Du ønsker at gøre alt det grundlæggende, såsom at tilføje produktsider, designe din butiksfacade osv.

Nu hvor du har det grundlæggende skelet i din online butik, kan du trække disse data fra Shopify server og tilpas den ved hjælp af Liquid (mere om dette nedenfor). 

Selvom du ikke behøver nogen kodningserfaring for at begynde at bruge Liquid, vil fortrolighed med grundlæggende kodningsprincipper gøre din rejse lettere. Men for det meste kan du finde omfattende selvhjælpsdokumentation og tutorials om Shopify udviklerportal. Her finder du en hel sektion dedikeret til Grundlæggende om flydende. 

Det er tilrådeligt, at du bruger lidt tid på at læse disse vejledninger igennem, før du starter. Selvom Liquid er et kraftfuldt tilpasningsværktøj, har det også potentialet til at ødelægge dit websted, hvis du ikke ved, hvad du laver!

Kom godt i gang med Shopify Flydende

Så lad os se, hvordan vi kan redigere vores Shopify tema ved hjælp af Liquid. 

Følg disse trin for at få adgang til Liquid:

1. Dupliker dit tema: For at forhindre større uheld er det klogt at lave en kopi af dit tema, før du starter. På den måde, hvis du laver fejl, din original Shopify temaet forbliver intakt. For at gøre dette skal du navigere til temasektionen i højre side af din Shopify dashboard. Vælg det tema, du vil redigere, og klik på handlinger for at se rullemenuen. Vælg nu dublet.
2. Omdøb dit dublet: Når du dublerer et tema, vil du se det vises på din liste over temaer. Du kan omdøbe din kopi, så du ikke forveksler originalen og duplikatet. Bare klik på handlingsknappen igen og tryk på omdøb i rullemenuen. 
3. Indtastning af kodeeditoren: Vælg nu handlinger på din dublet igen og vælg rediger kode. Du vil blive dirigeret til den komplette liste over koder inden for dit tema. Tag et kig på mapperne til højre. Du bør se en masse mapper, der indeholder forskellige aspekter af dit tema, såsom layout, skabeloner, sektioner osv. Åbn skabelonmappen. 
4. Kodning i væske: Inde i skabelonmappen vil du se en liste over filer med filtypen .liquid. Du kan også oprette en ny flydende filskabelon ved at vælge plusknappen på skabelonmappen. Den vil spørge dig, hvilken skabelon du vil lave, dvs. side, sektion, blog osv., og om at navngive filen. For at redigere en fil skal du dobbeltklikke på en skabelonfil, og den åbnes i kodeeditoren til højre.

Inde i enhver Liquid-fil vil du se et HTML-script. Dette er skelettet på din hjemmeside. Du kan bruge det flydende sprog i denne HTML til at hente information fra Shopify server. Så længe du bruger den korrekte Liquid-syntaks, dvs. parenteserne, bør den gengive dit indhold i overensstemmelse hermed.

For at illustrere det, lad os gennemgå et let eksempel:

Ændre størrelse på billeder ved hjælp af Shopify Flydende

Billeder er et væsentligt aspekt af de fleste Shopify butikker. Men hvis du bruger flere billeder, kan det være et mareridt at dimensionere dem alle korrekt, så de fremstår pænt. For at rette op på dette kigger vi på img_url filter. Ligesom andre filtre er img_url designet til at ændre det indhold, det tager fra Shopify server. Du kan bruge dette filter til at ændre dine billeders størrelse, skalering, format og beskæring. 

Dette er en fremragende teknik, fordi filteret kun midlertidigt ændrer et eksisterende billede; det opretter ikke et nyt billede hver gang for at gengive din skabelon, så det vil ikke sinke dit websteds indlæsningstid. 

Så hvordan ændrer vi størrelsen på et billede?

Først skal vi beslutte, hvor vi vil anvende ændringerne. Du kan anvende img_url filter til ethvert objekt med en billedegenskab, herunder:

• Produkter
• Produktvarianter
• Linjeposter
• Kollektioner
• Artikler

Når du har besluttet dig for, hvilke billeder du vil redigere, skal du vide, hvilken ejendom du ønsker at målrette mod. For at finde ud af, hvilke egenskaber der har en billedattribut, skal du se på Shopify's liste over objekter og deres egenskaber. 

I dette eksempel vil vi målrette vores blogartikelbilleder.

Her er den grundlæggende kode:

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

Sammenbrud:

• Blog er det objekt, vi leder efter, og vi vil have ejendommen artikler, da dette indeholder alle artiklerne i vores blog. Specifikt ønsker vi at ændre billederne i vores blogartikler, så vi målretter mod billede ejendom inden for artikler.
• Nu anvender vi filteret img_url. Hvis vi forlod dette som det er, ville det blot vise et billede hentet fra URL'en leveret af Shopify server. Vi vil dog også give en ekstra parameter: billedstørrelsen '100×100' (Noter det Shopify bruger pixels til at bestemme størrelsesintervaller).
• Til sidst pakker vi vores kode ved hjælp af Liquid double-bracket syntaksen, som bruges til filtre. 

Og vi er færdige! Dette skulle returnere output for alle vores blogbilleder, hvilket gør dem 100 gange 100 pixels i størrelse.

Tips og takeaways

Jeg håber, at efter at have læst denne artikel, har du nu et svar på spørgsmålet: Hvad er Shopify Væske?

Som du kan se, Shopify Flydende er et alsidigt værktøj, der kan tjene forskellige funktioner, når du designer eller redigerer en Shopify skabelon. Selvom der er lidt af en indlæringskurve, så er det, når du har vænnet dig til det, rimeligt nemt at bruge – især sammenlignet med andre mere komplekse kodningssprog som Javascript.

Hvis du er interesseret i at bruge Shopify Flydende, vi vil råde dig til at følge disse takeaways for at få mest muligt ud af det:

1. Start med en solid forståelse af Liquid: En stærk forståelse af Liquid giver dig mulighed for at bygge mere komplekse brugerdefinerede temaer. Med dette fundament kan nye brugere udnytte det fulde potentiale af Shopify at skabe unikke og engagerende netbutikker.
2. Test dit tema grundigt: Test er afgørende for at sikre, at dit brugerdefinerede tema fungerer som forventet på tværs af forskellige browsere og enheder. Ved at fange kompatibilitetsproblemer tidligt undgår du potentiel frustration for dine kunder.
3. Brug tilgængelige værktøjer og ressourcer: Shopify har et væld af ressourcer til rådighed for at hjælpe temaudviklere, så brug dem! Når det bruges, kan dette gøre udviklingsprocessen hurtigere og nemmere.

Med alle disse punkter dækket, tror jeg, det er sikkert at sige det Shopify Liquid kan være en sjov og effektiv måde at opdatere eller skabe en mere engagerende og dynamisk Shopify butik. 

Det er alt fra mig; over til dig. Fortæl mig om dine erfaringer med Shopify Væske i kommentarerne nedenfor!