Was ist Shopify Flüssig? Ein kurzer Überblick über die Grundlagen

Auf über 4.4 Millionen E-Commerce-Websites werden mit erstellt Shopify Plattform. Es ist die All-in-One-E-Commerce-Plattform, die das Internet seit ihrem Start im Jahr 2006 erschüttert hat. Händler wählen diese Plattform aus vielen Gründen, um ihre Online-Shops zu hosten, von der einfachen Zahlungseinrichtung bis hin zu integrierten Marketing-Tools und vielem mehr. 

Aber einer der kritischen Aspekte von Shopify ist sein intuitiver Site-Builder mit Tausenden von Themen und Shopify App-Integrationen zur Auswahl. 

Während der No-Code-Builder ermöglicht es Ihnen, atemberaubende und einzigartige Websites zu erstellen, es gibt jedoch einige Einschränkungen. Wenn Sie beispielsweise mit dem Aufbau Ihres Online-Shops beginnen, müssen Sie ein Thema auswählen, das die Anordnung und das Maß an Kontrolle definiert, die Sie über Ihre Inhalte erhalten. Selbst wenn Sie ein leeres Thema auswählen, dh eines ohne Inhalt, gibt es immer noch eine zugrunde liegende Codearchitektur, die vordefiniert, wie Inhalte organisiert werden.

Aber es gibt gute Nachrichten. Wenn Sie Ihre eigene erstellen möchten Shopify Vorlage für Ihre Website oder die einer anderen Person, gibt es Shopify Flüssigkeit.

Interessiert? Schließen Sie sich mir an, wenn ich mich bemühe, die Frage zu beantworten: Was ist Shopify Flüssig? Tauchen wir ein!

Was ist Shopify Flüssig?

Interessant, Shopify Seitdem gibt es Liquid Shopify's Gründung. Wenn ShopifyDie Entwickler von haben zuerst die Plattform entworfen und ein Open-Source-Projekt erstellt, das als Vorlagensprache für alle dient Shopify Website Templates. 

Für den Uneingeweihten bezieht sich „Open-Source-Programmiersprache“ auf den Quellcode einer Software, der der Öffentlichkeit frei zugänglich ist und es jedem ermöglicht, den Code für jeden Zweck zu verwenden, zu ändern und zu verteilen. 

Erstellt mit Ruby, Shopify Flüssigkeit dient im Wesentlichen als Platzhalter, damit Sie Daten in eine vordefinierte einfügen können format (mehr dazu weiter unten).

Wie funktioniert das?

Um dies zu verstehen, müssen Sie zunächst wissen, dass Websites normalerweise statisch oder dynamisch sind. Statische Stores sind hartcodiert, um Inhalte genau so anzuzeigen, wie sie beispielsweise in HTML geschrieben sind. Im Gegensatz dazu kann eine dynamische Website unterschiedliche Inhalte anzeigen, je nachdem, wie der Benutzer damit interagiert. 

Nehmen wir nun an, Sie haben eine statische Website. Das Grundgerüst der Website ist voreingestellt, Sie möchten jedoch dynamische Inhalte rendern. Hier wird geschrieben Shopify Flüssigkeit in Ihren HTML-Code ist praktisch. Dies bietet sich als Platzhalter für dynamische Inhalte an. 

Shopify Liquid fungiert als Vermittler zwischen Ihrem Geschäft und Shopify's Server, wodurch Liquid Daten abrufen kann Shopify's-Server und liefern sie an Ihren Shop. Liquid kann drei Haupttypen von Daten anfordern:

1. Objekte
2. Schlüsselwörter
3. Filter

Im Folgenden werden wir die einzelnen Datentypen der Reihe nach untersuchen:

Flüssige Objekte

Objekte ähneln einer Bibliothek von Funktionen oder Inhalten; Innerhalb jedes Objekts gibt es verschiedene Eigenschaften. 

Wenn Sie mit dem Konzept von Objekten nicht vertraut sind, hier ein kurzer Überblick:

Ein Objekt ist ein grundlegendes Konzept in der Programmierung. Ein Objekt besteht aus zwei Komponenten: 

1. Eigenschaften, die den Zustand des Objekts definieren
2. Funktionen, die das Verhalten des Objekts definieren

Um besser zu veranschaulichen, wie dies funktioniert, verwenden wir ein nicht codierungsbezogenes Beispiel. Zum Beispiel ein Auto. Dabei könnte das Auto bzw. der Gegenstand Funktionen wie „beschleunigen“, „abbiegen“ und „bremsen“ haben. Im Gegensatz dazu könnten die Eigenschaften die „Fenster“, „Türen“ usw. des Autos sein. 

Einfach ausgedrückt, Objekte sind wichtig Konzept in der Codierung weil sie dabei helfen, komplexe Systeme in überschaubarere Blöcke zu organisieren.

Nehmen wir zum Beispiel an, Sie erstellen eine benutzerdefinierte Shopify Thema und möchte a anzeigen Blog Titel in deiner Vorlage. Sie können Liquid verwenden, um das einzubringenformatIon aus Shopify's Server und zeigen Sie es irgendwo auf der Seite an. In diesem Beispiel ist dies der Liquid-Code, den Sie verwenden würden, um dies zu erreichen:

{{Blog.title}} 

Lassen Sie uns das zusammenfassen:

• Hier, 'Blog“ ist das Objekt. 
• Die Eigenschaft, die wir in diesem wollen Bibliothek ist gekennzeichnet durch 'Titel. " 
• Das '.' teilt Liquid mit, wie diese beiden Datenbits zusammenhängen. 
• Die doppelten Klammern sind die Liquid-Syntax, die den gewünschten {{Inhalt/die gewünschte Ausgabe}} definiert Shopify Server. 

Flüssige Tags

Beim Benutzen Shopify Flüssigkeit, fügen Tags Logik zu den Inhalten hinzu, die wir von der anfordern Shopify Server, um festzulegen, wann Inhalte auf der Seite sichtbar sein sollen. Nehmen wir zum Beispiel an, wir möchten eine bestimmte Grafik in unseren festlichen Blog-Posts anzeigen. Das heißt, wir wollen, dass diese Grafik nur erscheint, wenn eine bestimmte Bedingung erfüllt ist. 

So könnte das aussehen:

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

**Bild-HTML**

{% Ende, wenn %}

Das mag komplex erscheinen, aber wenn wir es aufschlüsseln, ist es ziemlich einfach zu verstehen:

• Tags verwenden eine etwas andere Syntax als Objekte, die so aussehen  {%…%}.
• Das erste Etikett {% if blog.title == 'Feier' %} teilt Liquid mit, welche Bedingung erfüllt sein muss, bevor Inhalte vom Server angefordert werden.
• Die Bedingung, nach der wir gefragt haben, ist durch an definiert 'if'-Anweisung. Wenn Sie mit Codierung vertraut sind, wissen Sie, dass 'if'-Anweisungen funktionieren, indem sie zwei oder mehr Daten miteinander vergleichen. Wenn sie übereinstimmen, geht es weiter zur nächsten Zeile in unserem Code. Hier,  if blog.title == 'Feier,' Wir bitten Liquid, zu überprüfen, ob unser Blog-Titel das Wort „Feier“ enthält. Wenn dies der Fall ist, wird es in die nächste Zeile unseres Codes verschoben. Wenn dies nicht der Fall ist, gibt Liquid keine Inhalte zurück.
• Wenn wir in diesem Beispiel einen Blog-Titel haben, der das Wort „Feier“ enthält, ruft Liquid unser Bild-HTML ab und zeigt es an.
• Sobald dies geschehen ist, geht es zur folgenden Zeile {% end if %}, was unser Programm beendet.

Dies ist nur ein Beispiel dafür, was Sie mit Tags tun können. Shopify Liquid hat Tags für:

• Control wenn Code ausgeführt wird
• Iterieren/Iteration (wiederholen) einen Codeblock
• Display bestimmte HTML-Markups
• Erstellen Sie neue Variablen.

Flüssigkeitsfilter

Filter sind Codeteile, die die Ausgabe eines Objekts ändern oder modifizieren. Sie können beispielsweise die Farbe, Schriftart, Größe oder das Aussehen von Website-Elementen ändern. 

Aber sie können nicht nur die sichtbaren Aspekte des Objekts verändern, sondern auch Funktionen an einem Objekt ausführen. Wenn Sie beispielsweise Ihre Blog-Titel in Großbuchstaben anzeigen möchten, kann Ihnen ein Filter dabei helfen, dies zu erreichen, ohne alle Ihre Blog-Titel manuell ändern zu müssen:

{{ blog.title | uppercase }}

• Die Syntax für Filter lautet {{…}}.
• Hier ist die Objekteigenschaft, nach der wir suchen, 'Blog Titel'.
• Der Filter, den wir anwenden, ist Groß.
• Das '|' trennt die Eingabe und Ausgabe unseres Codes.

Wenn sich ein Benutzer jetzt unseren Blog-Titel ansieht, wird er in Großbuchstaben angezeigt.

Vorteile Shopify Flüssigkeit

Angenommen, Sie sind ein Website-Designer oder -Entwickler. In diesem Fall einer der wichtigsten Vorteile von Shopify Liquid ist, dass Sie die Speicherdaten nicht benötigen (dh information über den Shop), um eine Website zu erstellen oder zu ändern. Dies liegt daran, dass wenn ein Benutzer zum ersten Mal a Shopify speichern, alles drinformatIon wird auf dem gespeichert Shopify Server, was bedeutet, dass Sie Liquid verwenden können, um die benötigten Daten einfach abzurufen. 

Wenn Sie jedoch kein Webentwickler sind, sondern nur ein Ladenbesitzer, der Ihren Laden aufpeppen möchte, gibt es auch Vorteile für Sie:

• Einfach zu erlernen und zu verwenden: Liquid hat eine einfache Syntax und ist leicht verständlich, was es für Entwickler und Nicht-Entwickler zugänglich macht.
• Dynamischer Inhalt: Liquid ermöglicht die dynamische Erstellung von Inhalten
• Anpassbar: Mit Liquid können Sie benutzerdefinierte Vorlagen und Themen erstellen, die Ihnen die vollständige Kontrolle über das Erscheinungsbild Ihres E-Commerce-Shops geben.
• Verbesserte Leistung: Liquid-Vorlagen werden kompiliert und zwischengespeichert, was zu einer Verbesserung führt Leistung und Geschwindigkeit der Website im Vergleich zu anderen Template-Engines.
• Große Gemeinschaft: Shopify verfügt über eine große Benutzergemeinschaft, die Zugang zu einer Fülle von Wissen und Unterstützung bietet und das Finden von Lösungen für häufig auftretende Probleme im Zusammenhang mit Flüssigkeiten erleichtert.

Voraussetzungen:

Was brauchen Sie also, um mit der Verwendung zu beginnen? Shopify Flüssig?

Wenn Sie bereits eine haben Shopify speichern, Shopify Flüssigkeit steht Ihnen kostenlos zur Verfügung. Wir werden unten besprechen, wie Sie Liquid finden können. Aber alles, was Sie jetzt wissen müssen, ist, dass jede Website erstellt wurde Shopify wird mit Liquid erstellt, sodass Sie mit der manuellen Bearbeitung dieses Codes beginnen können, sobald Sie eine Site erstellt haben.

Wenn Sie jedoch keine haben Shopify store, müssen Sie eine erstellen, um mit Liquid herumzuspielen. 

1. Gehen Sie zuerst zu Shopify und Wählen Sie einen Plan aus. Geben Sie Ihre Daten ein und erstellen Sie Ihr Konto.
2. Von deiner Shopify Administrator, klicken Sie auf Themen. Shopify stellt automatisch ein Standardthema bereit. Sie können dies so belassen oder ein anderes Thema auswählen, um damit zu beginnen.
3. Shopify hat eine Checkliste, die Sie durchgehen können, um Ihren Shop zu vervollständigen. Sie sollten alle Grundlagen erledigen, z. B. Produktseiten hinzufügen, Ihre Storefront entwerfen usw.

Nachdem Sie nun das Grundgerüst Ihres Online-Shops haben, können Sie diese Daten aus dem abrufen Shopify server und passen Sie ihn mit Liquid an (mehr dazu weiter unten). 

Sie benötigen zwar keine Programmiererfahrung, um mit der Verwendung von Liquid zu beginnen, aber die Vertrautheit mit den grundlegenden Programmierprinzipien wird Ihre Reise erleichtern. Aber zum größten Teil finden Sie umfangreiche Selbsthilfedokumentationen und Tutorials auf der Shopify Entwicklerportal. Hier finden Sie einen ganzen Abschnitt, der dem gewidmet ist Flüssige Grundlagen. 

Es ist ratsam, dass Sie einige Zeit damit verbringen, diese Leitfäden durchzusehen, bevor Sie beginnen. Während Liquid ein leistungsstarkes Anpassungstool ist, hat es auch das Potenzial, Ihre Website zu beschädigen, wenn Sie nicht wissen, was Sie tun!

Anfangen mit Shopify Flüssigkeit

Lassen Sie uns also mit dem, was wir bisher gelernt haben, sehen, wie wir unsere bearbeiten können Shopify Thema mit Liquid. 

Gehen Sie folgendermaßen vor, um auf Liquid zuzugreifen:

1. Duplizieren Sie Ihr Thema: Um größere Pannen zu vermeiden, ist es wise um eine Kopie Ihres Designs zu erstellen, bevor Sie beginnen. Auf diese Weise, wenn Sie irgendwelche Fehler machen, Ihr Original Shopify Thema bleibt erhalten. Navigieren Sie dazu zum Themenbereich auf der rechten Seite Ihres Shopify Armaturenbrett. Wählen Sie das Thema aus, das Sie bearbeiten möchten, und klicken Sie auf Aktionen, um das Dropdown-Menü anzuzeigen. Wählen Sie nun Duplikat aus.
2. Benennen Sie Ihr Duplikat um: Wenn Sie ein Thema duplizieren, wird es in Ihrer Themenliste angezeigt. Sie können Ihre Kopie umbenennen, damit Sie das Original und das Duplikat nicht verwechseln. Klicken Sie einfach erneut auf die Schaltfläche „Aktionen“ und klicken Sie im Dropdown-Menü auf „Umbenennen“. 
3. Einstieg in den Code-Editor: Wählen Sie nun erneut Aktionen für Ihr Duplikat aus und wählen Sie Code bearbeiten. Sie werden zur vollständigen Liste der Codes in Ihrem Design weitergeleitet. Sehen Sie sich die Ordner auf der rechten Seite an. Sie sollten eine Reihe von Ordnern sehen, die verschiedene Aspekte Ihres Themas enthalten, z. B. das Layout, Vorlagen, Abschnitte usw. Öffnen Sie den Vorlagenordner. 
4. Codierung in Flüssigkeit: Im Vorlagenordner sehen Sie eine Liste von Dateien mit dem Dateityp .liquid. Sie können auch eine neue Liquid-Dateivorlage erstellen, indem Sie die Plus-Schaltfläche im Vorlagenordner auswählen. Sie werden gefragt, welche Vorlage Sie erstellen möchten, dh Seite, Abschnitt, Blog usw., und die Datei benennen. Um eine Datei zu bearbeiten, doppelklicken Sie auf eine Vorlagendatei und sie wird rechts im Code-Editor geöffnet.

In jeder Liquid-Datei sehen Sie ein HTML-Skript. Dies ist das Skelett Ihrer Website. Sie können die Liquid-Sprache in diesem HTML zum Abrufen verwendenformatIon aus dem Shopify Server. Solange Sie die korrekte Liquid-Syntax verwenden, dh die Klammern, sollte Ihr Inhalt entsprechend wiedergegeben werden.

Lassen Sie uns zur Veranschaulichung ein einfaches Beispiel durchgehen:

Ändern der Bildgröße mit Shopify Flüssigkeit

Bilder sind ein wesentlicher Aspekt der meisten Shopify Shops. Aber wenn Sie mehrere Bilder verwenden, kann es ein Alptraum sein, sie alle richtig zu dimensionieren, damit sie ordentlich erscheinen. Um dies zu beheben, betrachten wir die img_url Filter. Wie andere Filter ist img_url darauf ausgelegt, den Inhalt zu ändern, den es aus der Shopify Server. Sie können diesen Filter verwenden, um die Größe, den Maßstab und die Größe Ihrer Bilder zu ändern. format, und Zuschneiden. 

Dies ist eine hervorragende Technik, da der Filter ein vorhandenes Bild nur vorübergehend modifiziert; Es erstellt nicht jedes Mal ein neues Bild, um Ihre Vorlage zu rendern, sodass die Ladezeit Ihrer Website nicht verlangsamt wird. 

Wie ändern wir also die Größe eines Bildes?

Zuerst müssen wir entscheiden, wo wir die Änderungen anwenden möchten. Sie können die anwenden img_url-Filter auf jedes Objekt mit einer Bildeigenschaft, einschließlich:

• Produkte
• Produktvarianten
• Werbebuchungen
• Kollektionen
• Beiträge

Sobald Sie sich entschieden haben, welche Bilder Sie bearbeiten möchten, müssen Sie wissen, welche Eigenschaft Sie haben wish zu zielen. Um herauszufinden, welche Eigenschaften ein Bildattribut haben, schauen Sie sich an Shopify's Liste der Objekte und ihre Eigenschaften. 

In diesem Beispiel zielen wir auf die Bilder unserer Blog-Artikel ab.

Hier ist der grundlegende Code:

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

Nervenzusammenbruch:

• Blog ist das Objekt, das wir suchen, und wir wollen die Immobilie Artikel, da diese alle Artikel unseres Blogs enthält. Insbesondere möchten wir die Bilder in unseren Blogartikeln ändern, also zielen wir auf die Image Eigenschaft innerhalb von Artikeln.
• Jetzt wenden wir den Filter an img_url. Wenn wir dies so belassen würden, wie es ist, würde es einfach ein Bild anzeigen, das von der URL abgerufen wird, die von bereitgestellt wird Shopify Server. Wir werden jedoch auch einen zusätzlichen Parameter angeben: die Bildgröße '100×100' (beachten Sie, dass Shopify verwendet Pixel, um Größenbereiche zu bestimmen).
• Schließlich umschließen wir unseren Code mit der Liquid-Doppelklammer-Syntax, die für Filter verwendet wird. 

Und wir sind fertig! Dies sollte die Ausgabe für alle unsere Blog-Bilder zurückgeben, sodass sie eine Größe von 100 x 100 Pixel haben.

Tipps und Imbissbuden

Ich hoffe, dass Sie nach dem Lesen dieses Artikels nun eine Antwort auf die Frage haben: Was ist Shopify Flüssig?

Wie Sie sehen können, Shopify Flüssigkeit ist ein vielseitiges Werkzeug, das verschiedene Funktionen beim Entwerfen oder Bearbeiten erfüllen kann Shopify Vorlage. Es gibt zwar eine gewisse Lernkurve, aber sobald Sie sich daran gewöhnt haben, ist es recht einfach zu bedienen – insbesondere im Vergleich zu anderen komplexeren Programmiersprachen wie Javascript.

Wenn Sie daran interessiert sind, zu verwenden Shopify Liquid möchten wir Ihnen raten, diese Tipps zu befolgen, um das Beste daraus zu machen:

1. Beginnen Sie mit einem soliden Verständnis von Liquid: Ein starkes Verständnis von Liquid ermöglicht es Ihnen, komplexere benutzerdefinierte Themen zu erstellen. Mit dieser Grundlage können neue Benutzer das volle Potenzial von ausschöpfen Shopify um einzigartige und ansprechende Online-Shops zu erstellen.
2. Testen Sie Ihr Thema gründlich: Das Testen ist unerlässlich, um sicherzustellen, dass Ihr benutzerdefiniertes Design in verschiedenen Browsern und Geräten wie erwartet funktioniert. Indem Sie Kompatibilitätsprobleme frühzeitig erkennen, vermeiden Sie potenzielle Frustrationen für Ihre Kunden.
3. Verwenden Sie verfügbare Tools und Ressourcen: Shopify hat eine Fülle von Ressourcen zur Verfügung, um Theme-Entwicklern zu helfen, also nutze sie! Wenn es verwendet wird, kann dies den Entwicklungsprozess schneller und einfacher machen.

Mit all diesen Punkten kann man das meiner Meinung nach mit Sicherheit sagen Shopify Liquid kann eine unterhaltsame und effektive Möglichkeit sein, Inhalte zu aktualisieren oder ansprechender und dynamischer zu gestalten Shopify zu speichern. 

Das ist alles von mir; zu dir hinüber. Berichtet mir von euren Erfahrungen mit Shopify Liquid in den Kommentaren unten!