Éditeur de thème pour PrestaShop

Ce que c’est

L’éditeur de thème est le Studio de nos thèmes PrestaShop : un éditeur plein écran, ouvert depuis le back office, qui affiche un aperçu en direct de votre vraie boutique et vous laisse changer son aspect et sa structure. Couleurs, polices, l’en-tête, la fiche produit, le mini-panier, la newsletter, le pied de page, l’espacement entre zones. Il est livré avec nos thèmes (le premier est Aura) et ne se vend pas seul.

En quoi diffère-t-il des autres façons de personnaliser un thème ? Un constructeur de pages donne de la liberté sur une page, mais ajoute souvent sa propre couche de balisage, de scripts et de requêtes, et sait rarement ce qu’est une fiche produit ou un en-tête. Modifier les .tpl et le CSS à la main donne le contrôle, mais chaque changement demande un développeur, un vidage de cache et un risque à la prochaine mise à jour. Le Studio se place entre les deux : le thème déclare ce qui peut changer, avec des limites raisonnables, et vous le changez visuellement. Rien n’est une toile libre, donc rien ne casse le design.

Visite du Studio

Le panneau latéral a quatre zones : En-tête, Page, Pied de page et Style, chacune avec des groupes, et une recherche qui trouve n’importe quel réglage par son nom. L’aperçu est votre vraie boutique, en largeur ordinateur, tablette ou mobile. Ce que vous changez est un brouillon que seul l’employé qui utilise le Studio voit. Les visiteurs ne voient rien tant que vous n’avez pas cliqué sur Enregistrer, et chaque étape peut être annulée et rétablie. Les textes se modifient par langue et vous pouvez régler une marge avant et après presque chaque zone.

Constructeurs d’en-tête et de fiche produit

Le constructeur d’en-tête traite la barre du haut et l’en-tête comme une seule zone. Glissez le logo, le menu, la recherche, la langue, la devise, le compte, la liste d’envies, le panier et jusqu’à trois boutons personnalisés entre la barre du haut, l’en-tête, une rangée en dessous, une position flottante ou masqués. Partez d’un préréglage (classique, une seule barre, logo centré, boutique) et ajustez. La recherche a ses propres options, de la taille et des coins jusqu’à la réduction en un bouton rond qui s’ouvre par-dessus ses voisins, et tous les contrôles de l’en-tête partagent un même aspect.

La fiche produit est un menu : structure (cinq mises en page, dont une à trois colonnes), photos, bouton d’achat, bouton liste d’envies, détails en accordéon, onglets ou tout ouvert, et un même aspect pour les sections sous le produit, plus six designs déjà prêts. Le plan de la page montre où vit chaque bloc (colonne d’informations, colonne latérale, rangée pleine largeur, sections) et vous laisse le glisser ailleurs, dans le plan ou dans l’aperçu en direct.

Palette et polices

Le thème travaille avec une palette : couleur principale, secondaire, surfaces douces, texte et fond. Des composants comme le menu, les boutons du slider, la recherche, les contrôles de l’en-tête, la newsletter et les boutons vous laissent choisir parmi les couleurs de la palette, pas n’importe quelle couleur : c’est ainsi qu’une boutique reste cohérente après dix modifications faites par trois personnes.

Les polices viennent de Google Fonts, mais vos visiteurs ne parlent jamais à Google. La première fois que vous choisissez une police, votre boutique télécharge ses fichiers et les sert elle-même, avec seulement les sous-ensembles Latin et la police du texte préchargée. Aucune requête vers un tiers, et rien à ajouter pour cela à votre texte sur les cookies ou la confidentialité.

Emplacements Content Blocks

Certains endroits du plan de la fiche produit sont des emplacements Votre contenu : au-dessus ou en dessous du bouton d’achat, dans la colonne latérale, en pleine largeur, après les détails. Ils sont alimentés par Content Blocks Pro, notre constructeur de blocs. Le plan montre les blocs de chaque emplacement avec un lien pour les modifier ou en créer un. Un bandeau de confiance, un guide des tailles ou une bannière se placent sur la fiche produit sans toucher à un template.

Export, import et designs de boutique par secteur

Depuis la page du module, Exporter télécharge un zip avec les valeurs du thème dans toutes les langues, l’ordre des sections de l’accueil, ceux de nos modules qui sont activés, et le contenu du slider, du menu et des blocs avec leurs images et vidéos. Importer l’applique à une autre boutique. Les liens vers catégories, produits et pages voyagent par ce qu’ils désignent (URL simplifiée, référence produit) et sont donc retrouvés ; un lien vers quelque chose que l’autre boutique n’a pas est laissé vide et signalé.

Cela donne deux usages. Vous pouvez passer un design terminé de la préproduction à la production en quelques minutes. Et vous pouvez livrer des designs de boutique complets : une boutique de vélos, de mode, de lingerie, de montres, chacune sous forme d’un pack avec son aspect, ses images, ses textes et ses blocs prêts à importer.

Compatibilité et performance

Le Studio fonctionne sur PrestaShop 8.2 et 9 avec PHP 8.1 ou supérieur et n’utilise aucun override. Les valeurs enregistrées arrivent en boutique sous la forme d’un seul petit <style> en ligne de quelques centaines d’octets dans l’en-tête de la page, sans requête supplémentaire et sans JavaScript pour les options. Tant que vous ne changez rien, rien n’est affiché. Nos thèmes sont testés contre des budgets de poids (JavaScript, CSS, polices, requêtes) qui ne peuvent pas dépasser ceux de Hummingbird, le thème sur lequel ils sont construits.

À qui il s’adresse

• Les commerçants qui veulent changer l’aspect de leur boutique sans ouvrir un ticket auprès d’un développeur.
• Les agences qui livrent de nombreuses boutiques : elles montent un design, l’exportent et l’importent dans la suivante, et donnent au client un éditeur qu’il sait utiliser.
• Les vendeurs et créateurs de thèmes qui veulent proposer des designs de boutique complets par secteur, avec l’éditeur, les modules et le contenu dans un seul paquet.

Le Studio fait partie de nos thèmes : vous l’avez avec le thème. Il offre aussi un contrat pour les modules : n’importe lequel de nos addons peut ajouter son propre panneau, et le slider, le menu, les blocs et les avis le font déjà.