Intégrer Baback - Shopify headless

Sur une boutique Shopify classique, le portail de retour s’installe tout seul grâce à l’app Shopify. Sur un site headless, il n’y a pas de thème Shopify dans lequel l’ajouter : vous intégrez vous-même le script , en quelques lignes de code.

Sur votre site (pas de réglage dans Baback, hormis la position du portail : Paramètres → Portail client → Personnalisation)

1. Vous ajoutez le script Baback sur toutes les pages de votre site.

2. Vous désignez un ou plusieurs éléments (lien, bouton, menu) qui ouvrent le portail.

3. Quand le client clique, le portail s’ouvre par-dessus la page, sans la quitter.

Ajoutez ce script sur toutes les pages de votre site, en remplaçant VOTRE_SHOP_ID par l’identifiant de votre boutique Shopify :

<script
  src="https://cdn1.baback.co/embed/index.js"
  data-shop-id="VOTRE_SHOP_ID"
  data-base="https://app.baback.co"
  data-position="center"
  async
></script>

Le script est léger : il n’affiche rien tant que le client n’ouvre pas le portail, et ne charge le reste qu’à ce moment-là.

Les attributs disponibles :

💡 Chargez le script sur toutes les pages, pas seulement celle qui contient le lien de retour. C’est ce qui permet à un client en cours d’échange de reprendre son parcours après avoir navigué dans votre catalogue.

Ajoutez l’attribut data-baback-return-open sur n’importe quel élément cliquable : un bouton dans l’espace client, un lien de pied de page, une entrée de menu… Le script s’occupe du reste.

Exemple : un bouton

<button data-baback-return-open>Retourner un article</button>

Exemple : un lien de pied de page

<a href="#" data-baback-return-open>Portail de retour</a>

Vous pouvez placer autant d’éléments que vous le souhaitez : ils ouvrent tous le portail.

Ouvrir le portail en JavaScript

Si votre site gère ses interactions en JavaScript (application monopage, composant de menu…), ouvrez le portail directement, dès que le script est chargé :

window.baback.open();

// En pré-remplissant une commande précise :
window.baback.open({ orderId: "123456789" });

1. Ouvrez votre site et cliquez sur votre lien de retour : le portail doit s’afficher par-dessus la page.

2. Saisissez une vraie commande et vérifiez que les articles s’affichent bien.

3. Si rien ne se passe, ouvrez la console de votre navigateur : les messages qui commencent par [baback] indiquent si le script a bien trouvé votre data-shop-id.

💡 Si vous êtes bloqué, écrivez-nous en indiquant l’adresse de la page concernée : nous regardons avec vous.

Besoin d’aide ?

• En savoir plus sur la personnalisation CSS.

• Pour toute question, contactez notre équipe : support@baback.co