Liquid pour créer des thèmes et applications Shopify

Vous voulez développer des applications Shopify pour les vendre sur le Shopify Store ? Vous voulez apprendre à développer vos thèmes Shopify ? Le développement Liquid vous intéresse ?

Alors la réponse est d’apprendre le langage Liquid et vous êtes au bon endroit !

Liquid est un langage de balisage (templating language) conçu et développé par Shopify. C’est la colonne vertebral de tous les thèmes Shopify. Ce langage est utilisé pour pouvoir utiliser les données contenues en back office dans des fichiers .liquid qui ressemblent à du HTML.

L’année 2021 aura été l’année du e-commerce et Shopify en a énormément profité. Avec ce gain en popularité, une forte demande de développeurs Liquid a vu le jour.

Apprendre le développement Shopify Liquid est donc une excellente idée en 2023.

Découvrons ensemble les concepts essentiels pour comprendre Shopify Liquid.

Vous n’avez pas encore de compte Shopify ? Vous pouvez utiliser mon lien d’affiliation Shopify pour soutenir ce blog !

Liquid est-il est langage de programmation ?

Liquid est un langage de balisage comme HTML. Cependant, Liquid offre aussi une syntaxe et des concepts similaires aux langages de programmation traditionnels. On retrouve donc des variables ou des structures de contrôle comme on peut en observer dans un langage de programmation comme PHP.

Pourquoi Shopify utilise Liquid ?

Shopify utilise Liquid comme un pont entre le stockage de données Shopify (Shopify store) et le fichier html. Liquid permet donc d’exploiter des variables directement dans un template Shopify de manière structurée, simple et facile à lire.

Comment devenir développeur Shopify ?

Le développement de thèmes Shopify est similaire au développement de thèmes WordPress sauf que Shopify utilise Liquid plutôt que le PHP.

Le développement d’applications Shopify est un peu plus complexe. Vous pouvez utiliser des langages comme Python, JavaScript, PHP, ou encore Ruby.

Vous aurez besoin de :

• Connaissances de base en HTML/CSS/JS
• Connaissances en un langage back-end (pour les application Shopify)
• Connaissances en GraphQL (pour les application Shopify)
• Un compte Shopify Developer

Liquid est-il facile à apprendre ?

Liquid a été conçu par défaut pour être très facile d’utilisation. En effet, ce langage de balisage est destiné aux designers qui doivent construire des templates Shopify sans qu’ils aient besoin d’avoir connaissance du contenu en niveau du back-end.

Comment ouvrir un fichier Liquid ?

Pour ouvrir un fichier .liquid, utilisez votre éditeur de texte ou IDE préféré. Vous pouvez aussi utiliser l’éditeur de thème Shopify qui se trouve dans votre panneau d’administrateur Shopify : “Boutique en ligne”, “Thème” et “Personnaliser”.

💡 Note : On reconnaît un fichier liquid grâce à son extension extension .liquid. Le contenu du fichier .liquid est similaire à du HTML avec des éléments de logique en plus.

Comment commenter du code en Liquid ?

Pour commenter du code en Liquid, mettez le code que vous voulez commenter entre les tags comment et endcomment. Ainsi, le code Liquid Code {%comment%} commenté {% endcomment %} en Liquid générera le code HTML Code en Liquid.

Comment debugger un template Liquid ?

Pour débugger un theme Liquid, Shopify recommande d’utiliser son extension Chrome “Shopify Theme Inspector”. Une fois installée, vous trouverez un nouvel onglet “Shopify” dans votre console de développeur Google Chrome.

Téléchargez l’extension Chrome “Shopify Theme Inspector”

Cheat sheet Liquid

Shopify fournit différents outils pour créer des templates en Liquid. Parmi ces outils figurent les tags, les filtres et les objets. Pour développer efficacement en Liquid il est important de les connaître, ou du moins d’y avoir accès rapidement.

C’est pour cette raison que j’ai rassemblé ces tags, filtres et objets sur cette page.

Les Tags

En Liquid, les tags permettent d’utiliser du code comme des structures de contrôle, des opérations ou encore importer des fichiers.

{% and %}
{% assign %}
{% break %}
{% capture %}
{% case %}
{% comment %}
{% continue %}
{% cycle %}
{% decrement %}
{% echo %}
{% else %}
{% elsif %}
{% for %}
{% form %}
{% if %}
{% include %}
{% increment %}
{% liquid %}
{% or %}
{% paginate %}
{% raw %}
{% render %}
{% section %}
{% style %}
{% tablerow %}
{% unless %}
{% when %}

Les Filtres

En Liquid, les filtres permettent d’effectuer des opérations sur des objets ou des entités comme des strings, des nombres ou des médias.

Pour appliquer un filtre à un objet, on utilise un | :

{{ objet | filtre }}

Les filtres généraux

Ces filtres sont utilisables dans plusieurs cas et sur plusieurs types d’objets.

date
default
default_errors
default_pagination
format_address
highlight
highlight_active
json
placeholder_svg_tag
time_tag
weight_with_unit

Les filtres couleurs

Ces tags permettent d’obtenir des informations à partir de code couleurs en string.

Par exemple :

{{ #101010 | color_to_rgb }}

Donnera :

rgb(16, 16, 16)

Liste des filtres pour les couleurs :

brightness_difference
color_brightness
color_contrast
color_darken
color_desaturate
color_difference
color_extract
color_lighten
color_mix
color_modify
color_saturate
color_to_rgb
color_to_hsl
color_to_hex

Les Filtres police de caractère (font)

Pour toutes les opérations sur les polices de caractère (fonts).

font_face
font_modify
font_url

Les Filtres HTML

Les filtres HTML permettent de générer des balises HTML.

currency_selector
img_tag
payment_button
payment_type_svg_tag
script_tag
stylesheet_tag

Les Filtres Média (image et vidéo)

Ces filtres vous permettent de générer des liens vers différentes ressources images et vidéo.

external_video_tag
external_video_url
img_tag
img_url
media_tag
model_viewer_tag
video_tag

Les Filtres Mathématiques

Les filtres mathématiques vous permettront d’effectuer des opérations mathématiques sur des nombres ou strings de nombres. Leur ordre d’exécution est de gauche à droite.

abs
at_least
at_most
ceil
divided_by
floor
minus
modulo
plus
round
times

Les filtres URLs

Les filtres URLs peuvent être utilisés pour obtenir facilement les liens des différentes ressources sur le CDN (Content Delivery Network) de Shopify.

asset_img_url
asset_url
file_img_url
file_url
customer_login_link
global_asset_url
img_url
link_to
link_to_vendor
link_to_type
link_to_tag
link_to_add_tag
link_to_remove_tag
payment_type_img_url
shopify_asset_url
sort_by
url_for_type
url_for_vendor
within

Les Filtres String

Pour manipuler les chaînes de caractère, Shopify met a votre disposition de nombreux filtres dans vos fichiers .liquid.

apprend
camelcase
capitalize
downcase
escape
handleize
hmac_sha1
hmac_sha256
md5
newline_to_br
pluralize
prepend
remove
remove_first
replace
replace_first
slice
split
strip
lstrip
reverse
rstrip
sha1
sha256
strip_html
strip_newlines
truncate
truncatewords
upcase
url_encode
url_escape
url_param_escape

Les filtres tableaux array

En Liquid il existe des tags qui permettent d’éxecuter des opérations sur les Arrays.

concat
json
first
index
last
map
reverse
size
sort
uniq
where

Les Filtres Montant et Devise

En fonction de la langue dans laquelle est votre boutique Shopify, vous voudrez utiliser certaines opération sur la représentation des prix. Et c’est à quoi les filtres ci-dessous servent.

money
money_with_currency
money_without trailing_zeros
money_without_currency

Les Objets en Liquid

Dans Shopify on retrouve plusieurs types d’objets : les objets globaux accessibles partout et tous les autres.

Les Objets Globaux

Un objet global est accessible partout dans les fichiers .liquid de votre thème ou application. Ces variables ne sont donc pas dépendantes du contexte ou des pages dans lesquelles elles se trouvent.

Voici la liste des objets globaux en liquid :

all_products
articles
blog
canonical_url
collections
current_page
handle
images
linklists
page_description
page_title
pages
request
settings

Les autres objets

En Liquid, certains objets ne sont accessibles que dans certaines pages de Shopify. Les objets de la liste ci-dessous ont des propriétés plus détaillées. Par exemple, l’objet address a une propriété name, accessible comme ça : address.name.

address
article
block
blog
cart
checkout
collection
comment
content_for_[header/index/layout]
country_option_tags
currency
current_tags
customer_address
customer
discount
discount_allocation
discount_application
font
forloop
form
fulfillment
gift_card
image
line_item
link
linklist
metafield
order
page
paginate
product
product_option
recommendations
request
routes
search
script
section
shipping_method
shop
shop_locale
tablerow
tax_line
template
theme
transaction
variant

Aller plus loin avec Shopify et Liquid

Nous avons vu ensemble pourquoi apprendre Liquid est une opportunité à ne pas rater en 2023 ! Si vous débutez en code, Liquid peut être la solution pour vite décrocher vos premiers contrat.

Mais pour ça il vous faut une stratégie.

Et ça tombe bien, j’ai compilé 9 concepts pour apprendre à coder rapidement et efficacement. Laissez votre email dans l’encart ci-dessous pour recevoir gratuitement votre ebook !