Qu’est ce qu' Shopify Liquide? Un aperçu rapide des bases

4.4 millions les sites Web de commerce électronique sont construits à l'aide de Shopify plateforme. C'est la plate-forme de commerce électronique tout-en-un qui a secoué le Web depuis ses débuts en 2006. Les commerçants choisissent cette plate-forme pour héberger leurs boutiques en ligne pour de nombreuses raisons, de la configuration facile des paiements aux outils de marketing intégrés et bien plus encore. 

Mais l'un des aspects critiques de Shopify est son constructeur de site intuitif avec des milliers de thèmes et Shopify intégrations d'applications au choix. 

Cependant, alors que le constructeur sans code vous permet de créer des sites Web époustouflants et uniques, il existe certaines limitations. Par exemple, lorsque vous commencez à créer votre boutique en ligne, vous devez choisir un thème qui définit la disposition et le niveau de contrôle que vous obtenez sur votre contenu. Même si vous sélectionnez un thème vide, c'est-à-dire sans contenu, il existe toujours une architecture de code sous-jacente qui prédéfinit l'organisation du contenu.

Mais il y a de bonnes nouvelles. Si vous souhaitez créer votre propre Shopify modèle pour votre site ou celui de quelqu'un d'autre, il y a Shopify Liquide.

Intéressé? Joignez-vous à moi alors que j'essaie de répondre à la question : Qu'est-ce que Shopify Liquide? Plongeons-nous !

Qu’est ce qu' Shopify Liquide?

Fait intéressant, Shopify Le liquide existe depuis Shopifysa création. Quand ShopifyLes créateurs de ont d'abord conçu la plate-forme, ils ont construit un projet open-source pour servir de langage de modèle pour tous Shopify site de NDN Collective modèles. 

Pour les non-initiés, le « langage de programmation open source » fait référence au code source d'un logiciel qui est librement accessible au public, permettant à quiconque d'utiliser, de modifier et de distribuer le code à n'importe quelle fin. 

Créé avec Ruby, Shopify Liquide sert essentiellement d'espace réservé pour que vous puissiez insérer des données dans un format prédéfini (plus d'informations ci-dessous).

Donc comment ça fonctionne?

Pour comprendre cela, vous devez d'abord savoir que les sites Web sont généralement statiques ou dynamiques. Les magasins statiques sont codés en dur pour afficher le contenu précisément tel qu'il est écrit, par exemple en HTML. En revanche, un site Web dynamique peut afficher un contenu différent en fonction de la manière dont l'utilisateur interagit avec lui. 

Supposons maintenant que vous ayez un site Web statique. le squelette de base du site est prédéfini, mais vous souhaitez rendre le contenu dynamique. C'est là qu'écrit Shopify Le liquide dans votre code HTML est pratique. Cela se prête comme espace réservé pour le contenu dynamique. 

Shopify Liquid agit comme intermédiaire entre votre magasin et Shopifyde, permettant à Liquid d'extraire des données de Shopifyet livrez-le à votre magasin. Liquid peut demander trois principaux types de données :

1. Objets
2. Tags
3. Filtre(s)

Ci-dessous, nous allons explorer tour à tour chaque type de données :

Objets liquides

Les objets sont similaires à une bibliothèque de fonctions ou de contenu ; à l'intérieur de chaque objet, il existe diverses propriétés. 

Si vous n'êtes pas familier avec le concept d'objets, voici un bref aperçu :

Un objet est un concept fondamental en programmation. Un objet se compose de deux composants : 

1. Propriétés qui définissent l'état de l'objet
2. Fonctions qui définissent le comportement de l'objet

Pour mieux illustrer comment cela fonctionne, nous utiliserons un exemple non lié au codage. Par exemple, une voiture. Ici, la voiture, c'est-à-dire l'objet, pourrait avoir des fonctions telles que « accélérer », « tourner » et « freiner ». En revanche, les propriétés pourraient être les « fenêtres », les « portes » de la voiture, etc. 

En termes simples, les objets sont un élément important notion de codage car ils aident à organiser des systèmes complexes en morceaux plus gérables.

Par exemple, disons que vous créez un personnalisé Shopify thème et souhaitez afficher un Titre du Blog dans votre modèle. Vous pouvez utiliser Liquid pour récupérer ces informations Shopifyet affichez-le quelque part sur la page. Dans cet exemple, voici le morceau de code Liquid que vous utiliseriez pour y parvenir :

{{Blog.title}} 

Décomposons cela:

• Ici, 'blog' est l'objet. 
• La propriété que nous voulons dans ce bibliothèque est marqué par 'titre. 
• Le '.' indique à Liquid comment ces deux bits de données sont liés. 
• Les doubles crochets sont la syntaxe liquide qui définit le {{contenu/sortie que vous voulez}} que vous voulez du Shopify serveur. 

Étiquettes liquides

Lors de l'utilisation Shopify Liquide, les balises ajoutent une logique au contenu que nous demandons au Shopify serveur pour aider à définir quand le contenu doit être visible sur la page. Par exemple, disons que nous voulons afficher un graphique particulier sur nos articles de blog festifs. C'est-à-dire que nous voulons que ce graphique n'apparaisse que lorsqu'une condition spécifique est remplie. 

Voici à quoi cela pourrait ressembler :

{% if blog.title == 'célébration' %}

**image HTML**

{% fin si %}

Cela peut sembler complexe, mais si on le décompose, c'est assez simple à comprendre :

• Les balises utilisent une syntaxe légèrement différente de celle des objets qui ressemblent à ceci  {%…%}.
• La première balise {% if blog.title == 'célébration' %} indique à Liquid quelle condition doit être remplie avant de demander du contenu au serveur.
• La condition que nous avons demandée est définie par un instruction "si". Si vous êtes familier avec le codage, vous saurez que les instructions « si » fonctionnent en comparant deux ou plusieurs éléments de données les uns aux autres. S'ils correspondent, il passera à la ligne suivante de notre code. Ici,  if blog.title == 'célébration,' nous demandons à Liquid de vérifier si le titre de notre blog contient le mot "célébration". Si c'est le cas, il descendra à la ligne suivante de notre code. Si ce n'est pas le cas, Liquid ne renverra aucun contenu.
• Dans cet exemple, si nous avons un titre de blog contenant le mot "célébration", Liquid extraira et affichera notre image HTML.
• Une fois cela fait, il passe à la ligne suivante {% fin si %}, qui termine notre programme.

Ceci n'est qu'un exemple de ce que vous pouvez faire avec les balises. Shopify Liquid a des balises pour :

• Contrôle lorsque le code est exécuté
• Répéter/itération (répéter) un bloc de code
• Présentoir certains balisages HTML
• Créer de nouvelles variables.

Filtres à liquide

Les filtres sont des morceaux de code qui changent ou modifient la sortie d'un objet. Par exemple, ils peuvent modifier la couleur, la police, la taille ou l'apparence des éléments du site Web. 

Mais, en plus de changer les aspects visibles de l'objet, ils peuvent exécuter des fonctions sur un objet. Par exemple, si vous souhaitez afficher les titres de votre blog en majuscules, un filtre peut vous aider à y parvenir sans modifier manuellement tous les titres de votre blog :

{{ blog.title | uppercase }}

• La syntaxe des filtres est {{…}}.
• Ici, la propriété d'objet que nous recherchons est 'Titre du Blog'.
• Le filtre que nous appliquons est majuscule.
• Le '|' sépare l'entrée et la sortie de notre code.

Désormais, lorsqu'un utilisateur regarde le titre de notre blog, il apparaît en majuscules.

Bénéfices de La Shopify Liquide

Supposons que vous soyez un concepteur ou un développeur de site. Dans ce cas, l'un des avantages les plus importants de Shopify Liquid est que vous n'avez pas besoin des données du magasin (c'est-à-dire des informations sur le magasin) pour créer ou modifier un site Web. En effet, lorsqu'un utilisateur crée pour la première fois un Shopify magasin, toutes les informations sont stockées sur le Shopify serveur, ce qui signifie que vous pouvez utiliser Liquid pour récupérer simplement les données dont vous avez besoin. 

Cependant, si vous n'êtes pas un développeur Web, mais plutôt un propriétaire de magasin qui cherche à embellir votre magasin, il y a aussi des avantages pour vous :

• Facile à apprendre et à utiliser: Liquid a une syntaxe simple et est facile à comprendre, ce qui le rend accessible aux développeurs et aux non-développeurs.
• Contenu dynamique: Liquid permet la création de contenu dynamique
• Personnalisable: Avec Liquid, vous pouvez créer des modèles et des thèmes personnalisés, vous donnant un contrôle total sur l'apparence de votre boutique de commerce électronique.
• Performance améliorée: Les modèles liquides sont compilés et mis en cache, améliorant ainsi performances et vitesse du site web par rapport aux autres moteurs de modèles.
• Grande communauté : Shopify a une grande communauté d'utilisateurs, offrant un accès à une mine de connaissances et d'assistance, facilitant la recherche de solutions aux problèmes courants liés à Liquid.

Exigences

Alors, de quoi avez-vous besoin pour commencer à utiliser Shopify Liquide?

Si vous avez déjà un Shopify Boutique, Shopify Liquid sera disponible pour vous d'utiliser gratuitement. Nous discuterons de la façon dont vous pouvez trouver Liquid ci-dessous. Mais tout ce que vous devez savoir pour l'instant, c'est que chaque site créé sur Shopify est construit avec Liquid, vous pouvez donc commencer à modifier manuellement ce code dès que vous avez créé un site.

Cependant, si vous n'avez pas de Shopify magasin, vous devrez en créer un pour commencer à jouer avec Liquid. 

1. Tout d'abord, dirigez-vous vers Shopify et sélectionner un forfait. Remplissez vos coordonnées et créez votre compte.
2. De ton Shopify admin, cliquez sur les thèmes. Shopify fournit automatiquement un thème par défaut. Vous pouvez le laisser tel quel ou choisir un autre thème pour commencer.
3. Shopify a une liste de contrôle que vous pouvez parcourir pour compléter votre magasin. Vous voudrez faire toutes les bases, telles que l'ajout de pages de produits, la conception de votre vitrine, etc.

Maintenant que vous avez le squelette de base de votre boutique en ligne, vous pouvez extraire ces données du Shopify serveur et personnalisez-le à l'aide de Liquid (plus d'informations à ce sujet ci-dessous). 

Bien que vous n'ayez besoin d'aucune expérience de codage pour commencer à utiliser Liquid, la connaissance des principes de codage de base facilitera votre voyage. Mais pour la plupart, vous pouvez trouver une documentation d'auto-assistance complète et des didacticiels sur le Shopify portail des développeurs. Vous trouverez ici une section entière consacrée à Bases liquides. 

Il est conseillé de passer un peu de temps à parcourir ces guides avant de commencer. Bien que Liquid soit un puissant outil de personnalisation, il a également le potentiel de casser votre site si vous ne savez pas ce que vous faites !

Débuter avec Shopify Liquide

Donc, en utilisant ce que nous avons appris jusqu'à présent, voyons comment nous pouvons éditer notre Shopify thème utilisant Liquid. 

Pour accéder à Liquid, suivez ces étapes :

1. Dupliquez votre thème : Pour éviter tout incident majeur, il est judicieux de faire une copie de votre thème avant de commencer. De cette façon, si vous faites des erreurs, votre original Shopify thème reste intact. Pour ce faire, accédez à la section des thèmes sur le côté droit de votre Shopify tableau de bord. Choisissez le thème que vous souhaitez modifier et cliquez sur les actions pour afficher le menu déroulant. Maintenant, sélectionnez dupliquer.
2. Renommez votre doublon : Lorsque vous dupliquez un thème, vous le voyez apparaître dans votre liste de thèmes. Vous pouvez renommer votre copie afin de ne pas confondre l'original et le duplicata. Cliquez à nouveau sur le bouton Actions et appuyez sur Renommer dans le menu déroulant. 
3. Entrer dans l'éditeur de code : Maintenant, sélectionnez à nouveau les actions sur votre duplicata et sélectionnez modifier le code. Vous serez dirigé vers la liste complète des codes de votre thème. Jetez un œil aux dossiers répertoriés sur votre droite. Vous devriez voir un tas de dossiers contenant différents aspects de votre thème, tels que la mise en page, les modèles, les sections, etc. Ouvrez le dossier des modèles. 
4. Codage en liquide : Dans le dossier des modèles, vous verrez une liste de fichiers avec le type de fichier .liquid. Vous pouvez également créer un nouveau modèle de fichier Liquid en sélectionnant le bouton plus dans le dossier du modèle. Il vous demandera quel modèle vous souhaitez créer, c'est-à-dire page, section, blog, etc., et de nommer le fichier. Pour modifier un fichier, double-cliquez sur un fichier de modèle et il s'ouvrira dans l'éditeur de code sur la droite.

Dans n'importe quel fichier Liquid, vous verrez un script HTML. C'est le squelette de votre site Web. Vous pouvez utiliser le langage Liquid à l'intérieur de ce code HTML pour récupérer des informations à partir du fichier Shopify serveur. Tant que vous utilisez la bonne syntaxe Liquid, c'est-à-dire les crochets, votre contenu devrait être rendu en conséquence.

Pour illustrer, examinons un exemple simple :

Redimensionner des images à l'aide de Shopify Liquide

Les images sont un aspect essentiel de la plupart Shopify magasins. Mais si vous utilisez plusieurs images, il peut être difficile de toutes les dimensionner correctement, afin qu'elles s'affichent parfaitement. Pour résoudre ce problème, nous examinons le img_url filtre. Comme d'autres filtres, img_url est conçu pour modifier le contenu qu'il extrait du Shopify serveur. Vous pouvez utiliser ce filtre pour modifier la taille, l'échelle, le format et le recadrage de vos images. 

C'est une excellente technique car le filtre ne modifie que temporairement une image existante ; il ne crée pas une nouvelle image à chaque fois pour afficher votre modèle, il ne ralentira donc pas le temps de chargement de votre site. 

Alors, comment redimensionner une image ?

Tout d'abord, nous devons décider où nous voulons appliquer les modifications. Vous pouvez appliquer le filtre img_url à tout objet avec une propriété d'image, y compris :

• Produits
• Variantes de produits
• Éléments de campagne
• Collections
• Articles

Une fois que vous avez décidé quelles images vous souhaitez modifier, vous devez savoir quelle propriété vous souhaitez cibler. Pour savoir quelles propriétés ont un attribut d'image, consultez Shopifyla liste des objets de et leurs propriétés. 

Dans cet exemple, nous allons cibler les images de nos articles de blog.

Voici le code de base :

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

Panne:

• Blog est l'objet que nous recherchons, et nous voulons la propriété sur notre blog, car il contient tous les articles de notre blog. Plus précisément, nous voulons changer les images dans nos articles de blog, donc nous ciblons le image propriété dans les articles.
• Maintenant, nous appliquons le filtre img_url. Si nous le laissions tel quel, il afficherait simplement une image tirée de l'URL fournie par le Shopify serveur. Cependant, nous allons également donner un paramètre supplémentaire : la taille de l'image '100×100' (noter que Shopify utilise des pixels pour déterminer les plages de taille).
• Enfin, nous encapsulons notre code en utilisant la syntaxe à double crochet Liquid, qui est utilisée pour les filtres. 

Et nous avons terminé ! Cela devrait renvoyer une sortie pour toutes nos images de blog, ce qui leur donne une taille de 100 par 100 pixels.

Conseils et plats à emporter

J'espère qu'après avoir lu cet article, vous avez maintenant une réponse à la question : Qu'est-ce que Shopify Liquide?

Comme vous pouvez le voir, Shopify Liquide est un outil polyvalent qui peut remplir diverses fonctions lors de la conception ou de l'édition d'un Shopify modèle. Bien qu'il y ait un peu de courbe d'apprentissage, une fois que vous vous y êtes habitué, il est raisonnablement facile à utiliser, en particulier par rapport à d'autres langages de codage plus complexes comme Javascript.

Si vous souhaitez utiliser Shopify Liquide, nous vous conseillons de suivre ces plats à emporter pour en tirer le meilleur parti :

1. Commencez par une solide compréhension de Liquid : Une solide compréhension de Liquid vous permettra de créer des thèmes personnalisés plus complexes. Grâce à cette base, les nouveaux utilisateurs peuvent exploiter tout le potentiel de Shopify pour créer des boutiques en ligne uniques et attrayantes.
2. Testez soigneusement votre thème : Les tests sont essentiels pour garantir que votre thème personnalisé fonctionne comme prévu sur différents navigateurs et appareils. En détectant rapidement les problèmes de compatibilité, vous évitez une frustration potentielle pour vos clients.
3. Utilisez les outils et ressources disponibles : Shopify a une multitude de ressources disponibles pour aider les développeurs de thèmes, alors utilisez-les ! Lorsqu'il est utilisé, cela peut rendre le processus de développement plus rapide et plus facile.

Avec tous ces points couverts, je pense qu'il est prudent de dire que Shopify Liquid peut être un moyen amusant et efficace de mettre à jour ou de créer un contenu plus engageant et dynamique. Shopify . 

C'est tout de moi; à vous. Faites-moi part de vos expériences avec Shopify Liquide dans les commentaires ci-dessous!