Comment installer ShareThis' Tools sur Shopify avec du code Javascript

If you would like to customize and manage your tools through the ShareThis Platform instead of using the ShareThis Shopify App, you can follow this steps:

  1. Log in or sign up to the ShareThis Plate-forme.
  2. Add your domain.
  3. Copy your unique <strong>ShareThis code</strong>. You can find your unique installation <script> code (i.e. <head> code) by navigating into Settings > Setup (in the ShareThis Plate-forme).
  4. Go to Apps. Enable the App you want to display in your website.
  5. Connectez-vous à votre site Web Shopify.
  6. Dans la barre de navigation de gauche, sélectionnez Boutique en ligne > Thèmes, et dans la liste déroulante Actions, cliquez sur Modifier le code.
  7. À partir des différents fichiers et dossiers, allez dans Layout et cliquez sur theme.liquid.
  8. <strong>Paste </strong>the unique ShareThis code that you copied from step 3 into the <head> section of your website.
  9. (Optional) If you are adding Inline tools, choose one of the following methods. Inline tools (Inline Share Buttons, Follow Buttons or Reactions Buttons) require an extra snippet of code to work on your site.
    1. Ajout d'outils en ligne ShareThis sur une page de produit à l'aide d'un bloc liquide personnalisé
    2. Ajout d'outils Inline ShareThis sur une page produit en modifiant le code du thème
    3. Ajout d'outils Inline ShareThis sur une page ou un blog

Avant de personnaliser votre thème, il est toujours recommandé de faire une sauvegarde. ces instructions pour dupliquer le thème afin de disposer d'une copie de sauvegarde au cas où vous voudriez revenir sur les modifications.

1. Adding Inline ShareThis tools to your product page using a Custom Liquid Block

Vous pouvez utiliser l'éditeur de thème Shopify pour avoir un guide visuel lors du placement du code des boutons en ligne. Bien que cela ne soit pas limité à la page des produits, vous pouvez suivre ces instructions et la vidéo à la fin pour placer le code sur la description de votre produit.

Note: Before customizing your theme, it’s always recommended to make a backup first, follow ces instructions pour dupliquer le thème afin de disposer d'une copie de sauvegarde au cas où vous voudriez revenir sur les modifications.

  1. Accédez au tableau de bord de votre boutique en ligne.
  2. Cliquez sur Thèmes, puis sur le bouton vert intitulé Personnaliser.
  3. Rendez-vous sur la page où vous voulez que les boutons apparaissent en cliquant sur l'aperçu en direct.
  4. Placez votre souris à l'endroit où vous voulez insérer les boutons, un petit bouton bleu apparaîtra avec une étiquette Ajouter une section.
  5. Sélectionnez Liquide personnalisé dans la liste.
  6. Copiez et collez le code de placement correspondant dans la barre latérale gauche qui vient d'apparaître.
    1. Code de placement de Share Buttons :
    2. Code de placement de Follow Buttons
    3. Reaction Buttons placement code
  7. Cliquez sur Enregistrer dans le coin supérieur droit.

Pour vous faciliter la tâche, voici un aperçu :

2. Adding Inline ShareThis tools to your product page by editing the Theme Code

  1. Dans la barre de navigation de gauche, sélectionnez Boutique en ligne > Thèmes , puis cliquez sur Actions > Modifier le code.
  2. Dans la barre latérale gauche, descendez jusqu'au dossier Sections et sélectionnez main-product.liquid (si vous utilisez un ancien thème, allez dans Templates et localisez le fichier product.liquid ). Ensuite, trouvez le code suivant :
    {{ product.description }}
    Remarque: Vous pouvez utiliser Control + F pour rechercher le mot "description" (veillez à cliquer sur l'intérieur du fichier pour pouvoir rechercher le contenu dans l'éditeur de code), essayez de placer les boutons sur une nouvelle ligne après la ou les sections qui portent ce nom. Une section/élément est délimitée par le caractère "}" à la fin de celle-ci.

  3. Copiez et collez le code de placement correspondant au-dessus ou au-dessous de la description de votre produit.
    1. Code de placement de Share Buttons :
    2. Code de placement de Follow Buttons
    3. Reaction Buttons placement code

Pour vous faciliter la tâche, voici un aperçu :

3. Adding Inline ShareThis tools on a page or blog

  1. Dans la barre de navigation de gauche, sélectionnez Boutique en ligne > Pages. Ensuite, cliquez sur la page sur laquelle vous souhaitez afficher vos boutons. 
  2. Cliquez sur le bouton Afficher HTML <> dans la section Contenu .
  3. Copiez et collez le code de placement approprié ci-dessous à l'endroit où vous souhaitez que l'outil ShareThis apparaisse.
    1. Code de placement de Share Buttons :
    2. Code de placement de Follow Buttons
    3. Reaction Buttons placement code