Pour bien comprendre le fonctionnement Shopify, il est utile de s’intéresser à certaines fonctions dont le JavaScript. Il s’agit d’un langage de programmation de scripts essentiel dans le développement des thèmes Shopify. Tout comme le code liquid de Shopify, le JavaScript ne s’exécute que du côté serveur. En comprenant comment fonctionne le JavaScript sur Shopify, vous pouvez faire beaucoup de choses. Généralement, toute interaction sur le front-end que vous voyez sur votre magasin Shopify repose sur du code JavaScript. Dans cet article, nous allons donc parler de la manière dont fonctionne le JavaScript dans les thèmes de Shopify.
Shopify : C’est quoi ?
Avant de comprendre le fonctionnement Shopify, présentons d’abord la plateforme. Le CMS Shopify constitue une solution qui permet de créer et de gérer un site e-commerce. Étant une plateforme hébergée, dès son installation, vous pouvez tout gérer depuis votre navigateur web. Autrement dit, vous n’aurez pas besoin d’installer Shopify sur votre ordinateur avant d’ouvrir votre boutique en ligne.
Par ailleurs, Shopify fonctionne en mode SaaS (Software as a Service) et permet d’ouvrir une boutique sans grande connaissance technique. Pour cela, vous investirez dans un abonnement mensuel. Ce qui reste intéressant, c’est que la plateforme offre 14 jours d’essai gratuit. Pendant ce temps, vous n’aurez pas à souscrire à un forfait. Ainsi, vous pouvez tester et configurer votre boutique, sans pour autant perdre le travail effectué. Ensuite, vous prendrez un abonnement à partir de 29 dollars.
Selon le forfait choisi, vous disposerez des éléments nécessaires pour créer et développer votre boutique en ligne. Tout d’abord, vous bénéficiez d’une interface ergonomique, car un accent est mis sur la facilité d’utilisation. De même, la plateforme propose un large champ de fonctionnalités ainsi que des thèmes gratuits et payants. Ainsi, vous pouvez personnaliser votre boutique en ligne. En réalité, Shopify permet de modifier à peu près tous les aspects afin d’obtenir une boutique à votre convenance.
Comment fonctionne Shopify ?
Le fonctionnement Shopify est très simple. Cela se fait en différentes étapes.
Trouver le produit à vendre
Premièrement, il va falloir choisir un produit. La première étape avant d’ouvrir une boutique Shopify consistera à trouver un produit à vendre. Pour cela, vous devez identifier une niche et connaître les produits que vous voulez vendre. Quoi vendre sur Shopify ? Il existe plusieurs stratégies pour trouver des produits gagnants. Vous disposez des outils tels que Google Trends et autres qui vous permettent de trouver des idées de produits à vendre.
Par ailleurs, le tout ne suffit pas de trouver un produit tendance et de l’évaluer. Il faut savoir comment et où obtenir lesdits produits. Que vous fassiez du dropshipping ou non, il est important de trouver un bon fournisseur.
Bien évidemment, il y a d’autres étapes qui suivent le fonctionnement de Shopify. Il faudrait que vous étudiez la concurrence, rédigiez votre business plan, etc.
Choisir un nom pour votre boutique
Votre boutique en ligne est votre entreprise. Il est donc important que vous lui trouviez un nom et que vous choisissiez un nom de domaine disponible. Ensuite, il faudra créer un logo pour votre boutique. Un logo permet d’identifier rapidement votre entreprise. L’étape suivant celle-ci consistera à choisir un statut d’entreprise et vous pouvez enregistrer.
Fonctionnement Shopify : Créer une boutique de a à z
Cherchez-vous une formation Shopify gratuite en français ? Il est possible de trouver une excellente formation pour créer votre boutique Shopify de A à Z.
S’inscrire sur la plateforme
Pour commencer la création proprement dite de votre boutique, vous allez vous inscrire sur la plate-forme. Pour cela, rendez-vous sur le site officiel de Shopify pour démarrer. Ensuite, suivez les instructions. Généralement, vous aurez à insérer votre email, puis à ajouter des informations personnelles (nom, prénom, adresse, cité, code postal, etc.).
Ensuite, vous aurez également à donner des informations sur votre activité. Saisissez-les puis validez-les pour continuer. Après cela, vous accéderez à l’interface administrateur Shopify pour commencer la configuration de votre boutique. Cet espace vous permet de personnaliser l’apparence de votre magasin. Puis, vous paramétrez tout ce qui est nécessaire pour son bon fonctionnement.
Choisir un thème
C’est une étape très importante pour donner l’aspect esthétique que vous souhaitez à votre boutique. Shopify propose une variété de thèmes (gratuits et payants) soigneusement travaillés par des professionnels. En choisissant un thème, vous avez la possibilité d’y apporter des modifications sans nécessairement coder quoi que ce soit. Bien entendu, vous avez plus de possibilités de personnalisation avec les versions premium. Toutefois, avec un thème gratuit, vous pouvez créer une boutique à l’aspect professionnel.
Dans le même temps, si vous souhaitez modifier en détail votre thème, vous devez alors comprendre le fonctionnement de Shopify et de son code HTML, CSS, et plus particulièrement JavaScript. Une section est consacrée à cela dans la suite de l’article. Après avoir choisi votre thème, il va falloir le valider et l’installer sur votre boutique Shopify. À noter que par la suite, vous pouvez changer de thème selon que votre activité évolue.
Importer des produits
Connectez à votre interface administrateur Shopify et cliquez sur « Products » dans le menu à gauche. Ensuite, cliquez sur la rubrique « Add products » pour ajouter vos produits. Au fur et à mesure que vous importez vos produits, ils s’afficheront sur votre site. Dans le cadre du dropshipping, vous pouvez utiliser des applications comme Oberlo, Importify, Dropified, Modalyst, pour importer vos produits.
, CSS, et plus particulièrement JavaScript. Une section est consacrée à cela dans la suite de l’article. Après avoir choisi votre thème, il va falloir le valider et l’installer sur votre boutique Shopify. À noter que par la suite, vous pouvez changer de thème selon que votre activité évolue.
Importer des produits
Connectez à votre interface administrateur Shopif
Depuis l’interface administrateur Shopify, vous pouvez également accéder à la section « Orders (Commandes). Une fois qu’un client effectue un achat, vous verrez une commande dans cette section. Vous allez capturer le paiement pour donc recevoir de l’argent. Ensuite, vous allez expédier le produit. Dans le concept du dropshipping, vous allez payer votre fournisseur afin qu’il envoie directement le produit au client.
Rédiger des descriptions pour vos produits
Rédigez des descriptions captivantes, convaincantes et concises pour vos produits. Cela ne fera qu’augmenter vos ventes. Un moyen rapide pour amener un visiteur incertain à acheter vos produits consiste à mettre des éléments de preuve sociale dans vos descriptions. N’oubliez pas d’attirer le regard sur vos produits à travers les visuels attrayants et de qualité.
Créer des pages pour votre boutique
Vous pouvez ajouter des pages à votre boutique. Pour cela rendez-vous dans la section « Online store », puis sur « Pages », et enfin cliquez sur « Add Page ». Voici quelques pages à avoir sur votre boutique :
- Conditions générales de vente ;
- Politique de confidentialité ;
- Mentions légales ;
- Politique de remboursement ;
- À propos ;
- Nous contacter ;
- Etc.
Après avoir ajouté du contenu à vos pages, sauvegardez-les en faisant un clic sur « Save », puis publiez-les.
Ajouter des moyens de paiement
Shopify propose plusieurs passerelles de paiement (Paypal, Stripe ,et bien d’autres). Ainsi, vous pouvez récupérer les paiements effectués par vos clients sur votre boutique. Selon les passerelles choisies, le prix et les frais de transaction varieront. Choisissez vos processeurs en tenant compte des frais de transaction prélevés, des types de cartes acceptées, des paiements offlines, etc. Il est important de savoir que le processeur de paiement de Shopify qui est Shopify Payments vous épargne des frais de transaction.
Paramétrer les frais de livraison
Ceci est une étape importante pour éviter les abandons de panier. En paramétrant convenablement les frais de livraison, vous gagnez plus de clients et réalisez plus de ventes. Pour ce faire, vous pouvez mettre en place plusieurs stratégies :
- offrir des livraisons gratuites (peut-être à partir d’un montant de commande donné ou d’une quantité d’articles achetés) ;
- ajouter des transporteurs et pratiquer les frais qu’on vous facture ;
- offrir des frais d’expédition fixes ;
- etc.
Installer des applications
Dans la section « Apps », vous avez la possibilité de rajouter des applications supplémentaires pour le bon fonctionnement de Shopify. Shopify propose une multitude d’applications pour améliorer les fonctionnalités de votre boutique.
Les dernières étapes importantes pour finaliser la configuration de votre boutique consisteront à la mise en ligne, à la promotion et à la génération de trafic.
Fonctionnement Shopify : Qu’est-ce que le JavaScript ?
Le concept fondamental que vous devez comprendre avant que nous puissions aborder le JavaScript, est la différence entre le front-end et le back-end. Pour vous en donner un bref aperçu, sachez que le code frontal est ce que vous pouvez voir et modifier dans votre navigateur. Ainsi, lorsque vous utilisez des outils de développement de code, vous êtes capable de voir le CSS, le HTML et le JavaScript dans votre navigateur. Ainsi, vous pouvez les modifier instantanément. Dans ce cas, le code liquide de Shopify du code arrière-plan n’arrive jamais jusqu’au navigateur.
Fonctionnement Shopify : Comprendre la notion JavaScript
Il s’agit d’un langage qui permet de gérer la partie intelligence de vos pages web. Avec le JavaScript, vous pouvez rendre vos pages plus actives et plus faciles à comprendre aux internautes. Donc, si vous désirez améliorer vos pages web et proposer un site facile à utiliser, vous devez utiliser le JavaScript. Vous pouvez donc l’utiliser pour insérer ou calculer une valeur, améliorer la partie interface de l’utilisateur ou autres.
Fonctionnement Shopify : Comment fonctionne le JavaScript ?
JavaScript fonctionne dans un ensemble de trois éléments : le HTML, le CSS puis le JavaScript. Toute la page du code source est faite en HTML. Cela permet d’illustrer tout ce qui se passe sur la page. Le CSS quant à lui est tout ce qui fera la beauté de votre site internet. Il décide de quelle manière apparaîtra tel ou tel élément sur la page et vous permet ainsi de personnaliser votre page.
Maintenant que nous avons établi les bases du JavaScript, parlons de la manière dont il fonctionne. Alors, comme pour tout projet de création de site web, vous pouvez inclure une balise de script d’ouverture et de fermeture partout où vous incluez du HTML dans votre code base. Une autre possibilité est de le stocker dans un fichier JavaScript séparé et l’inclure si nécessaire. Par ailleurs, si l’exécution du JavaScript est basée sur un événement, vous pouvez directement l’insérer à l’intérieur d’un élément HTML. Il faut noter que cette méthode n’est pas une option très courante.
Première possibilité
Lorsque vous prenez par exemple le thème Début et que vous entrez dans « Actions » et cliquez sur « Edit code », vous pourrez au moins trouver les deux premiers exemples. Donc, ce que vous rechercherez, en ce qui concerne le premier exemple, c’est n’importe quel fichier.liquid qui contient du HTML. Ainsi, tous les fichiers que vous verrez devraient contenir un mélange de HTML et de shopify liquid. Si vous regardez dans « theme.liquide », en défilant vers le bas, vous constaterez qu’il y a une balise script d’ouverture et une balise script de fermeture. À l’intérieur, il y a du JavaScript. A titre illustratif, on peut le voir comme ceci : <script src= »javascript.js »></script>. Donc, vous pouvez pratiquement mettre du JavaScript partout où vous pouvez mettre du HTML dans vos fichiers de thèmes.
Deuxième possibilité
Une autre manière d’insérer du JavaScript consiste à avoir un fichier JavaScript dédié. Par exemple, dans le thème DEBUT, vous pouvez voir cela dans le dossier Assets. Ainsi, lorsque vous défilez jusqu’à « theme.js », vous pourrez voir un fichier rempli de JavaScript. Maintenant, comment inclure ce JavaScript dans votre code base actuelle. C’est assez simple. Il suffit d’aller dans la barre de recherche et de chercher « theme .js ». Vous verrez alors une balise script qui charge une ressource externe. Le fichier theme.js, se présente un peu comme ceci :
<script src » » { { ‘ theme.js’ | asset_ url }} » defer » « defer« ></script>
Rappelez-vous dans votre code base, d’utiliser le nom du fichier lui-même et non l’URL complète. Ce sont donc là deux manières d’utiliser le JavaScript pour comprendre le fonctionnement Shopify.
Troisième possibilité
La troisième possibilité, moins courante d’ailleurs, consiste à insérer une fonction JavaScript dans un gestionnaire d’événements sur l’élément lui-même. Par exemple, si vous vous rendez dans « product.template.liquid », et que vous cliquez sur Preview, vous accéderez à votre boutique. Maintenant, si vous avez des produits dans la section « Catalogue », allez sur cette option, puis sélectionnez un produit. Ensuite, faites un clic droit et appuyez sur Inspect. Dans le paragraphe qui apparaîtra, vous allez sélectionnez cette partie : « product-single_description ». Vous irez donc chercher cela dans votre code base. Ensuite, vous pouvez mettre un gestionnaire d’événements directement sur l’élément. Cela devrait donc vous être très familier si vous savez déjà comment utiliser le JavaScript dans un autre projet. C’est à peu près la même chose sur Shopify.
Vous devez juste savoir où inclure les fichiers JavaScript externes. Voilà donc les trois manières dont vous pouvez insérer du JavaScript dans votre thème Shopify. De même, comme nous l‘avons dit, partout où vous insérez du HTML qui se trouve sur l’un de ces fichiers « .liquid », vous pouvez également insérer du JavaScript. Voilà comment fonctionne le JavaScript sur Shopify.
Fonctionnement Shopify : Que retenir ?
Shopify se positionne comme le service qui vous permet de créer très facilement un site de e-commerce ou de dropshipping. Comprendre son fonctionnement est très facile et passe par plusieurs étapes.
