Come installare ShareThis' Strumenti su Shopify con il codice 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 Piattaforma.
  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 Piattaforma).
  4. Go to Apps. Enable the App you want to display in your website.
  5. Accedere al proprio sito web Shopify.
  6. Nella barra di navigazione sinistra, selezionare Online Store > Temi e, nel menu a tendina Azioni, fare clic su Modifica codice.
  7. Tra i vari file e cartelle, andare su Layout e fare clic su 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. Aggiunta di strumenti in linea ShareThis in una pagina di prodotto utilizzando un blocco liquido personalizzato
    2. Aggiunta degli strumenti di ShareThis in linea su una pagina di prodotto modificando il codice del tema
    3. Aggiunta degli strumenti di ShareThis in linea su una pagina o un blog

Prima di personalizzare il tema, si consiglia sempre di eseguire un backup, seguendo le indicazioni riportate di seguito. queste istruzioni per duplicare il tema per avere una copia di backup nel caso in cui si vogliano ripristinare le modifiche.

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

È possibile utilizzare l'editor del tema di Shopify per avere una guida visiva al posizionamento del codice dei pulsanti in linea. Anche se non è limitato alla pagina dei prodotti, si possono seguire queste istruzioni e il video alla fine per inserire il codice nella descrizione del prodotto.

Note: Before customizing your theme, it’s always recommended to make a backup first, follow queste istruzioni per duplicare il tema per avere una copia di backup nel caso in cui si vogliano ripristinare le modifiche.

  1. Accedere al cruscotto del negozio online.
  2. Fare clic su Temi e poi sul pulsante verde Personalizza.
  3. Passare alla pagina in cui si desidera visualizzare i pulsanti facendo clic sull'anteprima dal vivo.
  4. Individuare con il mouse il punto in cui si desidera inserire i pulsanti; apparirà un piccolo pulsante blu con l'etichetta Aggiungi una sezione.
  5. Selezionare Liquido personalizzato dall'elenco.
  6. Copiate e incollate il relativo codice di posizionamento nella barra laterale sinistra che è appena apparsa.
    1. Codice di posizionamento dei pulsanti di condivisione:
    2. Codice di posizionamento Follow Buttons
    3. Reaction Buttons placement code
  7. Fare clic su Salva nell'angolo superiore destro.

Per comodità, ecco un'anteprima:

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

  1. Nella barra di navigazione sinistra, selezionare Online Store > Temi , quindi fare clic su Azioni > Modifica codice.
  2. Nella barra laterale sinistra, scorrere fino alla cartella Sections e selezionare main-product.liquid (se si utilizza un tema precedente, andare in Templates e individuare il file product.liquid ). Quindi, trovare il seguente codice:
    {{ product.description }}
    Nota: è possibile utilizzare Control + F per cercare la parola "descrizione" (assicurarsi di fare clic sull'interno del file in modo da poter cercare il contenuto all'interno dell'editor di codice), provare a inserire i pulsanti in una nuova riga dopo la sezione o le righe che hanno questo nome. Una sezione/elemento è delimitata dal carattere "}" alla fine.

  3. Copiare e incollare il relativo codice di posizionamento sopra o sotto la descrizione del prodotto.
    1. Codice di posizionamento dei pulsanti di condivisione:
    2. Codice di posizionamento Follow Buttons
    3. Reaction Buttons placement code

Per comodità, ecco un'anteprima:

3. Adding Inline ShareThis tools on a page or blog

  1. Nella barra di navigazione sinistra, selezionare Online Store > Pagine. Quindi, fate clic sulla pagina in cui desiderate visualizzare i vostri pulsanti. 
  2. Fare clic sul pulsante Mostra HTML <> nella sezione Contenuto .
  3. Copiate e incollate il codice di posizionamento corrispondente qui sotto ovunque vogliate che appaia lo strumento ShareThis .
    1. Codice di posizionamento dei pulsanti di condivisione:
    2. Codice di posizionamento Follow Buttons
    3. Reaction Buttons placement code