Passer au contenu principal
Toutes les collectionsIntégrez avec Shopify
3 - Intégrer un widget ou widget dynamique
3 - Intégrer un widget ou widget dynamique

Avec l'extension Shopify

Edouard Short avatar
Écrit par Edouard Short
Mis à jour il y a plus de 2 semaines

Attention, pour intégrer vos produits via l'extension Shopify, vous devez être connecté à Shopify sur le Studio. (Lien vers la doc de connexion a Shopify).

Intégrer un widget dans un template Shopify

👩‍💻 Tutoriel vidéo

Pour intégrer :

  1. Sur Shopify :

    Ajoutez un bloc dans votre template et sélectionnez l'application JOIN appelée Widget ou Sticky Widget.

  2. Dans le Studio JOIN :

    Créez un widget ou rendez-vous sur la page d'un widget existant.

  3. Dans l'onglet Intégration :

    Copiez les champs Alias et CLS configuration et remplissez les champs correspondant dans la configuration du bloc sur Shopify. (Pas de configuration de CLS pour le sticky widget)

Si la forme ou la taille du widget est modifié, il faudra modifier les configurations CLS pour une expérience optimale.

Intégrer un widget dynamique dans une page produit

👩‍💻 Tutoriel vidéo

Pour intégrer un widget par page produit avec une intégration unique :

  1. Sur Shopify :

    Ajoutez un bloc dans votre template de page produit et sélectionnez l'application JOIN, appelée Product Widget.

  2. Dans le Studio JOIN :

    Créez un widget par défaut pour garantir qu'aucun espace vide n'apparaisse si aucun widget spécifique n'a été configuré pour un produit.

  3. Dans l'onglet Intégration :

    Récupérez les valeurs Alias et CLS configuration, puis remplissez les champs Fallback Alias et CLS configuration dans la configuration du bloc Shopify.

    Le widget devrait s'afficher sur toute les pages ayant ce template.

  4. Pour ajouter un widget spécifique à un produit :

    Créez un widget avec pour alias l'ancre du produit, que vous le pouvez récupérer à la fin de l'URL de la page produit.

Attention, la forme et taille de chaque widget doit être la même afin de ne pas créer de CLS sur votre site.

Avez-vous trouvé la réponse à votre question ?