E-commerce

Intégrer une boutique Shopify dans votre site Webflow

outils :
Illustration croce

Sommaire

1. Créez un compte Shopify

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.

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail