Review complète de Storefront : un thème WordPress eCommerce par WooCommerce

Toujours dans la lignée des articles relatifs au e-commerce et à Woocommerce, aujourd’hui on se penche sur le thème Storefront. Quel thème WordPress devriez-vous utiliser avec Woocommerce ? Cette décision prend un peu plus de temps car il existe des milliers de thèmes WordPress gratuits et premiums adaptés à Woocommerce parmi lesquels vous pouvez choisir.

Pour ceux qui cherchent un thème spécifique e-commerce, le thème Storefront a été conçu par les développeurs derrière Woocommerce, le plugin e-commerce le plus populaire pour WordPress. En utilisant Woocommerce et le thème Storefront, vous pouvez rapidement et facilement mettre en place une boutique en ligne pour vendre vos produits ou services.

Pourquoi Storefront ? 

Storefront a été conçu à l’aide de Underscores qu’Automattic utilise pour créer tous les designs de WordPress.com.

Storefront est un thème léger et basique pour créer rapidement une boutique en ligne fonctionnelle. Bien qu’il comprenne des options de personnalisation de base, si vous souhaitez un style plus unique, vous pouvez investir dans l’un des thèmes enfant premium.

Grâce au personnalisateur de thème WordPress, vous pouvez facilement changer les couleurs et voir les changements en temps réel, cependant vous devrez faire des modifications vous-même ou acheter le plugin Storefront Powerpack si vous voulez mettre votre propre marque sur le thème. Les développeurs pourront apprécier le caractère simple de Storefront et le fait que les actions et les filtres peuvent être ajoutés aux pages en utilisant Storefront Hooks.

Nous allons passer en revue le thème Storefront, ses atouts, ses défauts et en quoi ce thème est utile pour les utilisateurs de Woocommerce. 

Installation et personnalisation de Storefront

Commençons par l’installation. Storefront est accessible via votre panneau admin WordPress. Rendez-vous dans Apparences >Thème et cherchez Storefront dans la barre de recherche. 

Une fois trouvé, installez-le puis pensez à l’activer. Cliquez sur la page du thème pour accéder aux détails.

Les thèmes WordPress disposant de nombreuses fonctionnalités vous redirigent généralement vers une page de démarrage après que le thème ait été activé sur votre site web. Storefront ne dispose pas d’une telle page, mais dans le menu Apparence de WordPress, vous trouverez une page d’information qui contient des liens vers le support, la documentation et le blog de développement de Storefront. Cette page contient également des liens vers les extensions officielles du plugin Storefront et les thèmes enfants (nous y reviendrons plus tard).

Depuis la section Storefront vous pouvez commencer à personnaliser votre boutique e-commerce en cliquant sur le bouton “C’est parti” 

Une fois arrivé sur la page de personnalisation du thème, votre boutique par défaut ressemblera à cela :

Vous trouverez dans votre barre latérale à gauche une foule d’options réparties dans une douzaine de catégories, mais vous êtes assez limité dans ce que vous pouvez faire avec la version de base de Storefront. Au-delà de la gestion des widgets et des menus, tout ce que vous pouvez faire est de modifier la position de la barre latérale et de changer la couleur des fonds et des polices. 

Afin de débloquer davantage d’options de design, vous devrez activer l’une des nombreuses extensions du plugin Storefront. Par exemple, Storefront Blog Customizer vous donne un contrôle total sur l’apparence des articles de blog et sur les informations méta affichées.

Éléments principaux

En-tête 

Ici vous pouvez ajouter une image d’arrière-plan, sélectionner les couleurs d’arrière plan, du texte et des liens. 

Pied de page 

Encore une fois, la personnalisation se limite aux couleurs d’arrière-plan, d’en-tête, du texte et des liens. 

Arrière-plan

Vous pouvez ajouter une image d’arrière-plan et sélectionner une couleur selon vos envies. 

Typographie

Dans cette section vous pouvez gérer les couleurs d’en-tête, du texte, des liens, et les couleurs “Héro” du titre et du texte. 

Boutons 

Même chose pour les boutons, vous pouvez modifier principalement les couleurs. 

Mise en page 

Pour la mise en page, deux options vous sont proposées. Soit de mettre la barre latérale à gauche et le corps à droite ou la barre latérale à droite et le corps à gauche. 

Menus

Vous pouvez créer et gérer vos menus depuis cette section. Vous pouvez aussi définir les emplacements de vos menus. Avec le thème Storefront vous avez 3 emplacements de menu : un menu principal, un menu secondaire et un menu pour mobiles.

Widgets

Pour les widgets, c’est assez simple. Vous aurez la possibilité d’en rajouter à plusieurs emplacements, comme en dessous de l’en-tête, ou dans les colonnes 1 à 4 du pied de page. De plus, si vous ouvrez la colonne latérale vous pourrez choisir des widgets associés aux articles et commentaires récents, des catégories spécifiques ou votre Méta. 

Pour les articles et les commentaires, vous pouvez sélectionner un nombre à afficher. Pour les archives et les catégories, vous pouvez cocher parmi plusieurs options, de la liste déroulante à une liste d’articles ou afficher une hiérarchie. 

 

Réglages page d’accueil

Vous pouvez choisir ce qui est affiché sur la page d’accueil de votre site. Il peut s’agir d’articles dans l’ordre chronologique inverse (blog classique), ou d’une page fixe/statique. Pour définir une page d’accueil statique, vous devez d’abord créer deux pages. Une qui deviendra la page d’accueil, et une autre qui sera l’endroit où vos articles seront affichés.

Woocommerce

Ici vous pouvez gérer la partie e-commerce. Que ce soit les notifications de la boutique, le catalogue des produits, la page des produits, les images liées aux produits, ou la page Commandes, tout est personnalisable. Par exemple, vous pouvez organiser vos produits en affichant les plus populaires (nombre de ventes) ou choisir le nombre de produits affichés par ligne. C’est assez intuitif, n’hésitez pas à explorer les quelques options qui sont proposées. 

 

 

CSS additionnel 

Pour la partie CSS, un bloc note est disponible pour que vous puissiez ajouter votre code CSS. 

Plus 

La partie plus est une sorte de conclusion où on vous invite à explorer plus en détails les possibilités qu’offre Storefront.

Nous allons maintenant voir les extensions proposées pour Storefront. Il faut bien noter que la totalité des fonctionnalités de Storefront sont accessibles à travers les plugins. Ensuite nous jetterons un œil aux thèmes enfants de Storefront avant de conclure. 

Les plugins Storefront

Les fonctionnalités complètes de Storefront ne peuvent être accessibles que lorsque vous activez les 11 extensions de plugins Storefront disponibles. Ces plugins ont été conçus spécifiquement pour Storefront et ne fonctionneront pas avec d’autres thèmes WordPress.

Quatre de ces extensions de plugins sont disponibles gratuitement et peuvent être téléchargées sur WooCommerce.com, depuis le répertoire de plugins de WordPress ou depuis votre panneau admin dans la section Storefront :

Les quatre extensions gratuites sont :

• Storefront Homepage Contact Section : Ajoute une section de contact personnalisable à votre page d’accueil.
• Storefront Hamburger Menu : Modifie le menu par défaut pour les utilisateurs mobiles en un menu hors écran.
• Storefront Product Sharing : Affiche des boutons de partage sous les produits pour Facebook, Twitter, Pinterest et Email.
• Storefront Footer Bar : Ajoute un widget pleine largeur au-dessus de la zone de widget de pied de page à quatre colonnes par défaut.

Les sept extensions premium du plugin Storefront sont disponibles par le biais du Storefront Extensions Bundle pour environ 60€ par an. Compte tenu du prix de ces plugins, la plupart d’entre vous trouveront judicieux d’acheter ce pack plutôt que d’acheter les plugins individuellement.

L’extension la plus chère est Storefront Powerpack. Proposé à environ 50€ par an, Powerpack vous permet de personnaliser chaque aspect de la conception de votre site Web par le biais du personnalisateur de thème WordPress. Il peut être utilisé pour ajuster la typographie, les marges, le padding, les bordures, les couleurs et plus encore. Différentes mises en page peuvent être sélectionnées pour les pages de paiement et il y a un configurateur de mise en page d’en-tête aussi.

Un autre plugin intéressant est le Storefront Mega Menus. Proposé à environ 30€ par an, il vous permet de créer des menus déroulants en pleine largeur qui peuvent être remplis avec des widgets WordPress.

Les cinq autres extensions sont toutes vendues pour la modique somme de 19$/an soit environ 15€/an.

• Storefront Reviews : Permet aux clients d’ajouter des commentaires détaillés sur les produits sur vos pages produits.
• Storefront Pricing Tables : Ajoute des tableaux de prix personnalisables qui peuvent être utilisés pour comparer des produits ou promouvoir des abonnements.
• Storefront Product Hero : Vous aide à promouvoir les produits et à augmenter les conversions clients en mettant en évidence les produits de votre boutique.
• Storefront Blog Customizer : Vous donne un contrôle total sur la mise en page de votre blog et vous permet de définir les méta-informations à afficher.
• Storefront Parallax Hero : Ajoute une section héroïque personnalisable à votre page d’accueil pour vous aider à afficher les produits et les sections/boutons “call to action”.

En bref, je trouve que chacun de ces plugins apporte quelque chose de nouveau et améliore votre boutique e-commerce de manière positive.

Les thèmes enfants pour Storefront

WooCommerce propose 14 thèmes enfant Storefront sur son site. Ces designs vous permettront de modifier l’apparence de votre boutique en un instant et peuvent être utilisés comme point de départ pour le design de votre propre site web personnalisé.

La majorité des prix pour les thèmes enfants tournent autour de 30€ avec un an d’assistance et de mise à jour. Deux des designs, Deli et Boutique, sont disponibles gratuitement.

Les thèmes enfant Storefront se concentrent tous sur des thèmes particuliers en lien avec différentes activités professionnelles, comme une librairie, une pharmacie ou une galerie. Bien sûr, vous pouvez modifier l’apparence des designs et les utiliser pour tout type de boutique en ligne.

Bien que ces thèmes enfants soient plus colorés que le thème principal, ils s’inspirent toujours l’approche minimale du design de Storefront.

Conclusion 

Dans l’ensemble, j’ai été impressionné par Storefront et je pense qu’il sera un excellent choix pour nombre d’entre vous. Il y a, cependant, un certain nombre de domaines où je pense qu’il peut être amélioré.

Sur une note positive, Storefront se charge rapidement et il a été optimisé pour tous les moteurs de recherche, appareils et utilisateurs. Il y a une documentation détaillée pour vous aider à comprendre comment le thème fonctionne et son code simple, le support des thèmes enfants, en fait également un thème fantastique pour les développeurs.

Storefront place toutes les options dans le personnalisateur de thème WordPress, de sorte que toutes les modifications que vous apportez peuvent être visualisées en temps réel. Seules les couleurs peuvent être modifiées dans la version de base de Storefront, vous devrez donc activer les extensions du plugin Storefront pour être en mesure de contrôler tous les aspects design de votre site. Cette approche fonctionne généralement bien car elle signifie que le thème principal reste léger, mais j’aimerais voir plus d’options de style dans la version principale. 

Sinon, ce thème est très populaire avec 200 000+ installations actives et une note globale de 4,5/5 étoiles et séduit par sa simplicité.