Intégrer une boutique Shopify dans votre site Webflow

1. Créez un compte Shopify

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.