Créez un thème Shopify avec le moteur Liquid

Auteur: Peter Berry

Date De Création: 14 Juillet 2021

Date De Mise À Jour: 13 Peut 2024

Créez un thème Shopify avec le moteur Liquid - Créatif

Contenu

Fichiers et dossiers de thème
Mappage d'URL sur des modèles
Liquide: les bases
Comprendre product.liquid
Production
Logique
Filtres
Et après?
Autres ressources et inspiration

Au cours des dernières semaines, j'ai construit le thème Shopify pour Viewport Industries, la société Elliot Jay Stocks et moi avons formé l'année dernière. Nous avons choisi Shopify pour plusieurs raisons:

Cela nous permet de vendre des produits numériques et physiques
Il est entièrement hébergé, ce qui signifie qu’aucun serveur n’est à craindre
Il prend en charge un certain nombre de passerelles de paiement qui s'intègrent parfaitement à notre banque
Il est basé sur un thème, ce qui signifie que nous pouvons facilement réutiliser les codes HTML, CSS et JavaScript de notre site existant

Shopify utilise un moteur de modèle appelé Liquid pour générer des données de votre boutique dans vos modèles. Le liquide est peut-être le seul ingrédient d'un thème Shopify que vous n'avez jamais utilisé auparavant et il peut être décevant. Mais la bonne nouvelle est que ce n’est vraiment pas si difficile de commencer.

Si vous avez déjà utilisé Smarty, ERB ou Twig, ce qui suit vous sera familier. Sinon, ne vous inquiétez pas: il s’agit simplement d’apprendre quelques règles simples. Une fois que vous avez ajouté les compétences Liquid à votre boîte à outils de développement Web, vous pourrez commencer à créer des thèmes pour vos clients en un rien de temps.

Fichiers et dossiers de thème

Les thèmes Shopify ne sont rien de plus qu'un certain nombre de fichiers (fichiers HTML avec une extension .liquid, CSS, JS, images, etc.) et des dossiers. Les thèmes peuvent apparaître et fonctionner comme vous le souhaitez: il n'y a vraiment aucune restriction. Voici la structure de base d'un thème:

les atouts
config
mises en page
theme.liquid
extraits
modèles
404.liquide
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

Avec ces fichiers, vous pouvez créer les thèmes les plus élémentaires. Bien sûr, vous voudrez probablement ajouter du CSS, du JavaScript et quelques images. Vous les mettriez dans le dossier des éléments. (Il est à noter que vous n'êtes actuellement pas autorisé à utiliser les sous-dossiers dans votre dossier d'éléments.)

Pour en savoir plus sur le fonctionnement des thèmes et pour en savoir plus sur les dossiers de configuration et d'extraits de code, je vous recommande de lire Thème à partir de zéro et Paramètres du thème sur le wiki Shopify.

Vous pouvez également vous inscrire au programme gratuit Partner, créer une boutique de test et inspecter l'un des nombreux thèmes gratuits disponibles dans la zone d'administration de votre boutique de test - il vous suffit d'aller dans l'éditeur de thèmes situé dans le menu Thèmes.

Mappage d'URL sur des modèles

Les thèmes Shopify fonctionnent en mappant l'URL actuelle à un modèle spécifique. Par exemple, si nous visualisons un produit qui a l'URL suivante ...

http://www.unitedpixelworkers.com/products/indianapolis

... alors Shopify saura utiliser votre product.liquid modèle. C’est pour cette raison que vous ne devez utiliser que les noms de fichiers répertoriés ci-dessus pour vos modèles.

En plus de Shopify sachant quel modèle afficher par rapport à l'URL actuelle, il met à notre disposition un certain nombre de variables très spécifiques. Celles-ci sont appelées «variables de modèle» et nous permettent d’afficher des données dans nos modèles.

Par exemple, dans notre modèle product.liquid, nous avons accès au bien nommé produit variable. Cela signifie que nous pouvons afficher le nom, la description, le prix et la disponibilité de notre produit dans notre modèle. Nous utiliserons la combinaison de variables Liquid et de modèle pour renseigner nos modèles avec des données relatives à nos produits.

Pour obtenir la liste complète des variables de modèle disponibles, consultez la feuille de triche Shopify de Mark Dunkley.

Liquide: les bases

Liquid est là pour nous faciliter la vie en tant que concepteurs de thèmes. L'un des principaux moyens d'y parvenir consiste à utiliser des mises en page. Les mises en page sont idéales pour inclure des éléments de page courants tels qu'un en-tête, une navigation principale, un pied de page, etc.

Dans la structure de mes dossiers ci-dessus, vous remarquerez un fichier appelé theme.liquid dans le dossier des mises en page. Vous pouvez considérer theme.liquid comme notre modèle principal. Tous nos autres modèles, tels que product.liquid, sont rendus dans ce modèle principal. Vous pouvez avoir plus d'une mise en page si vous le souhaitez, mais celle par défaut doit toujours être appelée theme.liquid.

Je n’ai pas vu le fichier theme.liquid de United Pixelworkers, mais vous pouvez l’imaginer contenant le balisage pour les zones encadrées en rouge ci-dessous.

Voici à quoi peut ressembler une mise en page theme.liquid de base:

! DOCTYPE html>
html>
tête>
{{content_for_header}}
title> Le titre de la page va ici / titre>
/ tête>
corps>
{{content_for_layout}}
/ corps>
/ html>

Vous remarquerez deux phrases entourées d'accolades doubles: {{content_for_header}} et {{content_for_layout}}. Ce sont nos premiers exemples de Liquid en action.

Shopify utilise souvent {{content_for_header}} pour ajouter des fichiers spécifiques à la section head> d'un document: par exemple, en ajoutant un code de suivi. {{content_for_layout}} est l'endroit où le contenu de notre modèle de mappage d'URL apparaîtra. Par exemple, si nous visualisons une page de produit, notre fichier product.liquid remplacera {{content_for_layout}} dans notre fichier de mise en page.

Comprendre product.liquid

Maintenant que nous avons passé en revue les bases des mises en page, il est temps de regarder un modèle.Les magasins sont tout au sujet des produits, alors regardons product.liquid.

Voici un exemple très simple mais fonctionnel de modèle product.liquid.

h2> {{product.title}} / h2>
{{ Description du produit }}
{% if product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% pour la variante dans product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ sélectionnez>
input type = "submit" name = "add" value = "Ajouter au panier" id = "achat" />
/ formulaire>
{% autre %}
p> Ce produit n'est pas disponible / p>
{% fin si %}

Il existe un certain nombre de concepts clés de Liquid à l'œuvre ici. Examinons-les dans l’ordre.

Production

La première ligne de code contient la phrase {{product.title}}. Une fois rendu, cela affichera le titre du produit, qui, comme vous le savez maintenant, est déterminé par l'URL. Dans l'exemple de United Pixelworkers ci-dessous, le titre du produit est simplement «Indianapolis».

Liquid utilise le format de syntaxe dot. Dans ce cas, {{product.title}} correspond à la variable de modèle de produit et à son attribut title. Nous pouvons sortir la description du produit de la même manière en utilisant {{ Description du produit }}.

Ceci est connu en termes liquides comme production. Toute la sortie est indiquée par des doubles accolades, comme suit: {{your_output}}.

Logique

Sur la ligne suivante du code, vous remarquerez une instruction entre accolades suivies d'un%: dans ce cas, {% if product.available%}. C'est un autre concept important dans Liquid connu sous le nom de logique. Plus bas, vous remarquerez {% else%} et enfin les instructions {% endif%}.

Cette si déclaration nous permet de dicter ce que notre modèle affiche, en fonction d'une ou plusieurs conditions: dans ce cas, si notre produit est disponible ou non. En effet, cela signifie: «si notre produit est disponible, montrez les informations qui s'y rapportent; sinon afficher un message informant l'utilisateur qu'il est en rupture de stock ».

Toutes les instructions logiques de Liquid utilisent la notation en pourcentage entre accolades, c'est-à-dire {% if…%}. N'oubliez pas de fermer vos déclarations de manière appropriée, sinon vous rencontrerez des problèmes. Par example:

{% if product.available%}
Afficher le bouton Ajouter au panier ici
{% autre %}
Afficher un message indiquant la prochaine disponibilité du produit
{% fin si %}

Filtres

Liquid nous permet de manipuler notre production de plusieurs manières. L'une d'elles consiste à utiliser des filtres. Le contenu qui entre dans le filtre sortira à l'autre extrémité modifié d'une manière spécifique.

En regardant l'exemple product.liquid ci-dessus, vous remarquerez { de l'argent }. Une variante est un terme utilisé pour décrire une variante d'un produit: par exemple, différentes couleurs et tailles. Ce qui est intéressant ici, c'est que nous utilisons un filtre pour modifier le prix de sortie - dans ce cas, en utilisant le filtre monétaire. Cela entraînera l'ajout du symbole de devise de la boutique à l'avant du prix.

Les autres filtres incluent strip_html, qui supprimera toutes les balises HTML d'un morceau de texte donné et ucase, qui le convertira en majuscules.

Vous pouvez également joindre des filtres ensemble. Par example:

{article.content}

Dans cet exemple, nous prenons l'attribut content de la variable de modèle d'article et le passons au filtre strip_html et enfin au filtre tronqué. Vous remarquerez que le filtre tronqué nous permet de spécifier la durée souhaitée de la sortie finale: dans ce cas, 20 caractères.

Les filtres nous permettent également de créer rapidement des éléments de script et d'image dans des modèles. Voici un moyen très rapide d'utiliser un filtre pour générer une image avec une balise alt associée:

{asset_url}

L'utilisation de ceci dans notre thème Shopify entraînera le rendu de l'élément img suivant dans notre modèle:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Logo du site" />

le asset_url Le filtre est très utile car il renvoie le chemin complet vers le thème actuel les atouts dossier. L'utilisation de ce filtre vous permet d'appliquer votre thème à plusieurs boutiques sans avoir à vous soucier des chemins.

Et après?

Espérons que ces quelques exemples vous ont montré que Liquid n’est pas si compliqué. Bien sûr, vous pouvez en faire beaucoup plus, mais en maîtrisant la sortie, la logique et les filtres, vous êtes sur la bonne voie pour comprendre la plupart de ce dont vous aurez besoin pour créer un thème Shopify.