Intégrer dans Shopify

Intégrez vos graphiques Embases dans vos boutiques Shopify via les sections HTML ou l'éditeur de pages.

Éditeur de pages Shopify

La méthode la plus rapide pour insérer un embed Embases dans Shopify est d'utiliser l'éditeur de pages intégré. Depuis votre back-office Shopify, cliquez sur « Boutique en ligne » dans le menu de navigation de gauche, puis sur « Pages ». Sélectionnez la page existante où vous souhaitez afficher le graphique, ou créez-en une nouvelle en cliquant sur « Ajouter une page » en haut à droite.

Une fois dans l'éditeur de contenu de la page, repérez la barre de mise en forme du texte (gras, italique, listes…) en haut de la zone de texte. À droite de ces boutons, vous trouverez une icône « < > » qui correspond au mode HTML (Source code). Cliquez dessus : le contenu de la page s'affiche maintenant sous forme de code HTML brut.

Dans ce code HTML, positionnez votre curseur à l'endroit exact où vous souhaitez que le graphique apparaisse (entre deux paragraphes, après un titre, etc.) et collez le code iFrame Embases. Cliquez à nouveau sur l'icône « < > » pour revenir en mode visuel et vérifier le rendu, puis cliquez sur « Enregistrer » en haut à droite de la page. La page publiée affichera votre graphique à l'endroit choisi.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="420"
  frameborder="0"
  loading="lazy"
  title="Graphique Embases"
></iframe>

Astuce : Cette méthode fonctionne pour toutes les pages de contenu Shopify (pages statiques, articles de blog). Elle ne fonctionne pas directement sur les pages produit ou collection — utilisez les sections de thème pour ces cas.

Personnalisateur de thème

Pour insérer un embed sur n'importe quelle page de votre boutique — page d'accueil, page produit, page collection, page de politique — la méthode recommandée est le personnalisateur de thème. Depuis votre back-office Shopify, accédez à « Boutique en ligne » → « Thèmes ». Sur votre thème actif (indiqué par le badge vert « Thème actuel »), cliquez sur le bouton « Personnaliser ».

Le personnalisateur s'ouvre avec une prévisualisation de votre boutique. En haut de l'écran, un sélecteur de pages vous permet de naviguer entre les différentes pages de votre boutique : cliquez dessus pour sélectionner la page où vous souhaitez afficher le graphique (ex. « Page d'accueil », « Page produit par défaut »).

Dans la barre latérale gauche, repérez la liste des sections qui composent la page. Faites défiler jusqu'en bas de cette liste et cliquez sur « Ajouter une section ». Dans le panneau qui s'ouvre, cherchez « HTML personnalisé » ou « Liquid personnalisé » dans la liste des types de sections disponibles. Cliquez dessus pour l'insérer. Un nouveau panneau de configuration apparaît à gauche : dans le champ de contenu (libellé « HTML » ou « Contenu »), collez votre code iFrame Embases. L'aperçu se met à jour en temps réel. Cliquez sur « Enregistrer » en haut à droite pour publier les modifications.

Astuce : Si votre thème Shopify ne propose pas de section HTML personnalisée par défaut (certains thèmes premium), ajoutez-la manuellement via Thèmes → Modifier le code → créez un nouveau fichier de section JSON dans le dossier sections/.

Liquid et sections avancées

Si vous êtes à l'aise avec le langage de template Liquid de Shopify, vous pouvez créer une section personnalisée qui génère dynamiquement l'URL de l'embed selon le contexte (produit affiché, collection, client connecté, etc.). L'exemple ci-dessous montre comment stocker le token Embases dans un métafield de produit et l'injecter automatiquement dans l'iFrame.

Pour créer un métafield sur un produit : dans votre back-office Shopify, accédez à « Paramètres » → « Métafields personnalisés » → « Produits » → cliquez sur « Ajouter une définition ». Nommez le champ (ex. « Embed Embases »), donnez-lui le namespace embases et la clé token, puis sélectionnez le type « Texte court ». Enregistrez. Maintenant, sur chaque fiche produit, un nouveau champ « Embed Embases » apparaît en bas de la page — saisissez-y le token de l'embed correspondant.

Pour intégrer ce code dans votre thème, accédez à « Thèmes » → « Modifier le code » → ouvrez le fichier Liquid de votre template produit (généralement sections/main-product.liquid ou templates/product.liquid). Ajoutez le code ci-dessous à l'endroit souhaité dans le template. Shopify injectera automatiquement le bon token pour chaque produit.

{%- comment -%}
  Exemple : token Embases stocké dans un métafield produit
  Admin → Produit → Métafields → embases.token
{%- endcomment -%}

{% if product.metafields.embases.token != blank %}
  <iframe
    src="https://embases.com/e/{{ product.metafields.embases.token }}"
    width="100%"
    height="420"
    frameborder="0"
    loading="lazy"
    title="Graphique Embases"
  ></iframe>
{% endif %}

Astuce : Cette technique est avancée et nécessite des connaissances en développement Shopify. Pour un usage simple (une ou quelques pages), préférez la méthode de l'éditeur de pages ou du personnalisateur de thème.

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed Embases, vous devez ajouter le domaine de votre boutique Shopify dans la liste des domaines autorisés. Votre boutique Shopify possède deux domaines possibles : un sous-domaine Shopify par défaut (format votre-boutique.myshopify.com) et un éventuel domaine personnalisé (format www.votre-boutique.com si vous en avez configuré un).

Pour ajouter ces domaines dans Embases, connectez-vous à votre dashboard, accédez aux paramètres de l'embed concerné → section « Sécurité » → « Domaines autorisés ». Entrez d'abord votre-boutique.myshopify.com, puis si applicable votre domaine personnalisé sur une nouvelle ligne. Enregistrez. Les deux domaines peuvent coexister dans la liste blanche.

Pour retrouver votre sous-domaine myshopify.com : dans votre back-office Shopify, allez dans « Paramètres » → « Domaines ». Le domaine en .myshopify.com est toujours affiché dans cette section, même si vous utilisez un domaine personnalisé comme domaine principal.

Étapes suivantes