Créer son site ecommerce professionnel | Blogger

Blogger 2,684

ecommerce2
Détails du cour
  • Prix
    Gratuit
  • Niveau:
    de A à Z
  • Durée:
    60 minutes
  • Lieu:
    En ligne

En suivant ce tutoriel vous serez capable de créer votre prorpre site ecommerce, par conséquence vous serez capable de commercialser vos produits sur le net facilement.

  • Installation du template
  • La version mobile
  • Ajouter votre logo
  • La création d'un menu
  • Slide show
  • formulaire de contact
  • Réseau sociaux
  • Page statiques ( FAQ - à propos de nous)
  • Ajouter des produits
  • Traduire son site
  • Personnaliser les paramètres
Dorénavant vous n'êtes plus besoin d'un développeur web pour créer ton Ecommerce
 
Télécharger  le template

1- L'instalation du template

Extraitre le dossier que vous avez téléchargé auparavant, portant le nom SpotCommerce-template-xml, accéder au dossier

install2

Ouvrez le fichier avec le programme Notpad++ ou un autre éditeur comme bloc note

install3

Cliquez sur le  bouton droit puis selectionner tout

install4

cliqueez une autre fois sur le bouton droit "copier"

install5

Accéder maintenant à ton compte blogger,  clique sur le menu "Thème"  puis  le bouton "modifier le code html"

install6

Selectionne le code html et clique sur le bouton du clavier "effacer"

install7


Ensuite coller le code que vous avez déjâ copié et cliquez sur Enregistrer le thème

install8


2- La version mobile

Pour activer la version mobile cliquez sur le menu THEME qui se trouve à gauche.

2 mobile1

Ensuite  cliquez sur non, affiche le thème Web sur les appareils mobiles

2 mobile2


3- Ajouter votre Logo

Cliquez sur Mise en page en suite dans la section Header 1- section cliquez sur modifier.

3 logo 1

Selectionner votre logo de préférence la taille du logo doit être (87x46 px)

3 logo 2


4- La création des menus

Cliquez  sur mise en page puis dans la section section header ensuite  cliquez sur modifier comme vous voyez sur l'image ci-dessous.

4 menu 1

Pour chaque élément du menu menu on doit ajouter le nom et le lien ensuite cliquez sur le bouton Ajouter ce lien et Enregistrer pour appliquer les modifications. vous pouvez déplacer l'ordre les élléments du menu en utilisant les flèches.

le sous menu commer par ( _ ) et le sous menu du sous menu commece par deux tirés (__sous menu)
La structure d'un lien vers une catégorie

https://nom-du-blog.blogspot.com/search/label/nom de la catégorie
exemple :
https://bloggerdevenirprofessionnel1.blogspot.com/search/label/vetement-femmes

4 menu 2


5- Ajouter l'image de l'arrière plan du Slide show

Cliquez sur Mise en page puis dans la section Header-1 section modifier l'image du Background (l'arrière plan); dans la page configurer l'image choisissez votre image pourtant la taille doit être 2400x1500 px.

5 slide show


6- Personnaliser le Slide Show

Cliquez sur mise en page, vous trouverez dans la partie Slider-section cinq slides par défaut, vous pouvez les modifier, supprimer ou ajouter d'autre slide.

5 slide show 2

 

Pour personnaliser votre slide vous devez respecter ces recommandations.

Titre se compose de deux parties
exemple : Grand Titre [sous titre]

Légende : description de votre produit à ne pas dépasséer 2 lignes [Texte du boutton]

5 slide show 3


7- formulaire de contact [ l'image de l'arrière plan ]

Cliquez sur mise en page puis dans la partie Horizon section cliquez sur modifier image background et ajoutez votre image, la taille doit être 1920x1080 px

6 contact form 1


8- Formulaire de contact [Directly]

dans cette partie vous pouvez ajouter des informations telles que votre téléphone, email et adresse ou toutes données permettant à vos clients de vous contacter.

6 contact form 2


9- Ajouter vos réseaux sociaux

Dans cette partie vous pouvez ajouter des liens vers tes pages de réseau sociaux, vous n'êtes pas besoin de chercher les icônes tout est installé.
Cliquez sur mise en page, partie footer

7 social media


10 - Ajouter des pages Statiques

Créer deux pages statiques une pour à propose de nous et une deuxième pour les questions réponses

Cliquer sur page puis nouvelle page, n'oubliez pas de cliquer sur publier lorsquez vous terminez votre travail.

8 page 1

Ajouter le titre et le contenu de votre page et cliquer sur publier

8 page 2

Une fois que vous avez publié tes pages cliquer sur mise en page dans la partie Footer2-section cliquez sur modifier et cochez les pages à affichez sur ton site web.

8 page 3


11- Activer préférences de recherches

afin que votre site soit plus facile à trouvez sur les moteurs de recherches, la decription ne doit pas dépasser 150 caractères Paramètres - Préférences de recherche - ajoutez la description

9 préférences de recherches


12- Ajouter les produits

Cliquez sur articles -- nouvelle article pour ajouer un nouveau produit vous devez respecter ces recommandations

Le prix comme par un tiré de 8 _ : exemple _50 sans mentionner la devise
Dans le champ libellés respectez cette structure : prix, ancien prix, catégorie, sous catégories

exemple : _50,65,tshirt,vetement hommes (voir la vidéo)

9 produit

Les paramètres à respecter

9 produit 2


13- Traduire votre site

Comme je vous ai mentionné dans la vidéo vous pouvez traduire votre site manuellement.
cliquez sur mise en page, adlin setting en bas de la page puis cliquez sur translator

si je veux par exemple traduire Add 1 items to cart -- Ajouter 1 produit à la carte
je traduis d'abord Add - Ajouter et ensuite je traduis items to cart - produit à la carte

10 translate


14- Les variables à modifier

il existe un certain nombres de variables à modifier comme les modalités de paiements, le nombre de champ dans le formulaire de reservation, la devise....

10 variables

Vour trouvrez une liste de variables ci-dessous

 

  • Code promo: entrez votre liste de codes promo. Par exemple, si vous souhaitez désactiver 25% pour tout organisme possédant un coupon XMAS25, vous devez saisir une valeur pour cette variable: XMAS25: 25%. Si vous voulez 25% de réduction pour XMAS25 et 5 $ pour NEWY, vous devez saisir: XMAS25: 25% / NEWY: 5. N'oubliez pas, n'incluez pas le symbole monétaire dans la liste des coupons
  • CURRENCY_CODE: le code de devise de votre pays, généralement accompagné de 3 lettres. Vous pouvez entrer le code de votre choix, mais si le code ne figure pas dans la liste ci-dessous, assurez-vous également de définir CURRENCY_SIGN pour votre symbole monétaire. Vous trouverez ci-dessous la liste de certains codes de devise valides:

    • AUD: Australian Dollar
    • CAD: Canadian Dollar
    • EUR: Euro
    • GBP: British Pound
    • JPY: Japanese Yen
    • USD: U.S. Dollar
    • NZD: New Zealand Dollar ($)
    • CHF: Swiss Franc
    • HKD: Hong Kong Dollar ($)
    • SGD: Singapore Dollar ($)
    • SEK: Swedish Krona
    • DKK: Danish Krone
    • PLN: Polish Zloty
    • NOK: Norwegian Krone
    • HUF: Hungarian Forint
    • CZK: Czech Koruna
    • ILS: Israeli New Shekel
    • MXN: Mexican Peso
    • BRL: Brazilian Real
    • MYR: Malaysian Ringgit
    • PHP: Philippine Peso
    • TWD: New Taiwan Dollar
    • THB: Thai Baht
    • TRY: Turkish Lira
    • RUB: Russian Ruble
    • VND: Vietnam Dong
    • RON: Romanian Ron
    • INR: Indian Rupee
    • IDR: Indonesia Rupiah
    • NPR: Nepalese Rupee
    • NGN: Nigerian Naira
  • CURRENCY_SIGN: Votre symbole monétaire (facultatif, l'entité html le permet). La valeur par défaut est $
  • PAYPAL_EMAIL: vos frais d'expédition par commande. La valeur doit être uniquement numérique, ne pas inclure de symbole monétaire. Le bien est: 20,00 et le mal est 20,00 $

  • SHIPPING_FEE_FOR_EACH_ITEM: vos frais d'expédition pour chaque article dans la commande. Format similaire avec SHIPPING_FEE
  • STORE_NAME: le nom de votre magasin qui s'affichera dans la méthode de paiement.
  • STORE_STREET: l'adresse de votre magasin qui s'affichera dans la méthode de paiement.
  • STORE_TOWN: l'adresse de votre ville de magasin qui apparaîtra dans la méthode de paiement.
  • STORE_STATE: l'adresse de votre province de magasin qui s'affichera dans la méthode de paiement.
  • STORE_COUNTRY: l'adresse du pays de votre magasin qui s'affichera dans la méthode de paiement.
  • STORE_POSTCODE: l'adresse de votre code postal de magasin qui apparaîtra dans la méthode de paiement.
  • BANK_ACCOUNT_NAME: le nom de votre compte bancaire qui apparaîtra dans la méthode de paiement par virement bancaire.
  • BANK_ACCOUNT_NUMBER: le nom de votre compte bancaire qui apparaîtra dans la méthode de paiement par virement bancaire.
  • BANK_ACCOUNT_BANKNAME: nom bancaire de votre compte bancaire qui apparaîtra dans la méthode de paiement par virement bancaire.
  • BANK_ACCOUNT_SORTCODE: le numéro de code de votre compte bancaire qui s'affichera dans la méthode de paiement par virement bancaire.
  • BANK_ACCOUNT_IBAN: Code iban de votre compte bancaire qui s'affichera dans la méthode de paiement par virement bancaire
  • BANK_ACCOUNT_BIC_SWIFT: swift code  votre compte bancaire qui s'affichera dans la méthode de paiement par virement bancaire.
  • DAY_FORMAT: format de la date et l'heure dd/mm/yyyy or mm/dd/yyyy or yyyy/mm/dd/ or yyyy/dd/mm
  • DEFAULT_THUMBNAIL: image miniature par défaut src qui sera utilisée pour montrer quand une publication n'a pas d'image.
  • AJAX_LOADING_IMAGE: par défaut ajax image src qui sera utilisé pour montrer lors du chargement de quelque chose dans votre site.
  • NUMBER_ITEMS_FOR_COLLECTION: les articles d'ombre apparaîtront dans la section collection. La valeur par défaut est 3 et recommande une valeur divisible pour 3
  • CART_CACHE_DURATION: nombre de jours pendant lesquels le site conservera le panier et la liste de souhaits des utilisateurs. La valeur par défaut est 7
  • SLIDER_ANIMATION_SPEED: le temps en microsecondes pour l'animation du curseur. La valeur par défaut est 1000
  • SLIDER_PAUSE_TIME: le temps en microsecondes pour le temps de pause du curseur. La valeur par défaut est 4000
  • SLIDER_CONTROL: ajoute false pour cacher next/prev button et true les activer. Default est true.
  • SLIDER_PAUSE_WHEN_HOVER: ajoute false et le slide continuera de fonctionner même en survolant la souris, ajoute true pour mettre le slide en pause lorsque la souris survole. Default is false.
  • ENABLE_DIRECT_BANK_TRANSFER: ajout false  pour désactiver "Direct bank transfer" method et  true pour l'activez. Default is true.
  • ENABLE_CHEQUE:  déactiver  activer false , activer true.
  • ENABLE_CASH_ON_DELIVERY:  activer true désactiver false
  • ENABLE_PAYPAL: activer true désactiver false
  • CURRENCY_POS:  after , Before
  • SEP_LONG_PRICE: the character that will be used to separate long price value (example: 1 000 000đ). Default is a space character.
  • ENABLE_FIELD_COUNTRY: activer true désactiver false.
  • ENABLE_FIELD_FIRST_NAME: activer true désactiver false
  • ENABLE_FIELD_LAST_NAME: activer true désactiver false
  • ENABLE_FIELD_COMPANY_NAME: activer true désactiver false
  • ENABLE_FIELD_ADDRESS: activer true désactiver false
  • ENABLE_FIELD_TOWN_CITY_STATE: activer true désactiver false
  • ENABLE_FIELD_POST_ZIP_CODE: activer true désactiver false
A PROPOS DE L'AUTEUR
l'auteur du devenir professionnel
LAHOUCINE EL HAMMANI

Notre objectif est tout simple vous faire bouger pour devenir des professionnels dans votre domaine.

Pour plus d'information n'hésitez pas à me contacter.