Wat is Shopify Vloeistof? Een snel overzicht van de basis

Over 4.4 miljoen e-commerce websites worden gebouwd met behulp van de Shopify platform. Het is het alles-in-één eCommerce-platform dat het web op zijn kop heeft gezet sinds de start in 2006. Handelaren kiezen dit platform om vele redenen om hun online winkels te hosten, van eenvoudige betalingsinstellingen tot ingebouwde marketingtools en nog veel meer. 

Maar een van de kritieke aspecten van Shopify is de intuïtieve sitebouwer met duizenden thema's en Shopify app-integraties om uit te kiezen. 

Terwijl de bouwer zonder code kunt u verbluffende en unieke websites maken, er zijn enkele beperkingen. Wanneer u bijvoorbeeld begint met het bouwen van uw online winkel, moet u een thema kiezen dat de indeling en het niveau van controle bepaalt dat u over uw inhoud krijgt. Zelfs als u een leeg thema selecteert, dat wil zeggen een thema zonder inhoud, is er nog steeds een onderliggende codearchitectuur die bepaalt hoe inhoud wordt georganiseerd.

Maar er is goed nieuws. Als u uw eigen wilt maken Shopify sjabloon voor uw site of die van iemand anders, er is Shopify Vloeistof.

Geïnteresseerd? Doe mee terwijl ik probeer de vraag te beantwoorden: wat is Shopify Vloeistof? Laten we erin duiken!

Wat is Shopify Vloeistof?

Interessant, Shopify Vloeistof bestaat sindsdien Shopify's aanvang. Wanneer Shopify's makers eerst het platform ontwierpen, construeerden ze een open-sourceproject om als sjabloontaal voor iedereen te dienen Shopify website sjablonen. 

Voor niet-ingewijden verwijst 'open-source programmeertaal' naar de broncode van software die vrij beschikbaar is voor het publiek, zodat iedereen de code voor elk doel kan gebruiken, wijzigen en verspreiden. 

Gemaakt met Ruby, Shopify Vloeistof fungeert in feite als een tijdelijke aanduiding, zodat u gegevens in een vooraf gedefinieerde indeling kunt invoegen (hieronder meer hierover).

Dus, hoe werkt dit?

Om dit te begrijpen, moet u eerst weten dat websites doorgaans statisch of dynamisch zijn. Statische archieven zijn hard gecodeerd om inhoud precies weer te geven zoals deze is geschreven, bijvoorbeeld in HTML. Een dynamische website kan daarentegen verschillende inhoud weergeven, afhankelijk van hoe de gebruiker ermee omgaat. 

Stel nu dat u een statische website heeft; het basisskelet van de site is vooraf ingesteld, maar u wilt dynamische inhoud weergeven. Dit is waar schrijven Shopify Vloeibaar in uw HTML-code is handig. Dit leent zich als een tijdelijke aanduiding voor dynamische inhoud. 

Shopify Liquid fungeert als intermediair tussen uw winkel en Shopify's server, waardoor Liquid gegevens kan ophalen Shopify's server en bezorg het aan uw winkel. Liquid kan drie hoofdtypen gegevens opvragen:

1. Objecten
2. Tags
3. filters

Hieronder zullen we elk gegevenstype achtereenvolgens onderzoeken:

Vloeibare objecten

Objecten zijn vergelijkbaar met een bibliotheek met functies of inhoud; binnen elk object zijn er verschillende eigenschappen. 

Als u niet bekend bent met het concept van objecten, volgt hier een kort overzicht:

Een object is een fundamenteel concept bij het programmeren. Een object bestaat uit twee componenten: 

1. Eigenschappen die de status van het object definiëren
2. Functies die het gedrag van het object definiëren

Om beter te illustreren hoe dit werkt, gebruiken we een niet-coderingsgerelateerd voorbeeld. Bijvoorbeeld een auto. Hier zou de auto, dwz het object, functies kunnen hebben als 'versnellen', 'draaien' en 'remmen'. De eigenschappen kunnen daarentegen de "ramen", "deuren", enz. van de auto zijn. 

Simpel gezegd, objecten zijn belangrijk concept in codering omdat ze helpen complexe systemen te ordenen in beter beheersbare brokken.

Stel dat u bijvoorbeeld een gewoonte maakt Shopify thema en wil een weergeven Blog Titel in uw sjabloon. U kunt Liquid gebruiken om die informatie van Shopify's server en laat het ergens op de pagina zien. In dit voorbeeld is dit het stuk Liquid-code dat u zou gebruiken om dit te bereiken:

{{Blog.title}} 

Laten we dit opsplitsen:

• Hier, 'blog' is het voorwerp. 
• Het pand dat we hierin willen hebben bibliotheek wordt gemarkeerd door 'titel. ' 
• De '' vertelt Liquid hoe deze twee stukjes gegevens met elkaar in verband staan. 
• De dubbele haakjes zijn Liquid-syntaxis die de {{content/output you want}} definieert die je wilt van de Shopify server. 

Vloeibare labels

Tijdens gebruik Shopify Vloeistof, voegen tags logica toe aan de inhoud die we opvragen bij de Shopify server om te helpen bepalen wanneer inhoud zichtbaar moet zijn op de pagina. Laten we bijvoorbeeld zeggen dat we een bepaalde afbeelding willen weergeven op onze feestelijke blogposts. Dat wil zeggen, we willen dat deze afbeelding alleen verschijnt als aan een specifieke voorwaarde is voldaan. 

Dit is hoe dit eruit zou kunnen zien:

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

**afbeelding HTML**

{% stop als %}

Dit lijkt misschien ingewikkeld, maar als we het opsplitsen, is het vrij eenvoudig te begrijpen:

• Tags gebruiken een iets andere syntaxis dan objecten die er zo uitzien  {%…%}.
• Het eerste label {% if blog.title == 'viering' %} vertelt Liquid aan welke voorwaarde moet worden voldaan voordat inhoud van de server wordt opgevraagd.
• De voorwaarde waar we om vroegen wordt gedefinieerd door een 'als' verklaring. Als u bekend bent met coderen, weet u dat 'als'-statements werken door twee of meer gegevens met elkaar te vergelijken. Als ze overeenkomen, gaat het door naar de volgende regel in onze code. Hier,  if blog.title == 'viering,' we vragen Liquid om te controleren of onze blogtitel het woord 'viering' bevat. Als dit het geval is, gaat het naar de volgende regel van onze code. Als dit niet het geval is, retourneert Liquid geen inhoud.
• Als we in dit voorbeeld een blogtitel hebben die het woord 'viering' bevat, zal Liquid onze HTML-afbeelding ophalen en weergeven.
• Zodra het dit doet, gaat het naar de volgende regel {% stop als %}, waarmee ons programma wordt beëindigd.

Dit is slechts één voorbeeld van wat u met tags kunt doen. Shopify Vloeistof heeft tags voor:

• Controle wanneer code wordt uitgevoerd
• Herhalen/herhaling (herhaal) een codeblok
• Display bepaalde HTML-markeringen
• Maak nieuwe variabelen.

Vloeistoffilters

Filters zijn stukjes code die de uitvoer van een object wijzigen of aanpassen. Ze kunnen bijvoorbeeld de kleur, het lettertype, de grootte of het uiterlijk van website-elementen wijzigen. 

Maar naast het veranderen van de zichtbare aspecten van het object, kunnen ze functies op een object uitvoeren. Als u bijvoorbeeld uw blogtitels in hoofdletters wilt weergeven, kan een filter u helpen dit te bereiken zonder al uw blogtitels handmatig te wijzigen:

{{ blog.title | uppercase }}

• De syntaxis voor filters is {{…}}.
• Hier is de objecteigenschap die we zoeken 'Blog Titel'.
• Het filter dat we toepassen is hoofdletters.
• De '|' scheidt de input en output van onze code.

Als een gebruiker nu naar onze blogtitel kijkt, verschijnt deze in hoofdletters.

Voordelen van Shopify Vloeistof

Stel dat u een site-ontwerper of -ontwikkelaar bent. In dat geval een van de belangrijkste voordelen van Shopify Liquid is dat je de winkelgegevens (d.w.z. informatie over de winkel) niet nodig hebt om een ​​website te maken of te wijzigen. Dit komt omdat wanneer een gebruiker voor het eerst een Shopify opslaan, alle informatie wordt opgeslagen op de Shopify server, wat betekent dat u Liquid kunt gebruiken om eenvoudig de gegevens op te halen die u nodig hebt. 

Als u echter geen webontwikkelaar bent, maar gewoon een winkeleigenaar die uw winkel wil opfleuren, zijn er ook voordelen voor u:

• Eenvoudig te leren en te gebruiken: Liquid heeft een eenvoudige syntaxis en is gemakkelijk te begrijpen, waardoor het toegankelijk is voor ontwikkelaars en niet-ontwikkelaars.
• Dynamische inhoud: Liquid maakt dynamische contentcreatie mogelijk
• Klantgericht: Met Liquid kun je aangepaste sjablonen en thema's maken, waardoor je volledige controle hebt over het uiterlijk van je e-commerce winkel.
• Verbeterde prestatie: Liquid-sjablonen worden gecompileerd en in de cache opgeslagen, waardoor ze verbeteren prestaties en snelheid van de website vergeleken met andere sjabloonengines.
• Grote gemeenschap: Shopify heeft een grote gebruikersgemeenschap, die toegang biedt tot een schat aan kennis en ondersteuning, waardoor het vinden van oplossingen voor veelvoorkomende Liquid-gerelateerde problemen eenvoudiger wordt.

Voorwaarden

Dus wat heb je nodig om te beginnen met gebruiken Shopify Vloeistof?

Als u al een Shopify shop, Shopify Vloeistof is gratis beschikbaar voor u. We bespreken hieronder hoe je Liquid kunt vinden. Maar alles wat u nu moet weten, is dat elke site die is gemaakt op Shopify is gebouwd met Liquid, dus je kunt beginnen met het handmatig bewerken van deze code zodra je een site hebt gemaakt.

Als u echter geen Shopify store, moet je er een maken om met Liquid te spelen. 

1. Ga eerst naar Shopify en selecteer een abonnement. Vul je gegevens in en maak je account aan.
2. Van jouw Shopify beheerder, klik op thema's. Shopify biedt automatisch een standaardthema. Je kunt dit laten zoals het is of een ander thema kiezen om mee te beginnen.
3. Shopify heeft een checklist die u kunt doorlopen om uw winkel te voltooien. U wilt alle basishandelingen uitvoeren, zoals het toevoegen van productpagina's, het ontwerpen van uw etalage, enz.

Nu u het basisskelet van uw online winkel heeft, kunt u deze gegevens uit de Shopify server en pas deze aan met Liquid (meer hierover hieronder). 

Hoewel je geen codeerervaring nodig hebt om Liquid te gaan gebruiken, zal bekendheid met de basisprincipes van coderen je reis gemakkelijker maken. Maar voor het grootste deel kunt u uitgebreide zelfhulpdocumentatie en tutorials vinden op de Shopify ontwikkelaars portaal. Hier vindt u een hele sectie gewijd aan Vloeibare basisprincipes. 

Het is raadzaam dat u enige tijd besteedt aan het doornemen van deze handleidingen voordat u begint. Hoewel Liquid een krachtige aanpassingstool is, heeft het ook de potentie om uw site kapot te maken als u niet weet wat u doet!

Beginnen met Shopify Vloeistof

Dus laten we, gebruikmakend van wat we tot nu toe hebben geleerd, kijken hoe we onze kunnen bewerken Shopify thema met Liquid. 

Volg deze stappen om toegang te krijgen tot Liquid:

1. Dupliceer je thema: Om grote ongelukken te voorkomen, is het verstandig om een ​​kopie van je thema te maken voordat je begint. Op die manier, als je fouten maakt, blijft je originele Shopify thema blijft intact. Om dit te doen, navigeert u naar het gedeelte Thema's aan de rechterkant van uw Shopify dashboard. Kies het thema dat u wilt bewerken en klik op acties om het vervolgkeuzemenu te zien. Selecteer nu dupliceren.
2. Hernoem uw duplicaat: Wanneer u een thema dupliceert, ziet u het verschijnen in uw lijst met thema's. U kunt uw kopie een andere naam geven, zodat u het origineel en het duplicaat niet door elkaar haalt. Klik nogmaals op de actieknop en klik op hernoemen in het vervolgkeuzemenu. 
3. De code-editor invoeren: Selecteer nu opnieuw acties op uw duplicaat en selecteer code bewerken. U wordt doorverwezen naar de volledige lijst met codes binnen uw thema. Bekijk de mappen aan uw rechterkant. U zou een aantal mappen moeten zien met verschillende aspecten van uw thema, zoals de lay-out, sjablonen, secties, enz. Open de map met sjablonen. 
4. Coderen in vloeistof: In de map met sjablonen ziet u een lijst met bestanden met het bestandstype .liquid. U kunt ook een nieuwe Liquid-bestandssjabloon maken door de plusknop in de sjabloonmap te selecteren. Het zal je vragen welk sjabloon je wilt maken, dwz pagina, sectie, blog, enz., en om het bestand een naam te geven. Om een ​​bestand te bewerken, dubbelklikt u op een sjabloonbestand en het wordt geopend in de code-editor aan de rechterkant.

In elk Liquid-bestand ziet u een HTML-script. Dit is het skelet van uw website. U kunt de Liquid-taal in deze HTML gebruiken om informatie op te halen uit de Shopify server. Zolang u de juiste Liquid-syntaxis gebruikt, dwz de haakjes, zou uw inhoud dienovereenkomstig moeten worden weergegeven.

Laten we ter illustratie een eenvoudig voorbeeld doornemen:

Het formaat van afbeeldingen wijzigen met behulp van Shopify Vloeistof

Afbeeldingen zijn een essentieel aspect van de meeste Shopify winkels. Maar als u meerdere afbeeldingen gebruikt, kan het een nachtmerrie zijn om ze allemaal op de juiste maat te krijgen, zodat ze er netjes uitzien. Om dit op te lossen, kijken we naar de img_url filter. Net als andere filters is img_url ontworpen om de inhoud te wijzigen die het uit het Shopify server. U kunt dit filter gebruiken om de grootte, schaal, opmaak en bijsnijding van uw afbeeldingen te wijzigen. 

Dit is een uitstekende techniek omdat het filter een bestaand beeld slechts tijdelijk wijzigt; het maakt niet elke keer een nieuwe afbeelding om uw sjabloon weer te geven, dus het zal de laadtijd van uw site niet vertragen. 

Dus, hoe kunnen we het formaat van een afbeelding wijzigen?

Eerst moeten we beslissen waar we de wijzigingen willen toepassen. U kunt de img_url-filter op elk object met een afbeeldingseigenschap, waaronder:

• Producten
• Productvarianten
• Regelitems
• Collecties
• Artikelen

Zodra u hebt besloten welke afbeeldingen u wilt bewerken, moet u weten welke eigenschap u wilt targeten. Om erachter te komen welke eigenschappen een afbeeldingsattribuut hebben, kijkt u naar Shopifylijst met objecten en hun eigenschappen. 

In dit voorbeeld richten we ons op de afbeeldingen van onze blogartikelen.

Hier is de basiscode:

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

Afbreken:

• Blog is het object dat we zoeken, en we willen het eigendom artikelen, aangezien dit alle artikelen in onze blog bevat. We willen met name de afbeeldingen in onze blogartikelen wijzigen, dus richten we ons op de beeld eigendom binnen artikelen.
• Nu passen we het filter toe img_url. Als we dit zouden laten zoals het is, zou het gewoon een afbeelding weergeven die is opgehaald uit de URL die door de Shopify server. We gaan echter ook een extra parameter meegeven: de afbeeldingsgrootte '100×100' (Let daar op Shopify gebruikt pixels om groottebereiken te bepalen).
• Ten slotte verpakken we onze code met behulp van de Liquid-syntaxis met dubbele haakjes, die wordt gebruikt voor filters. 

En we zijn klaar! Dit zou uitvoer moeten opleveren voor al onze blogafbeeldingen, waardoor ze 100 bij 100 pixels groot zijn.

Tips en afhaalmaaltijden

Ik hoop dat je na het lezen van dit artikel nu een antwoord hebt op de vraag: Wat is Shopify Vloeistof?

Zoals je kan zien, Shopify Vloeistof is een veelzijdige tool die verschillende functies kan hebben bij het ontwerpen of bewerken van een Shopify sjabloon. Hoewel er een beetje een leercurve is, is het, als je er eenmaal aan gewend bent, redelijk eenvoudig te gebruiken, vooral in vergelijking met andere, meer complexe codeertalen zoals Javascript.

Als je interesse hebt om te gebruiken Shopify Liquid, we raden je aan om deze tips te volgen om er het maximale uit te halen:

1. Begin met een goed begrip van Liquid: Een goed begrip van Liquid stelt u in staat om complexere aangepaste thema's te bouwen. Met deze basis kunnen nieuwe gebruikers het volledige potentieel van Shopify om unieke en boeiende online winkels te creëren.
2. Test je thema grondig: Testen is essentieel om ervoor te zorgen dat uw aangepaste thema werkt zoals verwacht in verschillende browsers en apparaten. Door compatibiliteitsproblemen vroegtijdig op te sporen, voorkomt u mogelijke frustratie bij uw klanten.
3. Gebruik beschikbare tools en bronnen: Shopify heeft een schat aan bronnen beschikbaar om thema-ontwikkelaars te helpen, dus gebruik ze! Wanneer dit wordt gebruikt, kan dit het ontwikkelingsproces sneller en gemakkelijker maken.

Nu al deze punten aan bod komen, denk ik dat het veilig is om dat te zeggen Shopify Liquid kan een leuke en effectieve manier zijn om te updaten of een meer boeiende en dynamische manier te creëren Shopify shop in shop. 

Dat is allemaal van mij; terug naar jou. Laat me weten wat je ervaringen zijn met Shopify Vloeibaar in de reacties hieronder!