Aller au contenu
ENCommencer gratuitementCommencer
← Toutes les plateformes

Tutoriel Shopify

Votre voix dans le blog de votre boutique

Un conseil d'utilisation, l'histoire d'un produit, dits par vous : le lecteur Vokyt se place dans vos articles de blog Shopify.

Créer mon compte gratuitVoir la démonstration

Ce qu'il vous faut≈ 7 min d'installation

  • Accès à Boutique en ligne → Thèmes → Modifier le code
  • Un thème Online Store 2.0 (ou plus ancien)
  • Un compte Vokyt, offre Gratuit comprise

Étape 1 sur 4 · Copier le script

vokyt.cc/tableau-de-bord

Pas à pas

  1. 01

    Préparez Vokyt

    Compte, site, clé publique

    Créez votre compte Vokyt (gratuit), puis ouvrez Tableau de bord → Sites et intégration → Ajouter un site.

    Déclarez tous les domaines où le lecteur s'affichera : le domaine de la boutique, avec et sans www, et maboutique.myshopify.com. Le lecteur refuse de s'afficher sur un domaine non déclaré : c'est ce qui empêche quelqu'un d'utiliser vos vocaux ailleurs.

    Copiez la ligne de script affichée : elle contient déjà votre clé publique (pk_live_…). Cette clé peut apparaître dans vos pages sans risque.

    html
    <script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>

  2. 02

    Ajoutez le script dans theme.liquid

    Thèmes › Modifier le code

    Boutique en ligne → Thèmes → … (à côté de Personnaliser) → Modifier le code. Ouvrez layout/theme.liquid.

    Collez la ligne de script juste avant la balise </head>, puis Enregistrer. Astuce : dupliquez d'abord le thème pour garder une sauvegarde.

    liquid
      {{ content_for_header }}
  <script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>
</head>

  3. 03

    Enregistrez un vocal

    30 s à 1 min 30

    Tableau de bord → Nouveau vocal : enregistrez depuis le navigateur ou envoyez un fichier. Vokyt harmonise le son et transcrit en quelques secondes.

    Relisez la transcription, puis copiez la balise du vocal dans l'encadré « Intégration ».

    html
    <vokyt-player note="note_…"></vokyt-player>

  4. 04

    Collez la balise dans l'article

    Afficher le HTML

    Contenu → Articles de blog → votre article. Dans l'éditeur, cliquez sur le bouton Afficher le HTML (<>).

    Collez la balise du vocal sous le paragraphe concerné, revenez à l'affichage normal et enregistrez.

    html
    <vokyt-player note="note_…"></vokyt-player>

  5. 05

    Vérifiez sur la boutique

    Le lecteur apparaît

    Ouvrez l'article sur la boutique : le lecteur s'affiche avec la transcription. Les écoutes arrivent dans votre tableau de bord Vokyt.

Questions fréquentes

Le lecteur ne s'affiche pas, pourquoi ?

Dans 9 cas sur 10, le domaine exact de la page n'est pas déclaré dans Sites et intégration (avec ou sans www, domaine de prévisualisation). Vérifiez aussi que la ligne de script est présente une seule fois et que le vocal est prêt.

Le script disparaît-il si je change de thème ?

Oui : il est dans le thème. Recollez-le dans layout/theme.liquid du nouveau thème. Les balises des articles, elles, restent en place.

Est-ce que ça ralentit mon site ?

Le lecteur pèse moins de 15 Ko, se charge en différé (defer) et n'utilise aucun cookie. L'audio n'est téléchargé que lorsque le lecteur appuie sur lecture.

Autres plateformes

Prêt à faire entendre votre voix ?

Créez votre compte, enregistrez un premier vocal et suivez les étapes : c'est gratuit pour commencer.

Créer mon compte gratuitToutes les plateformes