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

Aucun autre tutoriel pour cette catégorie pour le moment.
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé 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 designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps