Vous êtes ici : Accueil | Thèmes WordPress | Storefront : A-t-on trouvé le meilleur thème WordPress e-commerce ?

Storefront : A-t-on trouvé le meilleur thème WordPress e-commerce ?

storefront-ecomerce-wordpress

De plus en plus de monde souhaite lancer une boutique en ligne. Que ce soit pour proposer des produits physiques ou numériques, il vaut mieux avoir un thème WordPress qui les présentent bien.

Je ne sais pas de qui est cette phrase mais on n’a pas de seconde chance de faire une première bonne impression.

C’est le message que j’essaie de faire passer en vous aidant à trouver le thème WordPress idéal.

Aujourd’hui nous allons parler de Storefront, un thème WordPress e-commerce et gratuit créé par WooThemes, l’entreprise derrière le plugin WooCommerce.

Cependant, ce n’est pas moi ni Nicolas qui allons vous le présenter mais David, un nouveau cuistot sur la Marmite.

Je dois vous avouer que je l’ai pas mal cuisiné pour qu’il enrichisse son article afin qu’il corresponde aux standards de la Marmite (j’espère que tu ne m’en veux pas David ^^).

En tout cas, cet article devrait vous donner un bon aperçu de ce qu’il est possible de faire avec Storefront. David, tu peux prendre la parole 🙂

Trouver un thème​ WordPress​ est parfois un vrai parcours du combattant, encore plus lorsqu’il s’agit d’un ​thème ​e-commerce.

Les thèmes sont gorgés de fonctionnalités et l’on utilise que 20 à 30% de leurs capacités. De plus, il est vraiment difficile de trouver un thème simple avec le strict minimum.

Par ailleurs, ayant récemment mis en place un site​​ ​Woocommerce avec un thème premium (The Retailler pour ne pas le citer), je me suis rendu compte qu’il pouvait y avoir des problèmes lors des mises à jour WooCommerce.

Je me suis également aperçu que ce thème premium n’utilisait pas tout le pouvoir des hooks.

Par exemple, le créateur du thème « The Retailler » a surchargé Woocommerce en copiant les fichiers du plugin directement dans le thème.

Ce qui fait que lorsqu’il y a une mise à jour de WooCommerce, il faut obligatoirement mettre à jour le thème… et il peux y avoir des surprises, même lorsque l’on a créé un thème enfant.

Storefront, le​ thème phare de Woothemes

storefront

​Suite à cette expérience avec un thème premium et les problèmes de mise à jour qui peuvent en découler, j’ai tenté de trouver une solution pérenne dans le temps.

C’est à ce moment que WooThemes a sorti le thème e-commerce Storefront !

J’ai tout de suite été séduit par ​ce thème : gratuit, flexible et avec le minimum vital.

Pour les intégrateurs avertis, ce thème est à la pointe de la technologie car il utilise SASS ainsi que l’excellent framework Susy, ce qui permet un workflow optimal.

L’utilisation de ce thème assure une compatibilité optimale avec les mises à jour de WooCommerce.

Aperçu thème storefront

Fonctionnalités de Storefront

Comme je le disais, Storefront est livré avec le minimum vital : pas de shortcodes, pas de sliders, pas de page builder… et c’est tant mieux !

Vous pouvez tout de même personnaliser le principal (styles, logo, mise en page avec ou sans sidebar) et le peaufiner encore plus grâce à des extensions payantes (nous allons en parler dans la suite de cet article).

Si vous êtes curieux et que vous souhaitez voir à quoi ressemble le code du thème, vous pouvez le consulter sur GitHub.

Personnalisation du thème

Storefront permet de personnaliser les couleurs du thème (arrière-plans, boutons, typographies) ​avec le menu Personnaliser de WordPress.

feature-3

Les modèles de page

​Le thème Storefront est livré avec 3 modèles de page :​​

  1. Modèle par défaut avec sidebar
  2. Full width qui, comme son nom l’indique permet de ne pas avoir de sidebar (pleine largeur).
  3. Homepage​ qui, grâce au plugin ​Homepage Control plugin​, permet de ​personnaliser la page d’accueil en affichant ou non différentes sections : « Catégories », « Produits récents », « Produits à la une », etc.

​Vous pouvez également choisir si votre barre latérale doit se trouver à gauche ou à droite (toujours dans le menu personnaliser).​

Les extensions (payantes)

Comme je l’ai précisé plus haut, Storefront vient avec plusieurs extensions payantes permettant d’aller plus loin en terme de personnalisation et de fonctionnalités.

​Storefront designer – 39 $

L’extension « Storefront designer » ajoute de nombreux paramètres vous permettant de peaufiner le thème.

On peut par exemple choisir de la disposition du header avec 3 mises en page différentes :

storefront-header
Grâce à cette extension, vous pouvez aussi modifier les typographies en choisissant parmi Helvetica, Lora ou bien encore Robotic Slab.

Le style des boutons peut également être personnalisé grâce à Storefront Designer

En savoir plus sur Storefront Designer

Storefront WooCommerce Customiser – 39$

​L’extension « Storefront WooCommerce Customiser » donne encore plus de contrôle sur l’apparence de votre boutique en changeant des éléments de mise en page.​

Vous pouvez par exemple supprimer la sidebar présente sur la fiche produit afin de ne pas disperser vos visiteurs.

Sur la page archive, vous pouvez choisir le nombre de colonnes, le nombre de produits par page et cacher des informations comme le prix, le bouton ajouter au panier ainsi que le titre.

Au niveau de l’en-tête, vous pouvez choisir de masquer le champ de recherche et/ou l’affichage du panier.

Screen-Shot-2014-09-29-at-21.06.26-650x509

En savoir plus sur Storefront WooCommerce Customiser

Storefront Checkout Optimiser – 19$

L’extension Checkout Customizer ajoute quelques options intéressantes pour la page de commande comme le choix de différentes mises en page.

On peut aussi activer l’option « Distraction free checkout » qui permet de cacher le header et le footer afin d’optimiser les conversions (note d’Alex : vous constaterez qu’Amazon le fait très bien).

Vous pouvez également diviser cette page sur deux colonnes ou répartir la commande sur deux pages.

2-step-checkout-950x594

En savoir plus sur Storefront Checkout Customiser

Storefront Pricing Table – 19$

L’extension « Storefront Pricing Table » permet de créer facilement des tableaux de prix.

Un générateur de shortcodes vous permettra de mettre en valeur vos offres pour proposer ce qu’il y a de mieux à vos clients.

Screen-Shot-2015-03-13-at-15.21.21

En savoir plus sur Storefront Pricing Tables

Storefront Blog Customiser – 19$

L’extension « Storefront Blog Customiser » permet de modifier la mise en page du blog et des articles.

Vous pourrez choisir où doit se placer le titre, la sidebar et comment les articles doivent s’agencer (format classique ou magazine).

Screen-Shot-2015-01-12-at-10.26.33

En savoir plus sur Storefront Blog Customiser

Traduction française

Storefront a généreusement été traduit en français par Didier de WP Trads. Merci à lui 🙂

Télécharger la traduction de Storefront

Thèmes enfants conçus pour Storefront

Pour l’instant Woothemes propose 3 thèmes WordPress enfants dont deux gratuits (Deli et Boutique).

Galleria est un thème enfant très élégant et minimaliste qui s’adaptera bien aux sites de prêt à porter.

galleria-cover1

Aperçu – Acheter (39$)

Boutique est un thème enfant gratuit pour Storefront. Très sobre et élégant il colle parfaitement pour un site de bijoux ou de produits de luxe.

boutique-958x718

Aperçu – Télécharger

Enfin, Deli est un thème enfant gratuit plutôt adapté à une boutique de produits naturels ou issus de l’artisanat.

deli-958x719

Aperçu – Télécharger

Exemples de sites réalisés avec Storefront

De mon côté, j’ai déjà utilisé Storefront sur deux sites e-commerce. En effet, l’aspect minimaliste du thème m’a permis d’avoir une base fonctionnelle pour développer un site entièrement sur mesure.

Voici les résultats que j’ai obtenus :

Foulard Magnolia • Shandor

Adresse du site : www.shandor.fr

lafabrique

Adresse du site : www.lafabriqueducafe.fr

Conclusion

Pour ma part, je suis convaincu qu’​à​ l’heure actuelle, Storefront est le meilleur thème ecommerce pour WordPress.

Tout d’abord, ce thème a été conçu par les créateurs du plugin WooCommerce. Le moins que l’on puisse dire est qu’ils connaissent WordPress sur le bout des doigts.

En effet, niveau code, le thème est parfaitement conçu et utilise les hooks qui permettent de personnaliser le thème à notre sauce !

Pour moi, c’est un de ses points fort car il permet de créer un thème enfant qui controlera le thème parent Storefront via le fichier functions.php uniquement avec les hooks.

L’avantage du thème enfant est que vous continuerez a bénéficier des mises à jour de Storefront ainsi que des correctifs et nouvelles fonctionnalités.

Par ailleurs, créer un thème enfant est un très bon exercice permettant d’apprendre à contrôler WordPress grâce aux hooks.

Enfin, l’avantage de partir d’un thème comme Storefront est que cela permet de créer un site entièrement sur mesure avec une grande flexibilité.

Vous pouvez également, grâces aux extensions payantes, personnaliser facilement votre thème et ajouter de nouvelles fonctionnalités si vous n’êtes pas à l’aise avec le code.
​​​
Bref, je ne saurais que trop vous conseiller ce thème WordPress qui a de beaux jours devant lui !

L’avez-vous essayé ? Est-ce que cet article vous a donné envie de voir ce qu’il a dans le ventre ? Dites-nous ce que vous en pensez 🙂

Si vous avez apprécié cet article, inscrivez-vous à la newsletter

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

C'est parti, je m'inscris !

38 commentaires Ajoutez le vôtre

  1. Bonjour,

    Et merci pour la présentation détaillée de ce thème, que je vais m’empresser de tester !

    Une petite question concernant Woocommerce : quelle extension de paiement utilisez-vous autre que Paypal ? Y a-t-il un site sur lequel on peut les acheter quelle que soit la banque ?

    Merci d’avance,

    Bastien

    Répondre
    • Bonjour Bastien,

      Je n’utilise pas personnellement WooCommerce mais je pense que Stripe est un bon choix car ça évite de passer par les solutions des banques. Il y a aussi Payplug coté français.

      Bonne continuation
      Alex

    • Bonjour Bastien,

      De mon côté j’ai utilisé la passerelle de paiement gratuite Systempay : https://systempay.cyberpluspaiement.com/html/contributions.html
      Cette passerelle est compatible avec la Caisse d’Epargne et la Banque Populaire.
      Sinon, Absolute Web propose des extensions (payantes) compatibles avec les autres banques.

    • Bonjour,

      Merci pour le lien Absolute Web, c’est exactement ce que je cherchais. Des plugins abordables pour à peu près toutes les banques françaises, parfait !

      Bastien

  2. merci au nouveau cuistot David, article intéressant clair direct. je suis convaincue si je dois me faire un site avec boutique! merci à Alex pour ce nouvel article. je partage sur ma page FB …

    Répondre
    • Merci beaucoup Julia, tout le mérite revient à David 🙂

  3. Merci pour la mention de la traduction, bel article soi dit en passant 🙂

    Répondre
    • Pas de soucis Didier, il faut mettre en avant tout ce qui peut simplifier la vie des utilisateurs 🙂

  4. Bonjour,

    Je travaille sur Storefront depuis quelques semaines déjà et puis j’ai vu votre article ce matin. Il me conforte dans mon choix 🙂
    La traduction me semblant intéressante, je viens de la télécharger et la placer dans le dossier théme de mon site en local mais je ne suis pas sûr de bien faire. Pouvez-vous me donner plus de détails?
    Sur mon tableau de bord, dans apparence => thèmes, la mention suivante a apparu:

    Thèmes endommagés

    Les thèmes suivants sont installés, mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle.
    Nom Description
    Storefront_1.4.5_FR La feuille de style manque. Supprimer

    Merci pour votre retour!

    Répondre
    • Bonjour Mélanie,

      Avez-vous installé la traduction dans le dossier languages de Storefront ? Si vous l’avez mis dans wp-content/themes, il est normal que ça ne fonctionne pas.

      Bonne continuation
      Alex

  5. Merci pour ces explications très utiles pour bâtir et personnaliser une e boutique de produits physiques ..des conseils pour bâtir une e boutique pour e learning ou un site avec e learning payant ?

    Répondre
    • Bonjour,

      Ce type de projet est assez différent, l’idéal étant de proposer un site de membres. Des plugins comme Sensei ou ZippyCourses pourront vous aider à mettre cela en place.

      Bonne continuation
      Alex

  6. Bonjour,
    Merci pour votre site et toutes vos informations. Heureuse de vous avoir trouvé sur la toile !!!
    Je suis totalement débutante et j’aimerai créer un site avec Storfront.
    J’ai déjà réussi à installer le thème. C’est une bonne chose !!!
    Comment dois-je procéder pour installer la traduction en français ?
    Comment accéder au dossier languages comme précisé à Mélanie?
    J’aimerai également placer mon logo sur le header. Comment faire ?
    Merci pour votre aide 😉

    Répondre
    • Bonjour,

      Merci pour votre retour sur le blog 🙂

      Cet article pourra vous aider pour la traduction.

      Pour le logo, jetez un oeil dans Apparence > Personnaliser.

      Bonne continuation
      Alex

  7. Bref un thème gratuit mais avec plein de trucs payant !
    Et en plus non personnalisa je
    Quand on voit les exigeances du e-commerce aujourd’hui cela ne me semble vraiment pas très sérieux de présenter ce thème comme le meilleur du e-commerce ! Ça ressemble plus à du publirédactionnel qu’à un bon cru de la marmite

    Répondre
    • Merci pour votre retour, toutefois grogner parce qu’il y a des extensions payantes me semble exagéré. Quand on veut lancer une boutique en ligne, c’est à dire gagner de l’argent en vendant des produits, payer pour bénéficier d’options supplémentaires me semble justifié (même WooCommerce est gratuit).

      Quand on regarde le niveau des types qui ont programmé tout cela, c’est donné.

      De plus, Storefront à l’avantage d’être tourné vers les débutants et les développeurs, ce qui est loin d’être le cas de tous les thèmes e-commerce. Si les extensions payantes ne vous intéressent pas, vous pouvez personnaliser le code du thème pour obtenir le rendu désiré.

      À mon sens, l’article de David a toute sa place sur la Marmite, sinon il n’aurait pas été publié 😉

    • Bonjour Alex,
      Merci pour cette réponse…. Alors je vais m’empresser de tester ce thème prodige ! Le principe n’était pas de grogner car je suis une farouche adepte de la marmite dont j’apprécie et recommande toujours les recettes. Webmaster, j’ai développé des sites e-commerce avec Prestashop notamment et je m’étonne de ne voir pour cette présentation aucune des préoccupations essentielles des sites de e-commerce. Seul l’aspect « visuel » est abordé et on découvre qu’au final les sites proposés ont été entièrement fait sur mesure…. Peu prometteur pour un thème WP … Par ailleurs, le back-office, la gestion des ventes est tout de même un des points cruciaux de la vente en ligne semble inexistant … A voir ! En tous cas merci pour ces pistes…

    • Bonjour,

      Attention a ne pas tout mélanger, je n’ai pas dit que ce thème était le meilleur du ecommerce mais selon moi c’est le meilleur thème WordPress pour créer un site ecommerce sur mesure car il est justement très simple et permet de ne pas s’encombrer avec le superflu.
      Dans cet article, on parle uniquement de thème et de fonctionnalités en front-office et pas des fonctionnalités de tel ou tel CMS pour un site ecommerce.
      Il faut bien différencier le front du back office et la il s’agit avant tout de décrire les possibilités en front office car c’est le but d’un thème…

  8. Bonjour,

    Merci pour tous ces articles! Etant plus que novice j’essaye de suivre pas à pas tes conseils. Je n’arrive pas à ajouter la traduction Storefront et pourtant je l’ai installée dans wp/content/themes/storefront/languages. J’ai installée un theme enfant storefront via le plugin WP, est ce que cela pourrait expliquer que cela ne marche pas ? De plus dans le dossier de traduction il y a un fichier .pot faut il également le copier ou seulement .po et .mo ? Help!!! ET merci d’avance

    Répondre
    • Bonjour Aline,

      Le fichier .pot sert à créer un fichier .po donc il n’est pas vraiment utile dans ton cas.
      Si la traduction ne fonctionne pas, essaie de la placer dans ton thème enfant ou dans wp-content/languages/

      En tout cas seul le .mo est utilisé par WordPress, le .po est juste le fichier que l’on édite.

      Bonne continuation
      Alex

  9. Vraiment pas convaincu et c’est le moins que l’on puisse dire…
    Facile a tester puisque gratuit, je pense que tout le monde comprendra que ce thème est -à priori- sans grand intérêt. Je dis « à priori » car je suis peut-être passé à côté de quelque chose?

    Moche, minimaliste et non extensible sauf en payant. Voilà ma conclusion concernant ce thème.

    Répondre
    • Salut Filochard,

      Storefront a plus vocation à servir de thème de démarrage (starter theme) mais peut servir à des projets moins ambitieux.
      Au plaisir

  10. Bonjour,

    Tout d’abord, merci pour cette excellente présentation.
    J’ai une question concernant votre réalisation « Lafabriqueducafé » que je trouve très réussie. Je souhaiterais savoir si vous avez personnalisés le thème vous même ou vous avez acheté une extension ?
    D’avance merci.

    Répondre
    • Bonjour Enzo,

      David a personnalisé le thème lui même, en personnalisant le CSS.

      Au plaisir et merci pour votre retour sur l’article 😉

  11. Bonjour,
    Pouvez-vous nous dire quelles sont les extensions que vous avez achetés pour réaliser ce thème ?
    En effet, j’ai du mal a évaluer le travail personnel et les extensions payante dans le rendu final.
    Je souhaite customiser le thème storefront moi aussi.
    Par exemple les deux petites icones en haut à gauche (facebook et instagram), comment sont-elles ajoutées ? Modification du thème ? et comment ? ou ajout d’extensions payantes ?
    Merci d’avance

    Répondre
    • Bonjour,

      David a entièrement personnalisé Storefront en allant dans le code. Intervenir manuellement permet d’aller beaucoup plus loin qu’avec les extensions fournies.

  12. Merci pour cette réponse. C’est ce que je vais entreprendre moi aussi grâce à votre article.
    Par contre je ne sais pas bien comment traduire le thème en français ?
    Le lien sur votre article fonctionne bien mais ensuite rien ne se passe quand je clic sur « ajouter cette traduction au panier » ?!
    Faut-il faire autrement ?

    Répondre
  13. Salut Alex
    Vraiment merci encore pour cet article. Chez moi la traduction a été faite lors de l’installation. Tout est en français mais le seul problème est que sur ma page d’accueil la catégories des produits, produits récents, futurs produits … sont en anglais. Que dois je faire pour mettre ces titres en Français?

    Répondre
    • Salut,

      D’après ce que tu me dis, je dirais que tu n’as qu’à renommer tes catégories, non ?

  14. Bonjour Alex ou David, merci pour cet article très intéressant, je me lance dans le e-commerce et de trouver quelque chose de minimaliste est parfait pour moi. Cependant, je me pose la question des extensions payantes, je n’ai pas bien saisi la différence entre designer et customiser…j’aime beaucoup le résultat de SHANDOR et je souhaiterai quelque chose dans ce goût là sans trop aller toucher au code (j’ai quelques notions mais je risque de plus déguelasser le code que de l’améliorer…) vaut-il mieux choisir designer ou customiser?
    Sinon, avez vous des exemples de site faits avec storefront qui n’ont pas fait de modifications directes au code (je sais que c’est un peu antinomique de poser cette question à des webdesigner et développeurs 😉 )
    Merci.

    Répondre
    • Bonjour Clémence,

      Il faudra obligatoirement passer par le code pour obtenir des résultats similaires à ceux que David à présenté. L’extension Designer te permettra d’agir sur les couleurs et la structure de Storefront alors que Customizer n’ajoute que des options supplémentaires au thème (afficher/masquer des choses sur les pages).

      Bonne continuation

  15. Bonjour,
    merci pour cet article 🙂 je suis actuellement sur la création de mon e-commerce et j’ai sélectionné le thème STOREFRONT. Par contre je suis un peu perdu sur les extensions …
    WOOTHEMES propose les extensions :
    – Customizer 39$ ht
    – Designer 39$ ht
    – Mega Menu 39$ ht
    – Parallax 19$ ht

    Et j’ai également trouvé chez POOTLEPRESS l’extension STROREFRONT PRO qui semblerait réunir toutes les fonctionnalités en une seule extension et pour 49$ ht …

    Avez-vous un conseil, un avis sur le sujet et sur le choix ?

    Merci d’avance

    Répondre
    • Bonjour Sébastien,

      Merci pour la découverte car je ne connaissais pas PootlePress ! D’après ce que je comprends, il ne s’agit pas d’une extension qui en regroupe plusieurs mais d’une autre extension qui reprend une bonne partie des fonctionnalités proposées par celles de WooThemes (voire plus). Du coup, je te conseille de voir ce dont tu as besoin et prendre ce qui te semble le plus pertinent 😉

  16. Bonjour David et Alex,
    J’hésite entre créer un site e-commerce avec Storefront sur WP et woo commerce, ou avec prestashop (que je connais déjà), pour plusieurs raisons :
    – Est il VRAI qu’il est plus difficile de paramétrer les règlements CB sur WP que sur prestashop ?
    Pourriez-vous m’indiquer où trouver la procédure pour WP
    – Faut-il toujours éviter de passer par la banque directement ?
    – Pour un site de 3000 références, WP est il adapté au niveau de la gestion de stock qu’on dit plus limitée, et des livraisons (et en particulier pour les transporteurs ou les envois chronopost de la poste ?…).
    Votre avis m’intéresse énormément.
    Dans l’attente de vous lire,
    Laura

    Répondre
    • Bonjour Laura,

      Je n’ai pas d’expérience avec Prestashop mais avec Stripe, ce n’est pas trop compliqué de configurer le paiement (la doc de WooCommerce Stripe est dispo).

      Pour la banque, il n’y a pas de bonne réponse. Personnellement, je préfère la simplicité de Stripe (les frais sont de 1,4 % + 0,25 € pour les cartes européennes).

      Concernant l’adaptation de Woo au stock, ça pourra peut-être poser problème s’il faut le synchroniser avec le stock d’une boutique physique (quoi qu’il semble y avoir des plugins pour ça, comme mentionné dans d’autres commentaires). WPShop pourra être une alternative aussi.

      Pour les transporteurs, il faut jeter un oeil du côté du plugin EnvoiMoinsCher.
      Bonne continuation

  17. Bonjour
    J’aime beaucoup le premier site que vous donnez en exemple mais comment avez-vous agrandi les visuels complémentaires dans la fiche produit ?
    Merci d’avance

    Répondre
    • Bonjour Laurence,

      Il faut passer par le code (probablement par la fonction add_image_size() ).
      Bonne continuation

  18. Bonjour,
    Pour mémoire, « Vous n’ aurez jamais une deuxième chance de faire une bonne première impression. » est de David Swanson
    (http://dicocitations.lemonde.fr/citations/citation-11406.php)

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



114 Shares
Share53
Tweet38
Share23