Thème Storefront : comment l'installer et le configurer

Publié: 2018-01-12

Storefront est l'un des thèmes les plus flexibles et les plus extensibles lorsqu'il s'agit de lancer une boutique WooCommerce à l'aide de WordPress.

En raison de son architecture de code propre, il est devenu extrêmement populaire parmi les utilisateurs et actuellement plus de 100 000 magasins en ligne utilisent Storefront comme thème WordPress.

Installation du thème WooCommerce Storefront

Vous pouvez installer le thème Storefront de deux manières, soit en recherchant le thème à partir de votre tableau de bord WP, soit en téléchargeant le thème manuellement.

Installation à l'aide du tableau de bord WordPress

Le moyen le plus rapide d'installer Storefront est via le tableau de bord WordPress. Suivez ces étapes pour installer Storefront via le tableau de bord WordPress.

Allez dans Apparence > Thèmes > Ajouter un nouveau
Tapez « storefront » dans le champ de recherche et appuyez sur Entrée.
Survolez la capture d'écran Storefront.
Sélectionnez le bouton ' Installer '.
Cliquez sur Activer

Installation manuelle de Storefront

Téléchargez la dernière version de Storefront sur wordpress.org
Allez dans Apparence > Thèmes > Ajouter un nouveau
Cliquez sur Télécharger le thème et choisissez le fichier zip précédemment téléchargé.
Cliquez sur Installer maintenant
Cliquez sur Activer

Configuration de la page d'accueil

Storefront a un modèle de page d'accueil intégré qui est bien pensé. Sa structure épurée aidera votre public à trouver facilement les produits que vous vendez.

Il y a 6 sections dans le modèle de page d'accueil Storefront par défaut. Mais vous pouvez ajouter ou supprimer la section en fonction de vos besoins.

Sections de la page d'accueil par défaut :

Contenu de la page
catégories de produits
Produits recents
Produits populaires
Produits populaires
Produits en vente
Produits les plus vendus

Attribuer un modèle de page d'accueil

Pour configurer le modèle de page d'accueil, procédez comme suit :

Allez dans Tableau de bord -> Pages et créez une page intitulée « Accueil » ou tout ce que vous voulez.
Ajoutez tout contenu de bienvenue que vous aimez, qui sera affiché au-dessus des produits.
Sur le côté droit, vous trouverez une boîte intitulée « Page Attributes »
Sélectionnez « Page d' accueil » dans la liste déroulante « Modèle ».
Cliquez sur Publier ou Mettre à jour pour enregistrer la modification.

Affichage du modèle de page d'accueil

Après avoir publié la page, vous devez maintenant afficher cette page d'accueil comme page d'accueil de votre site Web. Ainsi, quiconque atterrit sur votre site Web voit d'abord cette page. Pour configurer cela, suivez ces étapes :

Accédez à Tableau de bord > Paramètres > Lecture
Sous Votre page d'accueil s'affiche, sélectionnez Une page statique (sélectionnez ci-dessous)
Sélectionnez la page d'attribution du modèle de page d' accueil précédemment dans la liste déroulante Page d'accueil.
Cliquez sur Enregistrer les modifications

Réorganiser les sections de la page d'accueil de la vitrine

Vous pouvez modifier l'ordre des sections de la page d'accueil Storefront à l'aide de crochets ou d'un plug-in appelé Homepage Control. Suivez les étapes ci-dessous pour réorganiser les sections de votre page d'accueil :

Télécharger et installer le contrôle de la page d'accueil
Allez dans Apparence -> Personnaliser -> Contrôle de la page d'accueil
Faites glisser et réorganisez les sections en fonction de vos besoins.
Cliquez sur Enregistrer et publier pour enregistrer les modifications.

Configuration du menu de navigation

Dans le thème Storefront, vous pouvez afficher le menu à 3 endroits.

Menu principal – Apparaît juste en dessous du logo du site.
Menu secondaire – À côté du logo près du champ de recherche.
Menu portable – Menu pour les appareils mobiles.

Configuration des menus

Par défaut, si un menu principal spécifique n'est pas défini, WordPress affiche toutes vos pages en tant que menu principal. Parfois, cela déroute les utilisateurs et leur donne du mal à comprendre comment ces pages sont arrivées dans le menu.

Créer un nouveau menu et y ajouter des pages

Allez dans le panneau d'administration puis, Apparence> Menus
En haut, vous trouverez le champ Nom du menu. Écrivez le nom de votre menu ici.
Du côté gauche, cliquez sur Pages (en supposant que vous souhaitez ajouter des pages au menu)
Cliquez sur Afficher tout pour obtenir une liste de toutes les pages publiées.
Cochez les pages que vous souhaitez voir apparaître dans le menu.
Après avoir sélectionné la page, cliquez sur le bouton Ajouter au menu.
Faites glisser et déposez l'élément de menu pour les réorganiser selon votre goût.
Cliquez sur Enregistrer le menu

Affectation du menu

Après avoir créé le menu, affectez le menu à l'emplacement où vous souhaitez qu'il s'affiche. Accédez à Apparence > Menus > Paramètres de menu et vérifiez l'emplacement à partir de la case à cocher Afficher l'emplacement .

Ajouter des catégories de produits à votre menu

Allez dans le panneau d'administration puis, Apparence> Menus
Cliquez sur Options d'écran en haut à gauche et vérifiez les catégories de produits
Maintenant, dans le volet de gauche, un onglet Catégories de produits apparaîtra.
Cliquez sur l'onglet Catégories de produits pour développer, sélectionnez les catégories
Après avoir sélectionné, cliquez sur le bouton Ajouter au menu .
Faites glisser et déposez l'élément de menu pour les réorganiser selon votre goût.
Cliquez sur le menu Enregistrer

Paramètres des widgets

Storefront vous permet d'afficher six régions de widgets dans 3 zones différentes.

Barre latérale - À gauche ou à droite du contenu principal du site,
Sous l'en-tête - Juste en dessous de l'en-tête du site et au-dessus du contenu.
Colonne de pied de page 1 - Zone de pied de page
Colonne de pied de page 2 - Zone de pied de page
Colonne de pied de page 3 – Zone de pied de page
Colonne de pied de page 4 – Zone de pied de page

Configuration de WooCommerce

Installation de WooCommerce

Allez dans Tableau de bord > Plugins > Ajouter nouveau > Plugins de recherche
Recherchez "WooCommerce".
Cliquez sur Installer maintenant .
Cliquez sur Activer .

Configuration de WooCommerce

Après avoir activé WooCommerce, vous serez invité à installer WooCommerce avec un assistant. Il se chargera de tous les réglages initiaux. Il est divisé en 6 parties.

Configuration de la page – Configure automatiquement les pages essentielles (boutique, panier, paiement, mon compte).
Emplacement du magasin - Configurer l'emplacement du magasin, la devise et la taxe de vente
Expédition - Configurer l'unité de poids et l'unité de dimension
Paiements – Configurer la passerelle de paiement.
Thème – Installez un thème compatible WooCommerce.
Prêt - (facultatif) Autorisez WooCommerce à collecter des informations d'utilisation.

Vous pouvez tous ces paramètres quand vous le souhaitez à partir du tableau de bord WooCommerce.

Ajouter un produit à WooCommerce

Accédez au tableau de bord WordPress
Cliquez sur Produits > Ajouter un nouveau
Écrivez le nom ou le titre de votre produit dans le champ Nom du produit.
Écrivez la description de votre produit dans l'éditeur ci-dessous.
Vous devez maintenant télécharger une image en vedette de votre produit et une image supplémentaire dans une galerie de produits.
À droite, vous trouverez une boîte intitulée Image du produit et galerie de produits
Téléchargez l'image sélectionnée sur l'image du produit et des images supplémentaires sur la galerie de produits
Cliquez sur Publier .

Configuration du prix et de l'attribut du produit

Pour configurer le prix du produit Allez dans Tableau de bord > Produits et sélectionnez n'importe quel produit. Ensuite, faites défiler jusqu'à la section Données sur le produit. Voici une brève description de tous les paramètres de la section des données produit :

type de produit

Produit simple : Un seul produit simple.
Produit groupé : Produit faisant partie d'une collection.
Produit externe/affilié : Produit qui est répertorié sur votre boutique mais le produit réel est vendu ailleurs.
Produit variable : Un produit avec des variations (taille, couleurs)
Produit virtuel : Un produit qui ne nécessite pas d'expédition.
Produit téléchargeable : Un produit où vous devez fournir un fichier téléchargeable.

Général

Prix régulier : Prix régulier du produit.
Prix de vente : Prix du produit remisé.

Inventaire

SKU : L'unité de gestion des stocks (SKU) suit les produits
Gérer le stock : Activer la gestion des stocks
Etat du stock : Indique si le produit est en stock ou en rupture de stock.
Vendu à l'unité : Peut être vendu en une seule commande.

Expédition

Poids : Poids du produit.
Dimensions : Longueur, largeur et hauteur du produit.
Classe d'expédition : Regroupez les produits de type similaire à certaines méthodes d'expédition.

Produits liés

Ventes incitatives : affichez les produits associés sous une page de détails du produit.
Ventes croisées : affichez les produits associés sur la page du panier.
Attributs : sélectionnez l'attribut global de vos produits.

Avancé

Note d' achat : Note à envoyer au client après avoir finalisé l'achat.
Ordre du menu : Position de commande personnalisée pour ce produit.
Activer les avis : Activez ou désactivez les avis sur les produits.

Personnalisation de la vitrine

Comment ajouter un logo

Suivez ces étapes pour ajouter et afficher le logo sur votre site Web :
1. Allez dans WordPress Admin puis Apparence > Personnaliser
2. Allez ensuite dans Identité du site > Logo
3. Cliquez sur Sélectionner un logo pour télécharger l'image de votre logo. (Taille d'image recommandée : 470px X 110px)
4. Cliquez sur Publier.

Où télécharger le favicon du site

Suivez ces étapes pour ajouter et afficher un favicon sur votre site Web :
1. Allez dans WordPress Admin puis Apparence > Personnaliser
2. Ensuite, allez dans Identité du site> Icône du site
3. Cliquez sur Sélectionner une image pour télécharger l'image de votre logo. (Taille d'image recommandée : 512px X 512px)
4. Cliquez sur Publier.

Comment modifier l'archive des articles ou la mise en page du blog

Allez dans Apparence > Personnaliser > Blog Customizer > Post Archives
Sélectionnez la mise en page à partir de la mise en page Post Archive
Cliquez sur Publier

Comment changer l'archive des articles ou la colonne du blog

Allez dans Apparence > Personnaliser > Blog Customizer > Post Archives
Sélectionnez le numéro de colonne (pleine largeur, 2 colonnes, 3 colonnes et 4 colonnes) dans la colonne Post Archive
Cliquez sur Publier

Comment modifier la disposition d'un article ou d'un article unique

Allez dans Apparence > Personnaliser > Personnalisateur de blog > Message unique
Sélectionnez la mise en page à partir de la mise en page d' un seul article
Cliquez sur Publier

Comment changer la police

Allez dans Apparence > Personnaliser > Styles généraux > Typographie
Sélectionnez la police dans les appariements de polices
Cliquez sur Publier

Personnalisation de WooCommerce

Comment changer la mise en page de la boutique

Allez dans Apparence > Personnaliser > WooCommerce > Page Boutique – Listes de produits
Sélectionnez la mise en page à partir de la mise en page des archives de produits
Cliquez sur Publier

Comment modifier la mise en page des détails du produit

Allez dans Apparence > Personnaliser > WooCommerce > Page Boutique – Listes de produits
Sélectionnez la mise en page à partir de la mise en page de l'archive de produits
Cliquez sur Publier