Intégrer une boutique Shopify dans votre site Webflow
1. Créez un compte Shopify
| Étape | Plateforme | Action |
|---|---|---|
| 1 | Shopify | Créer un compte et ajouter des produits |
| 2 | Webflow | Créer la collection CMS Products avec Product ID et Component |
| 3 | Shopify | Générer le Buy Button, copier Product ID + Component |
| 4 | Webflow | Ajouter un embed avec le code Shopify dynamique |
| 5 | Webflow | Publier et tester le bouton d'achat |
Dans ce tutoriel, Sacha, cofondateur de l'agence Webflow Gemeos vous montre comment intégrer une boutique Shopify dans votre site Webflow.
Pour configurer cela sur votre site, vous aurez besoin d'un compte Shopify et de quelques articles à vendre. Une fois que vous avez fait cela, vous serez prêt pour l'étape 2.
2. Créez une collection pour vos produits dans Webflow
Dans cet exemple, je crée une collection nommée Products, avec ces champs :
Price (Number Field)
Brief Description (Rich Text Field)
Long Description (Rich Text Field)
Thumbnail Image (Image)
*Product ID (Plain Text Field)
*Product Component (Plain Text Field)
Le Product ID et le Product Component agissent comme des "identifiants uniques" pour vos produits Shopify, garantissant que Webflow extrait le bon produit pour chaque élément de la collection. Je vous expliquerais comment trouver le Product ID et le Product Component dans une étape ultérieure.
3. Ajoutez vos produits depuis Shopify
1. Allez dans l’onglet Buy Button et cliquez sur “Create a Buy Button”
2. Sélectionnez le produit que vous souhaitez vendre sur Webflow
3. Générez le code d'intégration Shopify
4. Copiez le Product Component dans le code d'intégration Shopify
5. Collez le Product Component dans le champ correspondant
6. Copiez le Product ID dans le code d'intégration Shopify
7. Collez le Product ID dans le champ correspondant
4. Ajoutez le module Shopify dans Webflow
1. Ajoutez un composant Embed dans votre page ou liste de collection (placez le là où vous souhaitez que le bouton d'achat soit)
2. Remplacez le Product Component et le Product ID dans votre Embed par vos champs Collection pour lier chaque bouton d'achat à un produit distinct. Pour ce faire, mettez simplement en surbrillance les valeurs du Product Component (il apparaît deux fois !) et du Product ID, puis cliquez sur + Add Field pour remplacer le contenu par vos propres valeurs.
5. Publiez et attendez les premières ventes
Votre Dynamic Embed est configuré, vous n’avez plus qu’à attendre les premières ventes avec webflow ecommerce.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
