Webflow

Des images shoppables pour Webflow — un seul élément Embed.

Déposez un élément HTML Embed sur n'importe quelle page Webflow, collez votre balise script Markspot, publiez. Hotspots interactifs, infobulles personnalisées, statistiques de clics — sans plugin, sans code sur mesure.

Gratuit pour toujours — 3 images, 1 en ligne · Aucun plugin Webflow · Sans carte bancaire

Installation

En ligne sur Webflow en cinq étapes.

01

Créez votre image shoppable

Importez votre photo produit dans Markspot, placez un hotspot sur chaque produit, ajoutez noms, prix et URL. Cliquez sur Publier pour générer un code d'embed.

02

Copiez le code d'embed

Depuis votre tableau de bord Markspot, copiez la balise script. Chaque image publiée a son propre identifiant d'embed.

03

Ouvrez le Designer Webflow

Dans votre projet Webflow, ouvrez le Designer et allez sur la page où l'image shoppable doit apparaître.

04

Ajoutez un élément HTML Embed

Dans le panneau Add Elements (l'icône +), trouvez la catégorie Embeds et faites glisser un élément HTML Embed sur le canevas, là où l'image doit apparaître.

05

Collez et publiez

Double-cliquez sur l'élément Embed, collez votre balise script Markspot dans le champ HTML, cliquez sur Save & Close, puis publiez votre site Webflow. C'est fait.

La balise d'embed

<script data-embed-id="YOUR_EMBED_ID" src="https://markspot.app/embed/embed.v1.js"></script>

Remplacez YOUR_EMBED_ID par l'identifiant indiqué dans votre tableau de bord Markspot.

Où l'utiliser

Fonctionne partout dans Webflow.

Toutes les pages

Déposez un élément HTML Embed n'importe où sur une page statique — section d'en-tête, produit à la une, mise en page éditoriale.

Pages de collection CMS

Ajoutez l'embed dans un template de collection CMS pour afficher une image shoppable par élément de collection (par produit ou par article, par exemple).

Webflow Ecommerce

Placez un embed shoppable sur vos pages produits ou de collection pour montrer vos produits en situation, à côté des fiches produits.

Sections de page

Utilisez l'élément Embed dans n'importe quelle Section, Container ou Div Block — il hérite de votre mise en page et est adaptatif par défaut.

FAQ

Markspot sur Webflow, en clair.

Créez votre image shoppable dans Markspot et copiez la balise script d'embed. Dans le Designer Webflow, faites glisser un élément HTML Embed sur le canevas, collez-y la balise script, cliquez sur Save & Close, puis publiez votre site Webflow. L'image shoppable est en ligne immédiatement.

Oui. Vous pouvez placer un élément HTML Embed Markspot dans une Collection List ou un template de Collection Page. S'il vous faut un embed différent par élément CMS, créez une image Markspot pour chacun et collez la balise d'embed correspondante.

Non. Le script d'embed Markspot se charge de façon asynchrone et est servi depuis un CDN. Il ne bloque pas le premier affichage de la page et n'affecte pas le chargement du CMS Webflow. Les images sont hébergées par Markspot, pas par Webflow : elles n'entament donc pas vos limites de médias Webflow.

Oui. Les embeds Markspot fonctionnent sur les pages produits et les pages de collection de Webflow Ecommerce. Ajoutez un élément HTML Embed à votre template produit et collez-y la balise de votre image shoppable pour montrer vos produits en situation, avec leurs hotspots, à côté de vos fiches produits Webflow.

Oui. L'embed Markspot remplit son conteneur et est entièrement adaptatif. Dans le Designer Webflow, réglez la largeur et la largeur maximale de l'élément Embed comme pour n'importe quel bloc — les hotspots se repositionnent proportionnellement à chaque taille d'écran.

Rendez votre site Webflow shoppable — gratuitement.

Sans plugin. Sans code sur mesure. En ligne en quelques minutes depuis le Designer.