Comment créer un site e-commerce avec OpenCart

En aidant mon ami à lancer son site e-commerce OpenCart, j’ai décidé de composer un manuel pratique pour tous désireux d’ouvrir leur propre magasin en ligne. Si vous êtes un de ces désireux, OpenCart est une option idéale pour vous; même si vous croyez que vous n’avez pas assez d’expérience pour créer quelque chose de pareil, ce n’est pas grave. Il y a tant d’outils accessibles en ligne en ce moment.

En tant qu'entreprise disposant d'un très grand catalogue du modèle de commerce électronique, nous nous efforçons de montrer et d'expliquer à nos clients pourquoi la création de votre propre magasin est simple comme bonjour.

Par exemple, jetez un coup d'œil aux meilleurs modèles OpenCart de notre portfolio.

---

Fooder - Modèle OpenCart pour pizzerias avec le système de commandement en ligne

Démo | Acheter

---

Modèle OpenCart Adaptatif pour systèmes audio d’auto

Démo | Acheter

---

Modern Furniture - Modèle OpenCart Adaptatif pour sites de décoration d’intérieur

Démo | Acheter

---

Fresh Food - Modèle OpenCart pour Magasin d'aliments sains et biologiques

Démo | Acheter

---

Ouvrez n’importe-quel navigateur de recherche et entrez le chemin d’accès vers OpenCart dans la barre d’adresse du navigateur (par exemple http://your_domain_name/opencart ). Vous verrez la page d’installation OpenCart:

1. La licence d’installation
2. L’étape préliminaire
3. Configuration
4. Prêt – lancez!

La licence d’installation

Lisez le contrat de licence OpenCart et cliquez sur le bouton “Continue”(Continuer) si vous êtes d’accord.

---

L’étape préliminaire

A la seconde étape, OpenCart vérifiera si vos paramètres de l’hébergement correspondent à ceux qui sont exigés, et si les fichiers et les dossiers permis sont indiqués correctement.

---

La configuration

A l’étape de configuration, il faut indiquer les détails sur votre base de données. Entrez les détails que vous avez utilisés:

• le serveur de base de données;
• le nom de base de données;
• l’identifiant de base de données.

Si vous avez des problèmes en entrant les infos sur votre base de données, contactez votre fournisseur d’hébergement. Il faut aussi créer un utilisateur-admin de votre site e commerce. Entrez votre nom, mot de passe et l’adresse courriel de l’administrateur. Vos détails indiqués seront utilisés pendant la connection sur la partie arrière de votre site.

---

Prêt – lancez!

C’est la dernière étape de l’installation d’OpenCart. Vous avez deux variantes possibles: soit vous serez redirigé vers votre site OpenCart soit vers le panneau d’administration OpenCart.

Attention! Supprimez le dossier “install” à partir de votre serveur. Vous ne pourrez pas parvenir sur votre site si le dossier reste sur votre serveur.
L’installation est terminée. Pour ouvrir la page de votre site, entrez votre nom de domaine dans la barre d’adresse du navigateur. Pour accéder au panneau d’administration OpenCart, entrez nom_de_domaine/admin.

---

Au cas où vous avez déjà un site e commerce OpenCart prêt et vous ne voulez changer que son apparence à l’aide d’un thème, utilisez la méthode d’installation suivante.
1) Pour installer un modèle OpenCart, téléchargez les fichiers sur le serveur. Trouvez l’archive “themeXXX(update).zip” dans le dossier OpenCart, il devrait être dézippé sur votre ordinateur.
2) Ensuite, téléchargez les fichiers dézippés au répertoire racine de l’installation OpenCart. Vous pouvez consulter les instructions détaillées de la vidéo sur ce comment télécharger les fichiers sur le serveur.
3) Parvenez sur votre site dans n’importe-quel navigateur de recherche et ajoutez le mot “/install” en arrière de l’URL de votre site dans la barre d’adresse du navigateur (par exemple, http://votre_nom_de_domaine/opencart/install).
4) Cliquez sur le bouton Continue. Attendez un peu.
5) Parvenez sur le panneau d’administration, sélectionnez Extensions – Extension Installer et téléchargez les fichiers d’archive du thème XXX. Si tous les fichiers ont été téléchargés, allez sur Extensions – Modifications et cliquez Recharger la page dans un coin à droit en haut de l’écran.
6) A l’étape suivante, suivez System – Settings, allez sur l’onglet du Magasin et sélectionnez le modèle XXX dans le champ du Modèle.

---

L’installation de modules inclut de nombreuses étapes. Allez sur votre panneau d’administration (en ajoutant /admin à l’url de votre site dans la barre d’adresse du navigateur – votresite.com/admin).
Parvenez sur Extensions – Extensions.

Choisissez Modules dans le menu déroulant avec les types d’extensions.

Vous verrez la liste de modules installés et prêts à être installés. Si vous voyez le bouton Unistall à côté d'un module, cela signifie que le module est déjà installé.

On peut modifier les paramètres de modules en cliquant sur Edit (éditer).

En cliquant sur le bouton Install, on peut commencer à installer le module.

Pour supprimer le module, cliquez sur le bouton Uninstall (Désinstaller).

Après l’installation du module il faut le configurer. Les paramètres de chaque module seront différents, mais la zone d’état reste la même pour tous – ici vous pouvez d’activer/désactiver le module.

Pour ajouter le module sur la page quelconque, naviguez la liste de pages.

Sélectionnez Design – Layout (Mise en Page) dans le menu latéral.

Dans la liste de pages sélectionnez la page où vous voulez ajouter le module et cliquez sur Edit (éditer).

Vous allez voir la liste de modules et les positions de modules qui ont été déjà ajoutés sur la page.

On peut mettre les modules sur les positions suivantes:
1) dans l’en-tête (en haut);
2) dans la colonne à gauche (le panneau à gauche);
3) dans la colonne à droite (le panneau à droite);
4) en haut du contenu;
5) en bas du contenu.

Le champ de l’ordre de tri présente l’ordre des modules attribués à la même position. Pour ajouter un module à la page, cliquez sur Add Module (Ajouter un Module). Sélectionnez le module et la position nécessaire, puis cliquez sur Save (Sauvegarder). Voilà, vous avez fini l’installation du module.

Les réglages présentés:
– Module name (le nom de module);
– Width (la largeur de l’image de module);
– Height (la hauteur de l’image de module);
– Blur (activez/désactivez l’effet de floutage de l’image si elle est trop petite);
– Direction (la direction du mouvement Parallax. Normal – les mouvements Parallax dans les directions opposées; Inverse – dans les directions parallèles).
– Speed (Rapidité) – établit la vitesse de l’effet Parallaxe, proche du taux de base. Valeur: de 0 à 2.
– Status – le statut de module (valide/invalide).

---

Le module de Megamenu TM permet de créer les menus complexes. Vous avez la possibilité d’afficher un seul produit (sans sous-menus), un produit avec un sous-menu et un produit avec un sous-menu de plusieures colonnes et lignes. Ce module peut être placé dans les positions différentes, mais avec le même contenu.
Pour activer le megamenu, il faut aller sur Extensions – Modules -TM Megamenu, cliquer Edit sur le produit nécessaire et choisir l’option d’activation dans la fenêtre qui vient d’apparaître.

---

Des éléments de Megamenu. Des éléments principaux dans le Menu Racine.

Maintenant, on commence à éditer le megamenu. Pour éditer les paramètres du megamenu, accédez au panneau d’administration de votre site et sélectionnez Extensions – Modules – TM Megamenu – TM Megamenu page, comme c’est montré sur la copie d’écran ci-dessous. Sur la prochaine page, vous pouvez créer, supprimer ou éditer les éléments de menu.

Cliquez sur l’un des éléments de menu pour commencer l’édition. Remplissez les champs suivants:

Menu Item type – type de menu (ordinaire/megamenu);

L’option “Custom”(sur mesure):

Vous avez des points suivants:
– Menu title – nom du menu;
– Menu link – lien du menu;
– Show megamenu – montrer le megamenu.

Si l'option "Afficher le megamenu" (3) est définie sur "Oui", les champs supplémentaires suivants apparaissent. Remplissez ces champs:

• Columns count – le nombre de colonnes;
• Columns per row – le nombre de colonnes par ligne;
• Background image – l’image d’arrière-plan;
• Background image width – la largeur de l’image d’arrière-plan;
• Background image height – la largeur de l’image d’arrière-plan;

Ayant rempli le champ “Columns count”, vous activez des options suivantes:
“Column N”. Remplissez les onglets ci-dessous:
– Columns width – la largeur de colonne;
– Columns content – le contenu de colonne;
– Categories (Products) limit – le maximum de catégories, qu’on peut présenter dans une seule colonne;
– Module – le nom de module affiché;
– Category name – le nom de catégorie;
– Show Category name – montrer le nom de catégorie.

L’option “Category”(Catégorie):

-Menu item submenu type – le type de sous-menu;

Ayant sélectionné le type de “Megamenu” dans la zone “Menu item type”, vous pouvez régler les paramètres supplémentaires:

• Columns count – le nombre de colonnes;
• Columns per row – le nombre de colonnes par ligne;
• Background image – l’image d’arrière-plan;
• Background image width – la largeur de l’image d’arrière-plan;
• Background image height – la hauteur de l’image d’arrière-plan;Ayant rempli le champ “Columns count”, activez les options suivantes: “Column N”. Remplissez les lignes suivantes:

– Column width – la largeur de la colonne;
– Columns content – le contenu de la colonne;
– Categories (Products) limit – la quantité maximale de catégories ou de produits à présenter dans une seule colonne;
– Module – le nom de module présenté.

---

Parvenez sur Extensions – Extensions

Choisissez Modules dans le menu déroulant avec les types d’extensions

Trouvez le module de logo. Cliquez sur le bouton Edit (éditer) pour configurer le module.

Vous verrez la fenêtre des réglages comme celle présentée ci-dessous:

Les réglages disponibles:
– Module Name – le nom de module;
– Width – indiquez la largeur de l’image de logo en pixels;
– Height – indiquez la hauteur de l’image de logo en pixels;
– Status – l’état de module (activé/désactivé).

---

Comment construire et configurer les mises en page

Naviguez vers Extensions – Extensions.

Sélectionnez Modules dans le menu déroulant des types d’extensions.

Trouvez la section du Constructeur des Mises en Pages TemplateMonster. Cliquez sur le bouton Edit pour configurer le module existant.

Vous serez redirigé vers la fenêtre des paramètres:

Voici les réglages fondemantaux de module:
– Status – l’état de module (Activé/Désactivé);
– Module Name – le nom de module;
– Module Class – le type de module;
– Module ID – l’ID de module.

Pour créer une nouvelle mise en page, cliquez sur le bouton New Layout View.
Le module a quelques boutons disponibles, qui facilitent largement le processus d’édition. Examinons-les plus en détail:
1) Cliquez Add Column(ajouter la colonne). Ayant cliqué sur ce bouton, vous pourrez ajouter des lignes. Cette option a quelques sections disponibles:
2) Ayant ajouté la colonne, insérez une ligne. Pour faire ceci, cliquez sur le bouton Add Row(ajouter une ligne). La quantité de colonnes dans la ligne est illimitée, mais vous pouvez ajouter autant de colonnes que vous voulez. La largeur de colonnes peut être établie après leur ajout à l’aide du principe Drag-and-Drop en déplaçant la frontière droite de colonne.
3) Le bouton Delete(supprimer) permet de supprimer toutes le colonnes inutiles.
4) Ayant cliqué sur le bouton Edit, vous verrez la fenêtre pop-up avec l’outil de personnalisation splendide, permettant de modifier le style de la colonne/de la ligne. Il vous aidera à régler l’arrière-plan de votre site et à modifier les valeurs marginales de vos blocs.
5) Ayant ajouté les colonnes, ajoutez-y du contenu (modules). Pour ajouter un module, cliquez sur le bouton Add Widget (ajouter un widget) et sélectionnez le widget nécessaire dans le menu déroulant. Vous pourrez obtenir l’interface des réglages de module via le Constructeur de Mises en Pages, en cliquant sur le bouton “edit” dans le bloc de module.
6) Cliquez sur le bouton ”Delete” pour supprimer la colonne dont vous n’avez pas besoin.
7) Le bouton Edit vous permettra d’ajuster le style de la colonne. On l’a déjà mentionné ci-dessus.
8) Duplicate est un autre outil excellent permettant de doubler les colonnes sans devoir les copier manuellement.
9) L’option de triage permet de changer l’ordre de colonnes.

Ayant configuré toutes les lignes, colonnes et modules, sauvegardez le module du Constructeur et affichez-le sur l’une des positions possibles sur la page d’accueil de votre site.

---

Le Module de Panier d’achat est une extension, permettant d’ajouter le panier d’achat sur votre site.

Sélectionnez Extensions – Extensions.

Choisissez Modules dans la liste apparaissante des types d’extensions.

Trouvez le module du panier d’achat TemplateMonster. Cliquez sur le bouton Edit pour configurer le module.

Vous serez redirigé vers la fenêtre des paramètres:

Sélectionnez Disable dans le menu déroulant de l’état de module pour le désactiver.

---

1) Naviguez Extensions – Extensions.
2) Choisissez Modules dans le menu déroulant des types d’extensions.
3) Trouvez la section TM Footer Link. Cliquez sur le bouton Edit pour configurer le module déjà existant.
4) Vous serez redirigé vers la fenêtre des paramètres:
– Module Name – le nom de module;
– Links Group – choisissez le groupe de liens que vous voulez afficher en pied de la page;
– Status – définissez le statut du module (activé/désactivé).

Frontend:

– Le Nom de Module – TM Footer Links Information;
– Links Group – information;
– Status – activé.

---

Tout le monde sans exception veut commencer à gagner en ligne. Qu’est-ce que vous attendez encore? OpenCart est l’un de plateformes excellentes, permettant de lancer votre propre site e-commerce et de construire une entreprise réussie sans écrire une seule ligne de code.
Si vous n’avez pas encore créé votre site e commerce, n’hésitez pas à naviguer notre catalogue des modèles pour sites premium, où vous trouverez sans doute quelque chose qui convient à votre entreprise.