Storefront est-il vraiment le meilleur thème WordPress e-commerce ?

Au moment de faire vos emplettes en ligne, vous êtes sûrement déjà tombé sur des boutiques au design peu appétissant. Vous avez trouvé LE produit que vous recherchiez, mais au moment de visiter le site, une navigation chaotique ou une présentation bâclée vous ont fait repartir aussi vite que vous êtes arrivé. Quel dommage !

Lorsque vous vendez des produits, vous avez donc tout intérêt à les présenter dans leur plus bel écrin pour que vos visiteurs ne prennent pas la poudre d’escampette.

Et ce n’est pas une mince affaire, car trouver un thème​ WordPress e-commerce​ est parfois un vrai parcours du combattant. En effet, certains thèmes sont gorgés de fonctionnalités parfois superflues. Pas facile, donc, de trouver un thème comportant le strict minimum.

C’est à ce moment précis qu’entre en scène le thème Storefront, le cœur de notre sujet aujourd’hui ! Vous êtes prêt à voir ce qu’il a dans le ventre ? Voici le menu du jour :

Initialement rédigé en juin 2015, cet article a été mis en jour en avril 2021. La version de Storefront issue du répertoire officiel testée dans cet article est la 3.5.1.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH

Qu’est-ce que Storefront ?

Storefront est un thème flexible et gratuit pour boutiques en ligne. Si son nom vous dit quelque chose, c’est normal : il s’en est fait un dans le milieu du e-commerce.

Conçu par Automattic, la société éditrice de WooCommerce, Storefront promet une compatibilité parfaite avec WooCommerce et ses extensions. Vous n’aurez donc a priori pas besoin de vous arracher les cheveux à la prochaine mise à jour.

Au passage, si vous vous demandez comment créer votre boutique WordPress avec WooCommerce, Chef Alex devrait répondre à toutes vos questions :

Storefront étant un thème gratuit, il vous permet de personnaliser le principal (styles, logo, mise en page avec ou sans sidebar). Mais vous pouvez agrémenter votre boutique à votre sauce grâce à des extensions payantes, que nous passerons à la loupe dans la suite de cet article.

Sur sa page officielle, Storefront se présente comme un thème responsive et optimisé pour l’accessibilité, de quoi attirer une audience large et variée. Doté d’un système de grille flexible et emboîtable s’adaptant aux différentes tailles d’écran de vos utilisateurs, Storefront vous permet de modeler l’affichage de votre site sans besoin d’être un génie du code ou du webdesign.

On peut voir sur le répertoire WordPress que Storefront est déjà déployé sur plus de 200 000 sites. Et le moins que l’on puisse dire, c’est qu’il a la cote, puisqu’il affiche une jolie note de 4,5 sur 5 étoiles.

Cette présentation vous a mis en appétit ? Découvrons comment mettre en place votre boutique avec Storefront !

Prise en main

Pour démarrer, installez Storefront via le menu Apparence > Thèmes de l’interface WordPress. Vous pouvez aussi le retrouver sur le répertoire WordPress.

Après vous avoir gentiment remercié, une notification vous demande d’installer et d’activer l’extension WooCommerce, puis de la configurer si ce n’est pas déjà fait. Cette étape vous donne du fil à retordre ? Jetez un œil à notre article à ce sujet.

À présent, revenons à nos moutons. Dans la section Apparence > Storefront, vous serez invité à activer le modèle de page d’accueil de Storefront, dont nous parlerons plus en détail dans la suite de cet article, et à ajouter des produits d’exemple.

En effet, une boutique sans produits n’est pas imaginable. Ce serait comme un sandwich sans pain ou comme WooCommerce sans WordPress !

Une fois que vous avez ajouté de la matière à votre boutique, nous allons pouvoir la mettre en forme.

Personnalisation de Storefront

Prêt à commencer la personnalisation de Storefront ? Rendez-vous dans la section Apparence > Personnaliser de l’interface WordPress.

Comme vous pouvez le voir, treize onglets sont disponibles. Un éventail basique, mais large pour un thème gratuit. C’est ici que vous pouvez notamment modifier les couleurs de votre site, les typographies et la mise en page.

Les zones de widgets de Storefront

Storefront comprend six zones de widgets. Vous pouvez y placer du contenu qui s’affichera sur toutes les pages, comme une bannière en dessous de l’en-tête ou des avis clients en pied de page. De quoi mettre l’eau à la bouche des utilisateurs de votre site.

Si vous souhaitez en savoir plus, chef Alex vous propose une dégustation de l’interface de Storefront dans le numéro 6 de L’Instant Thème, datant de janvier 2020 (notez que Storefront a quelque peu évolué depuis) :

Le modèle de page d’accueil

Storefront est aussi livré avec un modèle de page d’accueil. Il affiche notamment les catégories de produits, les produits récents, les produits mis en avant ainsi que les mieux notés.

Pour ce qui est du design, on remarque qu’il est particulièrement basique. Si vous cherchez de quoi exprimer toute votre créativité au travers d’effets CSS à tomber par terre, Storefront n’est peut-être donc pas pour vous.

Vous pouvez le voir en action ci-dessous :

Pour activer ce modèle, rendez-vous dans la section Pages, créez une nouvelle page, incorporez-y votre contenu (il apparaîtra au-dessus de vos produits), puis sélectionnez le modèle Page d’accueil. N’oubliez pas de publier votre page.

Pour la définir comme page d’accueil, dirigez-vous vers la section Réglages > Lecture, puis cochez une page statique dans La page d’accueil affiche et sélectionnez votre page fraîchement créée dans la liste déroulante.

Enregistrez les modifications, et voilà ! La page d’accueil de votre site est à présent relookée !

Les thèmes enfants

Nous avions déjà parlé de l’importance d’utiliser un thème enfant dans cet article. Vous ne pouvez pas y couper si vous voulez conserver les modifications apportées à votre site après les mises à jour de votre thème parent.

Un thème enfant est en quelque sorte un sous-thème héritant de toutes les fonctionnalités du thème parent. Pour en savoir plus, consultez la fiche dédiée de notre glossaire.

Cela dit, l’utilisation d’un thème enfant peut aussi s’avérer judicieuse si le design de base de Storefront ne vous plaît pas. En effet, WooCommerce propose pas moins de quatorze thèmes enfants (Storefront child theme) prêts à être utilisés, chacun conçu pour un type de projet spécifique.

Vous pouvez ainsi adopter un design différent sans mettre les mains dans le cambouis.

Tous ces thèmes enfants sont compatibles avec les extensions de Storefront, que nous découvrirons dans la partie suivante. Ils sont accompagnés d’une documentation et d’une FAQ ainsi que d’un an de mises à jour et de support à partir de la date d’acquisition.

Au moment d’écrire ces lignes, deux de ces quatorze thèmes enfants sont gratuits : Deli et Boutique. On remarque hélas que leur design reste très basique.

• Deli est un thème enfant aux couleurs de la terre, adapté aux boutiques de produits naturels, biologiques ou issus de l’artisanat ;

• Boutique est un thème enfant sobre et élégant, pensé pour un site de bijoux ou de produits de luxe.

Les autres thèmes enfants de Storefront sont au prix de 39 $ (soit un peu plus de 32 €) et sont adaptés à différentes niches. Parmi eux, on trouve notamment :

• Petshop, un thème enfant aux couleurs de la nature, pensé pour les boutiques dédiées à nos compagnons à poils ou à plumes ;
• Hotel, qui s’adresse aux entreprises offrant des services d’hébergement et promet une intégration parfaite avec les extensions WooCommerce Bookings et Accomodation Bookings ;
• Bookshop, qui propose aux boutiques vendant des livres et autres articles de collection une page d’accueil mettant en valeur les différents produits et catégories de produits ;

Retrouvez la liste complète des thèmes enfants de Storefront sur le site de WooCommerce.

Les extensions (payantes)

Les possibilités de personnalisation de Storefront vous laissent sur votre faim ? C’est normal, elles sont volontairement limitées afin de laisser place à une douzaine d’extensions payantes pour tailler votre site sur-mesure.

C’est bien dommage de devoir passer à la caisse pour profiter de ces options, surtout quand d’autres thèmes WordPress offrent plus de souplesse dans leur version gratuite. OceanWP, à titre d’exemple, permet de customiser votre page d’erreur 404, ainsi que la partie blog de votre site, l’en-tête et le pied de page de manière bien plus poussée que Storefront.

Le thème Kadence, quant à lui, offre des options plus avancées pour la modulation de la mise en page et du style, et en particulier pour la personnalisation de l’en-tête et du pied de page, grâce au Header & Footer Builder.

Ce constructeur intuitif en glisser-déposer se retrouve également avec le thème Astra, qui permet notamment de personnaliser les boutons, l’emplacement du fil d’ariane, et la mise en page du blog de façon plus pointue, le tout directement depuis l’outil de personnalisation. 

Cela dit, si les extensions payantes de Storefront vous intéressent, un pack tout-en-un est disponible au prix de 69 $ (un peu plus de 57 €), vous pouvez le retrouver à tout moment dans le menu Apparence > Storefront de WordPress.

Sans plus attendre, voici le menu complet :

• Storefront Powerpack – 59 $ (un peu plus de 49 €) par an
• Storefront Homepage Contact Section – gratuit
• Storefront Hamburger Menu – gratuit
• Storefront Product Sharing – gratuit
• Storefront Footer Bar – gratuit
• Storefront Mega Menus – 39 $ (un peu plus de 32 €) par an
• Storefront Reviews – 19 $ (un peu plus de 15 €) par an
• Storefront Pricing Tables – 19 $ (un peu plus de 15 €) par an
• Storefront Product Hero – 19 $ (un peu plus de 15 €) par an
• Storefront Blog Customizer – 19 $ (un peu plus de 15 €) par an
• Storefront Parallax Hero – 19 $ (un peu plus de 15 €) par an

Nous allons braquer nos projecteurs sur quelques extensions de cette liste et voir si elles peuvent vous être utiles.

Storefront Powerpack – 59 $ (un peu plus de 49 €) par an

Storefront Powerpack multiplie les options de personnalisation de votre boutique. Vous pouvez modifier l’affichage de l’en-tête, la page d’accueil, de paiement et bien d’autres ingrédients de votre site :

• L’onglet Design propose une belle brochette d’effets CSS facilement applicables au travers de boutons permettant de régler l’emplacement des éléments de vos pages, le style de police ou encore les couleurs ;
• L’onglet Product Details permet de gérer l’affichage des pages produits ;
• L’onglet Shop permet de moduler l’affichage des blocs de produits ;
• L’onglet Messages permet de modifier la couleur de fond des messages d’information, de validation ou d’erreur.

Storefront Blog Customizer – 19 $ (un peu plus de 15 €) par an

Storefront est un thème e-commerce, certes, mais vous pouvez aussi l’utiliser sur votre blog.

L’extension Storefront Blog Customizer permet de modifier la mise en page de ce dernier et de vos articles. Vous pourrez choisir où se place le titre, la sidebar (et même la supprimer) et l’agencement de vos articles (format classique ou magazine).

Des options peu nombreuses, mais qui peuvent vous servir si vous possédez un blog.

Storefront Pricing Tables – 19 $ (un peu plus de 15 €) par an

L’extension Storefront Pricing Tables permet de créer des tableaux de prix. Un bouton générateur de shortcodes vous permettra de présenter quelques produits pour mettre en valeur l’offre la plus avantageuse à vos clients. Le hic, c’est que ce bouton n’est accessible que depuis l’ancien éditeur WordPress, le dénommé « TinyMCE ».

Si vous souhaitez intégrer un tableau de prix depuis l’éditeur WordPress actuel, vous devrez donc taper les shortcodes adéquats à la main dans la page ou l’article de votre choix :

• Définissez tout d’abord le nombre de colonnes et leur alignement ainsi : [pricing_table columns="3" alignment="left"][/pricing_table]
• Puis, copiez ce shortcode autant de fois qu’il y a de colonnes dans votre tableau : [pricing_column id="43" title="" features="Caractéristique 1|Caractéristique 2|Caractéristique 3" image="true" highlight="false"]
  Vous y définissez l’ID du produit, choisissez un titre ou le laissez vide afin de récupérer le nom du produit, indiquez les caractéristiques du produit, séparées par des pipes « | », choisissez d’inclure l’image du produit ou non, et enfin mettez en valeur le produit que vous souhaitez en changeant le dernier paramètre pour « highlight=”true” ».

Ce système de shortcodes étant pour le moins archaïque, une intégration du tableau de prix au nouvel éditeur à travers un bloc Gutenberg serait plus qu’appréciable.

Après avoir intégré votre tableau de prix, rendez-vous dans la section Personnaliser > Pricing Tables afin de régler le nombre de colonnes, l’alignement du tableau ainsi que les couleurs de fond des différents produits mis en avant.

Storefront Product Hero – 19 $ (un peu plus de 15 €) par an

Storefront Product Hero permet de mettre en valeur un produit sur une bannière. Cette dernière se glisse également à l’intérieur d’une page au moyen d’un shortcode : [product_hero].

Dans le menu Personnaliser > Product Hero, vous avez la possibilité de personnaliser l’affichage de cette bannière. Un effet de parallax est notamment disponible sur l’arrière-plan de la bannière, ce qui signifie que vous pouvez faire défiler ce dernier au fur et à mesure que l’utilisateur de votre page fait défiler la page.

Cette extension peut être utile pour mettre en valeur un produit en promotion en quelques clics, par exemple.

Storefront Parallax Hero – 19 $ (un peu plus de 15 €) par an

Storefront Parallax Hero ajoute une bannière sur le modèle de page d’accueil. Elle est configurable dans Personnaliser > Parallax Hero.

Pour l’ajouter et la configurer sur une autre page, il vous faudra utiliser un shortcode (eh oui, encore un !). Vous pourrez modifier le texte, l’image ou la vidéo de fond, et ajuster l’effet parallax.

On regrette une fois de plus ce système daté et peu intuitif.

Compatibilité avec les extensions

Storefront est naturellement compatible avec toutes les extensions proposées sur le site de WooCommerce. La documentation officielle indique même une liste d’extensions conçues pour s’adapter parfaitement à Storefront.

Elle ne souligne aucune incompatibilité avec un plugin officiel WordPress, donc a priori pas de problème particulier à l’horizon, capitaine !

Pour aller plus loin sur le sujet, n’hésitez pas à consulter notre sélection des 25 meilleurs plugins qui pourraient figurer sur n’importe quel type de site (blog, boutique, portfolio, etc), ainsi que notre sélection des meilleurs plugins WooCommerce.

Nous avons terminé d’explorer les possibilités de personnalisation de votre site avec Storefront. Maintenant, passons à trois autres ingrédients principaux du thème.

Performance, SEO, responsive : zoom sur 3 aspects majeurs

Performance

Le temps de chargement d’un site web a un impact non négligeable sur l’expérience utilisateur et, dans une moindre mesure, sur le positionnement de votre site web sur les moteurs de recherche, dont nous allons parler plus en détail dans la partie suivante. 

Ainsi, assurer aux utilisateurs une expérience de navigation fluide permet de diminuer votre taux de rebond en maintenant les utilisateurs sur votre site et éventuellement de les faire revenir (ce serait quand même l’idéal, n’est-ce pas ?). La vitesse de chargement de votre site a donc une incidence directe sur votre image de marque.

Et c’est à souligner puisqu’une navigation fluide participe grandement à une expérience utilisateur positive. A contrario, une navigation difficile incitera vos visiteurs à aller voir chez vos concurrents si l’herbe y est plus verte.

D’après une étude publiée sur le blog de WP Rocket, Storefront se classe dans les dix thèmes WooCommerce les plus rapides, une jolie performance !

SEO

Le SEO, acronyme de Search Engine Optimization (Optimisation pour les moteurs de recherche en français) désigne un ensemble de techniques visant à positionner une page web en tête des résultats des moteurs de recherche. Aussi appelé référencement naturel, il est primordial de le travailler afin de donner de la visibilité à votre site et ainsi élargir votre audience.

De nombreux paramètres agissent sur le positionnement de votre site, dont la qualité du contenu, les liens entrants (aussi appelés backlinks) et la structure du code. N’hésitez pas à consulter la fiche de notre glossaire consacrée au SEO pour en savoir plus.

Au niveau de la structure du code, c’est le thème que vous avez choisi qui va jouer son rôle, et Storefront figure parmi les bons élèves dans cette matière. Il ne dispose pas d’options dédiées au SEO, mais prétend offrir des performances améliorées. On remarque notamment que la hiérarchie des titres est bien appliquée.

Responsive

On dit d’un site web qu’il est responsive lorsque son affichage s’adapte à l’appareil de l’utilisateur (que ce soit un ordinateur, une tablette ou un téléphone portable).

Storefront est un thème entièrement responsive, notamment grâce à certaines options comme le menu secondaire, qui se fixe au bas de l’écran sur tablette et sur mobile. Il comprend trois boutons permettant à l’utilisateur de gérer son compte, de chercher un produit, et de valider son panier.

Avec Storefront, vous devriez donc pouvoir contenter les mobinautes sans problème. Et je ne parle pas d’adeptes de petites cylindrées, qui n’ont pas grand-chose à voir avec notre sujet (à moins que vous ne vendiez des cyclomoteurs).

Je fais référence aux utilisateurs accédant à votre site depuis leur téléphone mobile. Selon une étude de Médiamétrie sur l’usage d’internet en 2020, ils constituent deux tiers des internautes en France. Alors autant dire que vous avez tout intérêt à avoir un site web responsive.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Découvrir la formation

Documentation et support

Si vous rencontrez des difficultés lors de l’utilisation de Storefront, WooCommerce propose une documentation détaillée pour tous ses thèmes et plugins. Et si vous avez bien suivi le début de cet article, vous savez que Storefront en fait partie.
Vous pouvez la retrouver à tout moment en vous rendant dans Apparence > Storefront dans WordPress.

En cas de problème pendant l’installation ou la configuration du thème, vous trouverez un guide détaillé sur la page dédiée. Pour toute autre question, vous pouvez consulter la FAQ. Pour le moment, la documentation est en anglais, mais pas de panique !

Si vous ne maîtrisez pas la langue de Shakespeare, vous pouvez toujours demander de l’aide à la communauté française de WordPress, sur le forum de support ou sur le Slack WordPressFR. Le support anglophone est accessible depuis le menu Apparence > Storefront.

Si vous utilisez un thème enfant ou un plugin WooCommerce payant, vous aurez accès à une interface de support où vous pourrez ouvrir un ticket en cas de pépin.

Au final, que penser de Storefront ?

Si vous cherchez un thème gratuit sans fioritures, Storefront peut tout à fait satisfaire votre appétit.

Tout d’abord, ce thème a été conçu par les créateurs du plugin WooCommerce. Le moins que l’on puisse dire, c’est qu’ils connaissent WordPress sur le bout des doigts. En utilisant un thème enfant, vous êtes assuré de bénéficier des mises à jour de Storefront ainsi que des correctifs et nouvelles fonctionnalités.

En bref, Storefront est un thème WordPress e-commerce qui constitue une bonne base pour concevoir rapidement une boutique en ligne sur-mesure.

Grâce à ses extensions payantes, vous pouvez personnaliser Storefront grâce à de nouvelles fonctionnalités, sans forcément être un pro du code. On regrette néanmoins que ces extensions soient payantes, étant donné qu’on retrouve ce type d’options avec d’autres thèmes gratuits, comme Astra, Kadence ou OceanWP.

Autre point de taille à souligner : le design par défaut de Storefront reste malheureusement basique. Si vous rêvez d’une échoppe dernier cri en termes d’aspect graphique, je vous conseille de passer votre chemin.

Ou plutôt de vous tourner vers un constructeur de page comme Elementor, qui vous permettra d’aller beaucoup plus loin dans la personnalisation de votre site. Gardez néanmoins à l’esprit que la prise en main du célèbre page builder nécessite une courbe d’apprentissage.

Pour vous aider dans cette mission, nous avons préparé une formation vidéo sur le sujet. De quoi concocter un site aux petits oignons !

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

Avez-vous essayé Storefront ? Cet article vous a-t-il donné envie d’y goûter ? Dites-nous ce que vous en pensez 🙂

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Aurore | WPMarmite

Content Manager chez WPMarmite, j’ai pour mission de gérer les ressources que nous préparons avec amour pour vos projets WordPress. Passionnée par les mots et le digital, je fais aussi de la musique et du théâtre à mes heures perdues.