Tirez parti d'extensions pour enrichir votre site web d'une boutique Shopify.

1. Création d'une boutique en ligne

Pour commencer, vous allez créer une boutique à l'aide d'une solution tierce. Dans ce tutoriel, vous utiliserez la boutique Shopify que nous avons créée pour le site Nomad Dreamers

Téléchargez l'archive nomad-dreamer-widget.zip et ouvrez le fichier NomadDreamers-start.mu. Passez en mode Conception et faites défiler la page jusqu'à la section qui figure sous « Shopify eCommerce Widget ».

Remarque : vous avez à votre disposition d'autres solutions de commerce électronique, comme Ecwid, Gumroad et Sellify.

Mode Conception

2. Installation du widget gratuit Shopify Button

Accédez au widget Shopify Button situé dans le dossier Adobe Muse Widget. Cliquez sur le bouton Get this Widget (Télécharger ce widget) pour télécharger le fichier Shopify_Button.mulib. Double-cliquez sur le fichier pour l'installer automatiquement dans votre panneau Bibliothèque.

Téléchargement du widget Shopify Button

3. Ajout du widget sur votre site

Ouvrez successivement le panneau Bibliothèque et le dossier Shopify Button, puis faites glisser le widget Shopify Button à l'endroit où vous souhaitez voir apparaître le bouton.

Ajout du widget

4. Ajout d'une collection Shopify au widget

Sélectionnez le widget et cliquez sur l'icône d'options bleue pour ouvrir le panneau Shopify Options (Options Shopify). Saisissez nomad-dreamer-fan-site en regard du champ Shopify Name (Nom Shopify). Saisissez 32815617 en regard du champ Shopify Collection ID/IDs (ID de collection Shopify).  

Conseil : vous pouvez utiliser l'ID de la collection de votre choix associée à votre boutique Shopify. Cet identifiant apparaît dans la dernière partie de l'URL de la collection. Par exemple : nomad-dreamer-fan-site.myshopify.com/admin/collections/32815617. Pour en savoir plus sur les collections, consultez le site shopify.com. 

Ajout d'une collection Shopify

5. Finalisation de la page

Le widget Shopify Button utilise un style graphique pour lier les objets à la boutique. Vous pouvez utiliser le bouton par défaut ou bien appliquer le style shopify-button aux objets de votre choix sur la page pour les relier à votre boutique. 

Pour terminer la page à l'aide du bouton par défaut, sélectionnez simplement l'objet bouton et dupliquez-le au moyen de la fonction copier-coller. Faites ensuite glisser les boutons aux emplacements souhaités. 

Facultatif : essayez d'utiliser un autre objet comme bouton. Cliquez sur l'image de l'album située en regard d'Americanized et appliquez le style graphique shopify-button.

Finalisation de la page

 

Et voilà, vous avez terminé ! Donnez-nous votre avis sur ce tutoriel.

 

12/19/2016

Contributors: 123Muse.com, Chris Kellet, Ali Pordeli

Cette page vous a-t-elle été utile ?