Vad är Shopify Flytande? En snabb genomgång av grunderna

Över 4.4 miljoner e-handelswebbplatser byggs med hjälp av Shopify plattform. Det är allt-i-ett-e-handelsplattformen som har skakat webben sedan starten 2006. Handlare väljer denna plattform för att vara värd för sina onlinebutiker av många anledningar, från enkel betalningsinställning till inbyggda marknadsföringsverktyg och mycket mer. 

Men en av de kritiska aspekterna av Shopify är dess intuitiva webbplatsbyggare med tusentals teman och Shopify appintegrationer att välja mellan. 

Men medan ingen kodbyggare låter dig skapa fantastiska och unika webbplatser, det finns vissa begränsningar. Till exempel, när du börjar bygga din onlinebutik måste du välja ett tema som definierar arrangemanget och nivån av kontroll du får över ditt innehåll. Även om du väljer ett tomt tema, dvs ett utan innehåll, finns det fortfarande en underliggande kodarkitektur som fördefinierar hur innehållet är organiserat.

Men det finns goda nyheter. Om du vill skapa din egen Shopify mall för din webbplats eller någon annans, det finns Shopify Flytande.

Intresserad? Följ med mig när jag försöker svara på frågan: Vad är Shopify Flytande? Låt oss dyka in!

Vad är Shopify Flytande?

Intressant, Shopify Vätska har funnits sedan dess Shopifys tillkomst. När Shopifys skapare designade först plattformen, de konstruerade ett projekt med öppen källkod för att fungera som mallspråk för alla Shopify webbplats mallar. 

För de oinitierade hänvisar "öppen källkodsprogrammeringsspråk" till en programvaras källkod som är fritt tillgänglig för allmänheten, vilket gör att vem som helst kan använda, modifiera och distribuera koden för alla ändamål. 

Skapad med Ruby, Shopify Flytande fungerar i huvudsak som en platshållare så att du kan infoga data i ett fördefinierat format (mer om detta nedan).

Så, hur fungerar det här?

För att förstå detta måste du först veta att webbplatser vanligtvis är statiska eller dynamiska. Statiska butiker är hårdkodade för att visa innehåll exakt som det är skrivet, till exempel i HTML. Däremot kan en dynamisk webbplats visa olika innehåll beroende på hur användaren interagerar med den. 

Låt oss nu säga att du har en statisk webbplats; webbplatsens grundskelett är förinställt, men du vill rendera dynamiskt innehåll. Det är här man skriver Shopify Vätska i din HTML-kod är praktiskt. Detta lämpar sig som en platshållare för dynamiskt innehåll. 

Shopify Vätska fungerar som en mellanhand mellan din butik och Shopifys server, vilket gör att Liquid kan hämta data från Shopifys server och leverera den till din butik. Liquid kan begära tre huvudtyper av data:

1. Objekt
2. Tags
3. Filter

Nedan kommer vi att utforska varje datatyp i tur och ordning:

Flytande föremål

Objekt liknar ett bibliotek med funktioner eller innehåll; inom varje objekt finns det olika egenskaper. 

Om du inte är bekant med begreppet objekt, här är en kort översikt:

Ett objekt är ett grundläggande begrepp inom programmering. Ett objekt består av två komponenter: 

1. Egenskaper som definierar objektets tillstånd
2. Funktioner som definierar objektets beteende

För att bättre illustrera hur detta fungerar använder vi ett icke-kodningsrelaterat exempel. Till exempel en bil. Här kan bilen, dvs objektet, ha funktioner som "accelerera", "svänga" och "bromsa". Däremot kan egenskaperna vara bilens "fönster", "dörrar" etc. 

Enkelt uttryckt är föremål en viktig koncept i kodning eftersom de hjälper till att organisera komplexa system i mer hanterbara bitar.

Låt oss till exempel säga att du skapar en anpassad Shopify tema och vill visa en Bloggtitel i din mall. Du kan använda Liquid för att hämta den informationen från Shopifys server och visa den någonstans på sidan. I det här exemplet är det här den flytande koden du skulle använda för att uppnå detta:

{{Blog.title}} 

Låt oss bryta ner det här:

• Här,'blogg' är föremålet. 
• Fastigheten vi vill ha inom detta bibliotek är markerad med 'rubricerade. ' 
• Smakämnen '' berättar för Liquid hur dessa två databitar är relaterade. 
• Dubbla parenteser är flytande syntax som definierar det {{innehåll/utdata du vill ha}} du vill ha från Shopify servern. 

Flytande taggar

När man använder Shopify Flytande, taggar lägger till logik till innehållet vi begär från Shopify server för att hjälpa till att definiera när innehåll ska vara synligt på sidan. Låt oss till exempel säga att vi vill visa en viss grafik på våra festliga blogginlägg. Dvs vi vill att denna grafik bara ska visas när ett specifikt villkor är uppfyllt. 

Så här kan det se ut:

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

**bild HTML**

{% slut om %}

Det här kan tyckas komplicerat, men om vi bryter ner det är det ganska enkelt att förstå:

• Taggar använder en något annorlunda syntax än objekt som ser ut så här  {%…%}.
• Den första taggen {% if blog.title == 'firande' %} talar om för Liquid vilket villkor som måste uppfyllas innan innehåll begärs från servern.
• Villkoret vi frågade efter definieras av en 'om' uttalande. Om du är bekant med kodning vet du att "om"-satser fungerar genom att jämföra två eller flera datastycken med varandra. Om de matchar kommer det att gå vidare till nästa rad i vår kod. Här,  if blog.title == 'firande,' vi ber Liquid att kontrollera om vår bloggtitel innehåller ordet "firande". Om den gör det kommer den att gå ner till nästa rad i vår kod. Om det inte gör det kommer Liquid inte att returnera något innehåll.
• I det här exemplet, om vi har en bloggtitel som innehåller ordet "celebration", kommer Liquid att dra och visa vår bild-HTML.
• När den gör detta går den till följande rad {% end if %}, som avslutar vårt program.

Det här är bara ett exempel på vad du kan göra med taggar. Shopify Liquid har taggar till:

• kontroll när koden körs
• Iterera/iteration (upprepa) ett kodblock
• Skärmar vissa HTML-uppmärkningar
• Skapa nya variabler.

Vätskefilter

Filter är bitar av kod som ändrar eller modifierar utdata från ett objekt. De kan till exempel ändra färg, teckensnitt, storlek eller utseende på webbplatselement. 

Men förutom att ändra objektets synliga aspekter kan de utföra funktioner på ett objekt. Om du till exempel vill visa dina bloggtitlar i första hand, kan ett filter hjälpa dig att uppnå detta utan att manuellt ändra alla dina bloggtitlar:

{{ blog.title | uppercase }}

• Syntaxen för filter är {{…}}.
• Här är objektegenskapen vi letar efter 'Bloggtitel'.
• Filtret vi använder är versaler.
• Smakämnen '|' separerar ingången och utmatningen av vår kod.

Nu, när en användare tittar på vår bloggtitel, visas den med versaler.

Fördelar med Shopify Flytande

Anta att du är en webbplatsdesigner eller utvecklare. I så fall en av de viktigaste fördelarna med Shopify Flytande är att du inte behöver butiksdata (dvs. information om butiken) för att skapa eller ändra en webbplats. Detta beror på att när en användare först gör en Shopify lagra, all information lagras på Shopify server, vilket innebär att du kan använda Liquid för att helt enkelt hämta den data du behöver. 

Men om du inte är en webbutvecklare, utan istället bara är en butiksägare som vill piffa upp din butik, finns det fördelar för dig också:

• Lätt att lära sig och använda: Liquid har en enkel syntax och är lätt att förstå, vilket gör den tillgänglig för utvecklare och icke-utvecklare.
• Dynamiskt innehåll: Vätska möjliggör dynamiskt innehållsskapande
• Anpassningsbar: Med Liquid kan du skapa anpassade mallar och teman, vilket ger dig fullständig kontroll över utseendet och känslan i din e-handelsbutik.
• Förbättrad prestanda: Flytande mallar kompileras och cachelagras, vilket förbättras webbplatsens prestanda och hastighet jämfört med andra mallmotorer.
• Stort samhälle: Shopify har en stor användargemenskap som ger tillgång till en mängd kunskap och support, vilket gör det lättare att hitta lösningar på vanliga vätskerelaterade problem.

Krav

Så vad behöver du för att börja använda Shopify Flytande?

Om du redan har en Shopify lagra, Shopify Vätska kommer att finnas tillgänglig för dig att använda gratis. Vi kommer att diskutera hur du kan hitta Liquid nedan. Men allt du behöver veta för nu är att varje webbplats som skapas på Shopify är byggd med Liquid, så du kan börja manuellt redigera den här koden så snart du har skapat en webbplats.

Men om du inte har en Shopify butik, måste du skapa en för att börja leka med Liquid. 

1. Först, gå över till Shopify och välj en plan. Fyll i dina uppgifter och skapa ditt konto.
2. Från din Shopify admin, klicka på teman. Shopify ger automatiskt ett standardtema. Du kan lämna detta som det är eller välja ett annat tema att utgå ifrån.
3. Shopify har en checklista som du kan gå igenom för att slutföra din butik. Du kommer att vilja göra alla grunderna, som att lägga till produktsidor, designa ditt skyltfönster, etc.

Nu när du har det grundläggande skelettet i din onlinebutik kan du hämta dessa data från Shopify server och anpassa den med Liquid (mer om detta nedan). 

Även om du inte behöver någon kodningserfarenhet för att börja använda Liquid, kommer förtrogenhet med grundläggande kodningsprinciper att göra din resa enklare. Men för det mesta kan du hitta omfattande självhjälpsdokumentation och handledning om Shopify utvecklarportal. Här hittar du en hel sektion tillägnad Grunderna för flytande. 

Det är tillrådligt att du lägger lite tid på att titta igenom dessa guider innan du börjar. Även om Liquid är ett kraftfullt anpassningsverktyg, har det också potential att bryta din webbplats om du inte vet vad du gör!

Komma igång med Shopify Flytande

Så, med hjälp av det vi har lärt oss hittills, låt oss se hur vi kan gå tillväga för att redigera vår Shopify tema med Liquid. 

Följ dessa steg för att komma åt Liquid:

1. Duplicera ditt tema: För att förhindra några större missöden är det klokt att göra en kopia av ditt tema innan du börjar. På så sätt, om du gör några misstag, ditt original Shopify temat förblir intakt. För att göra detta, navigera till temasektionen till höger om din Shopify instrumentbräda. Välj det tema du vill redigera och klicka på åtgärder för att se rullgardinsmenyn. Välj nu duplicera.
2. Byt namn på din dubblett: När du duplicerar ett tema kommer du att se det visas i din lista över teman. Du kan byta namn på din kopia så att du inte blandar ihop originalet och dubbletten. Klicka bara på åtgärdsknappen igen och tryck på Byt namn på rullgardinsmenyn. 
3. Gå in i kodredigeraren: Välj nu åtgärder på din dubblett igen och välj redigera kod. Du kommer att dirigeras till den fullständiga listan med koder inom ditt tema. Ta en titt på mapparna till höger. Du bör se ett gäng mappar som innehåller olika aspekter av ditt tema, såsom layout, mallar, sektioner, etc. Öppna mallmappen. 
4. Kodning i vätska: Inuti mallmappen ser du en lista över filer med filtypen .liquid. Du kan också skapa en ny flytande filmall genom att välja plusknappen i mallmappen. Den kommer att fråga dig vilken mall du vill göra, t.ex. sida, avsnitt, blogg, etc., och namnge filen. För att redigera en fil, dubbelklicka på en mallfil, så öppnas den i kodredigeraren till höger.

Inuti vilken flytande fil som helst ser du ett HTML-skript. Detta är skelettet på din webbplats. Du kan använda det flytande språket i denna HTML för att hämta information från Shopify server. Så länge du använder rätt Liquid-syntax, dvs. hakparenteserna, bör den återge ditt innehåll därefter.

För att illustrera, låt oss gå igenom ett enkelt exempel:

Ändra storlek på bilder med hjälp av Shopify Flytande

Bilder är en viktig aspekt av de flesta Shopify butiker. Men om du använder flera bilder kan det vara en mardröm att göra rätt storlek på dem alla så att de ser snyggt ut. För att fixa detta tittar vi på img_url filtrera. Liksom andra filter är img_url utformad för att modifiera innehållet det tar från Shopify server. Du kan använda det här filtret för att ändra dina bilders storlek, skala, format och beskärning. 

Detta är en utmärkt teknik eftersom filtret endast tillfälligt modifierar en befintlig bild; det skapar inte en ny bild varje gång för att rendera din mall, så det kommer inte att sakta ner din webbplatss laddningstid. 

Så, hur ändrar vi storlek på en bild?

Först måste vi bestämma var vi vill tillämpa ändringarna. Du kan tillämpa img_url filter till alla objekt med en bildegenskap, inklusive:

• Produkter
• Produktvarianter
• Rader
• Kollektioner
• Artiklar

När du har bestämt dig för vilka bilder du vill redigera måste du veta vilken egenskap du vill rikta in dig på. För att ta reda på vilka egenskaper som har ett bildattribut, titta på Shopifys lista över objekt och deras egenskaper. 

I det här exemplet kommer vi att rikta in oss på våra bloggartikelbilder.

Här är grundkoden:

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

Bryta ner:

• Blogg är objektet vi letar efter och vi vill ha fastigheten artiklar, eftersom det här innehåller alla artiklar i vår blogg. Specifikt vill vi ändra bilderna i våra bloggartiklar, så vi riktar in oss på bild egendom inom artiklar.
• Nu applicerar vi filtret img_url. Om vi ​​lämnade detta som det är, skulle det helt enkelt visa en bild hämtad från webbadressen som tillhandahålls av Shopify server. Men vi kommer också att ge en extra parameter: bildstorleken '100×100' (anteckna det Shopify använder pixlar för att bestämma storleksintervall).
• Slutligen lindar vi vår kod med hjälp av Liquid-syntaxen med dubbla parenteser, som används för filter. 

Och vi är klara! Detta bör returnera utdata för alla våra bloggbilder, vilket gör dem 100 gånger 100 pixlar i storlek.

Tips och takeaways

Jag hoppas att efter att ha läst den här artikeln har du nu ett svar på frågan: Vad är Shopify Flytande?

Som ni kan se, Shopify Flytande är ett mångsidigt verktyg som kan fylla olika funktioner när du designar eller redigerar en Shopify mall. Även om det finns lite av en inlärningskurva, när du väl har vant dig vid det, är det ganska lätt att använda – speciellt jämfört med andra mer komplexa kodningsspråk som Javascript.

Om du är intresserad av att använda Shopify Flytande, vi skulle råda dig att följa dessa takeaways för att få ut det mesta av det:

1. Börja med en gedigen förståelse för Liquid: En stark förståelse för Liquid gör att du kan bygga mer komplexa anpassade teman. Med denna grund kan nya användare utnyttja den fulla potentialen av Shopify att skapa unika och engagerande nätbutiker.
2. Testa ditt tema noggrant: Testning är avgörande för att säkerställa att ditt anpassade tema fungerar som förväntat i olika webbläsare och enheter. Genom att fånga kompatibilitetsproblem tidigt undviker du potentiell frustration för dina kunder.
3. Använd tillgängliga verktyg och resurser: Shopify har en mängd resurser tillgängliga för att hjälpa temautvecklare, så använd dem! När det används kan detta göra utvecklingsprocessen snabbare och enklare.

Med alla dessa punkter täckta tror jag att det är säkert att säga det Shopify Liquid kan vara ett roligt och effektivt sätt att uppdatera eller skapa en mer engagerande och dynamisk Shopify lagra. 

Det är allt från mig; över till dig. Berätta för mig om dina erfarenheter av Shopify Flytande i kommentarerna nedan!