Des images shoppables pour Framer Pensées pour les changements de page.
Framer change de page sans rechargement : l'installation se fait donc en deux parties. Le script Markspot une fois dans le Custom Code du site, puis un élément dans un Embed à l'endroit de l'image.
Gratuit pour toujours — 3 images, 1 en ligne · Aucun plugin Framer · Sans carte bancaire
Voir le résultatInstallation
De votre photo à votre site Framer.
Avant de commencer
Le code personnalisé demande un forfait payant
Le code personnalisé pour tout le site fait partie des forfaits payants de Framer. Vérifiez le vôtre dans les réglages de forfait du projet avant de commencer.
- 01
Créez votre image shoppable
Importez votre photo dans Markspot, placez un repère sur chaque produit, puis ajoutez son nom, son prix et son lien. Cliquez sur Publier pour obtenir votre code d'intégration.
- 02
Copiez le code d'embed
Dans votre tableau de bord Markspot, ouvrez le panneau d'installation de l'image et copiez le code. Chaque image a son propre identifiant d'intégration.
- 03
Ajoutez le script une seule fois
Dans les réglages du projet, ouvrez Custom Code et collez le script « Une seule fois, pour tout le site » à la fin de <body>, sur toutes les pages.
- 04
Ajoutez un Embed à l'endroit de l'image
Insérez un Embed sur la page, réglez-le sur HTML et collez l'élément : <markspot-embed data-embed-id="…">. Il ne contient aucun script, donc il fonctionne sans iframe.
- 05
Donnez de la place à l'Embed
L'image remplit la largeur de l'Embed et garde ses proportions. Réglez la largeur voulue et une hauteur suffisante pour l'image, pour qu'elle ne soit pas rognée.
- 06
Publiez et naviguez
Framer ne charge pas le code personnalisé sur le canevas : l'Embed y reste vide. Publiez, ouvrez le site en ligne et passez d'une page à l'autre : l'image revient sur chacune.
Étape 01 sur 06
Créez votre image shoppable
Importez votre photo dans Markspot, placez un repère sur chaque produit, puis ajoutez son nom, son prix et son lien. Cliquez sur Publier pour obtenir votre code d'intégration.
Étape 02 sur 06
Copiez le code d'embed
Dans votre tableau de bord Markspot, ouvrez le panneau d'installation de l'image et copiez le code. Chaque image a son propre identifiant d'intégration.
Étape 03 sur 06
Ajoutez le script une seule fois
Dans les réglages du projet, ouvrez Custom Code et collez le script « Une seule fois, pour tout le site » à la fin de <body>, sur toutes les pages.
Étape 04 sur 06
Ajoutez un Embed à l'endroit de l'image
Insérez un Embed sur la page, réglez-le sur HTML et collez l'élément : <markspot-embed data-embed-id="…">. Il ne contient aucun script, donc il fonctionne sans iframe.
Étape 05 sur 06
Donnez de la place à l'Embed
L'image remplit la largeur de l'Embed et garde ses proportions. Réglez la largeur voulue et une hauteur suffisante pour l'image, pour qu'elle ne soit pas rognée.
Étape 06 sur 06
Publiez et naviguez
Framer ne charge pas le code personnalisé sur le canevas : l'Embed y reste vide. Publiez, ouvrez le site en ligne et passez d'une page à l'autre : l'image revient sur chacune.
Touchez un hotspot pour explorer
Le résultat
Votre photo, sur Framer. Devenue vitrine.
Touchez un hotspot pour explorer
↑ Ceci est un vrai Markspot. Survolez ou touchez un hotspot pour voir ce que verront vos clients.
Vos deux extraits
Le script va une seule fois dans Custom Code ; l'élément va dans un Embed sur chaque page qui affiche une image. Le panneau d'installation de votre tableau de bord vous donne les deux, déjà remplis.
Une seule fois, pour tout le site
<script src="https://markspot.app/embed/embed.a0785de482c7.js"
integrity="sha384-oHhd5ILHywvcsJMcVDYzLK8iGo5QR0xWsnMAY/6dbt23Bjb6hTrgF+QQaURTXoEf"
crossorigin="anonymous"
async></script>À l'endroit de l'image
<markspot-embed embed-id="YOUR_EMBED_ID"></markspot-embed>Remplacez YOUR_EMBED_ID par l'identifiant indiqué dans votre tableau de bord Markspot.
Où l'utiliser
Où la placer sur votre site Framer.
01
N'importe quelle page
Un Embed dans n'importe quelle section ou stack : une image d'en-tête shoppable, une double page de lookbook, un produit vedette.
02
Pages CMS
Placez l'Embed dans le modèle de page CMS ; donnez à chaque élément sa propre image en changeant l'identifiant dans l'élément.
03
Certaines pages seulement
Le Custom Code peut viser certaines pages, ou se placer dans les réglages d'une seule page, si seules quelques pages affichent des images.
04
Composants
Placez l'Embed dans un composant pour réutiliser la même image shoppable sur plusieurs pages.
Dépannage
Quelque chose cloche ? Voici pourquoi.
Symptôme
L'Embed est vide sur le canevas
Solution
C'est normal : Framer ne charge pas le code personnalisé sur le canevas. Vérifiez le site publié.
Symptôme
L'image s'affiche une fois, puis disparaît après navigation
Solution
Vous avez collé la balise de script complète dans l'Embed. Collez-y plutôt l'élément, et le script dans Custom Code.
Symptôme
L'image est rognée
Solution
L'Embed est moins haut que l'image. Donnez-lui plus de hauteur.
FAQ
Markspot sur Framer, en clair.
Collez le script Markspot une seule fois dans le Custom Code du projet, à la fin de <body>. Ajoutez ensuite un Embed réglé sur HTML à l'endroit de l'image et collez l'élément <markspot-embed>. Publiez.
Framer change de page sans rechargement : un script placé dans la page peut ne pas s'exécuter à nouveau quand un visiteur y revient. L'élément, lui, est repris par le script global sur chaque page.
Le code personnalisé pour tout le site fait partie des forfaits payants de Framer. Vérifiez le vôtre avant de commencer.
Non. Framer ne charge pas le code personnalisé sur le canevas. L'image s'affiche sur le site publié.
Le script se charge en async : il ne retarde pas votre page, et il ne se charge qu'une fois par visite. Les images sont hébergées par Markspot.
Rendez votre site Framer shoppable, gratuitement.
Aucun plugin. Un script, un élément. En ligne en quelques minutes.