Theme Blocks = la nouvelle HYPERMODULARITÉ de Shopify !

Shopify avait présenté les flex sections avec une démonstration spectaculaire : un marchand déplaçant ses images à la souris, élargissant ses colonnes en direct — un constructeur de pages intégré au thème. On n'en est pas encore là. Mais deux nouveautés arrivées depuis permettent déjà beaucoup, et l'une d'elles change la façon dont un thème se construit.

Un rappel, avant d'aller plus loin

Une page se découpe en sections — ces bandes horizontales qui composent l'écran : une bannière, un carrousel de produits, un bloc texte et image. À l'intérieur, des blocs : dans une bannière, un bloc titre, un bloc texte, un bloc bouton. Chacun a ses réglages, se déplace, s'ajoute ou se supprime. C'est ce que les thèmes 2.0 avaient apporté.

Les réglages de style

Première nouveauté, plus technique que visible : de nouveaux types de champs dans les sections. Là où l'on disposait de champs texte ou URL, on peut désormais exposer des espacements précis — haut, bas, gauche, droite — et l'alignement des éléments entre eux. C'est encore en préversion développeur.

Les theme blocks, et pourquoi ils changent la donne

Un bloc était jusqu'ici défini au niveau de la section. Un theme block se définit au niveau du thème, et devient appelable depuis n'importe quelle section.

On crée un bloc bouton, une fois, et c'est ce même bouton qu'on appelle partout. Côté code, cela revient à ce que les designers appellent un système de design : un endroit unique où vivent les composants réutilisés sur tout le site.

Pour le marchand, ce changement d'architecture ne se voit pas. Ce qui se voit, c'est sa conséquence : on n'est plus limité à un seul niveau de blocs, mais jusqu'à huit. Des blocs dans des blocs.

Ce que l'imbrication permet concrètement

Une section « constructeur » devient possible. On ajoute un bloc ligne ; dans cette ligne, une, deux ou quatre colonnes ; dans chaque colonne, les composants voulus — une image, un texte, un bouton. La ligne suivante n'aura qu'une colonne, avec une grande vidéo et un titre par-dessus.

Le marchand construit alors ses pages de contenu, ses articles et ses pages d'atterrissage sans redemander une section sur mesure à chaque fois.

Le gain sur les tests A/B

C'est peut-être l'usage le plus intéressant. Tester deux versions d'une fiche produit imposait jusqu'ici soit d'injecter du JavaScript par-dessus la page, soit de recoder, soit de passer par un constructeur tiers. Il devient possible de dupliquer le gabarit et de modifier ce qu'on veut.

Et surtout, une fois le test gagné, la version retenue est déjà propre : rien à réimplémenter derrière.

Le compromis à trouver, et il est réel

Plus on donne de liberté, plus le design finit par s'éloigner de ce qui avait été validé. La ligne de partage retenue : la disposition au marchand, le style au code.

Positionner les éléments, composer une mise en page — oui. Choisir n'importe quelle couleur de bouton — non : on choisit parmi les deux ou trois boutons dessinés dans les maquettes, et l'on joue sur la hiérarchie visuelle plutôt que sur la teinte. Même chose pour les espacements, proposés en « léger, moyen, grand » avec les valeurs réelles de la charte, plutôt qu'au pixel près.

Un outil interne poussé jusqu'aux espacements au pixel a d'ailleurs été écarté pour cette raison : impressionnant, mais trop d'options pour que quiconque sache laquelle choisir. Un marchand veut gérer ses contenus, pas arbitrer des marges.

Une limite subsiste : l'espacement appartient au bloc. Deux blocs voisins réglés différemment produiront une dissonance. C'est le défaut de tous les constructeurs — mais ici, il reste possible de le cadrer par le code.

Contenus dynamiques et disponibilité

Les métachamps et les métaobjets s'utilisent dans ces blocs comme ailleurs : une information centralisée à un seul endroit, appelée par tous les gabarits qui en ont besoin — y compris pour des images ou des vidéos.

Les theme blocks sont disponibles dès aujourd'hui, sous réserve que votre thème les implémente. Les réglages de style, eux, restent en préversion.

Le bénéfice le plus immédiat est ailleurs, et souvent demandé : des pages d'atterrissage qui ressemblent enfin au reste du site. Cliquer sur une publicité et tomber sur une page à la typographie différente crée une dissonance de marque. Construites à partir des blocs du thème, ces pages respectent la charte par construction.