Cómo instalar las herramientas de ShareThis en Shopify con código 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 Plataforma ShareThis.
  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 Plataforma ShareThis).
  4. Go to Apps. Enable the App you want to display in your website.
  5. Inicie sesión en su sitio web de Shopify.
  6. En la barra de navegación de la izquierda, seleccione Tienda Online > Temas, y en el desplegable Acciones, haga clic en Editar Código.
  7. Desde los diferentes archivos y carpetas, vaya a Layout y haga clic en 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. Añadir herramientas ShareThis en línea en una página de producto mediante un bloque Liquid personalizado
    2. Añadir herramientas ShareThis en línea en una página de producto editando el código del tema
    3. Añadir herramientas ShareThis Inline en una página o blog

Antes de personalizar su tema, siempre es recomendable hacer una copia de seguridad primero, siga estas instrucciones para duplicar el tema y tener una copia de seguridad en caso de que desee revertir los cambios.

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

Puedes utilizar el editor de temas de Shopify para tener una guía visual a la hora de colocar el código de los botones inline. Aunque no se limita a la página de productos, podrías seguir estas instrucciones y el vídeo del final para colocar el código en la descripción de tus productos.

Note: Before customizing your theme, it’s always recommended to make a backup first, follow estas instrucciones para duplicar el tema y tener una copia de seguridad en caso de que desee revertir los cambios.

  1. Vaya al Panel de Control de su Tienda Online.
  2. Haga clic en Temas y luego en el botón verde que dice Personalizar.
  3. Navegue hasta la página en la que desea que aparezcan los botones haciendo clic en la vista previa en directo.
  4. Sitúe el ratón en el lugar donde desee insertar los botones, aparecerá un pequeño botón azul con la etiqueta Añadir una sección.
  5. Seleccione Líquido personalizado en la lista.
  6. Copie y pegue el código de colocación correspondiente en la barra lateral izquierda que acaba de aparecer.
    1. Comparte el código de colocación de los botones:
    2. Botones de seguir código de colocación
    3. Reaction Buttons placement code
  7. Haga clic en Guardar en la esquina superior derecha.

Para su comodidad, aquí tiene un avance:

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

  1. En la barra de navegación de la izquierda, seleccione Tienda Online > Temas y luego haga clic en Acciones > Editar código.
  2. Dentro de la barra lateral izquierda, desplácese hasta la carpeta Sections y seleccione main-product.liquid (Si está utilizando un tema anterior, vaya a Templates y localice el archivo product.liquid ). A continuación, busque el siguiente código:
    {{ product.description }}
    Nota: Puede utilizar Control + F para buscar la palabra "descripción" en ella (por favor, asegúrese de hacer clic en el interior del archivo para que pueda buscar el contenido dentro del editor de código ), trate de colocar los botones en una nueva línea después de la sección o líneas que tienen este nombre. Una sección/elemento se delimita con el carácter "}" al final de la misma.

  3. Copie y pegue el código de colocación correspondiente arriba o abajo de la descripción del producto.
    1. Comparte el código de colocación de los botones:
    2. Botones de seguir código de colocación
    3. Reaction Buttons placement code

Para su comodidad, aquí tiene un avance:

3. Adding Inline ShareThis tools on a page or blog

  1. En la barra de navegación de la izquierda, seleccione Tienda Online > Páginas. A continuación, haga clic en la página en la que desea mostrar sus botones. 
  2. Haga clic en el botón Mostrar HTML <> en la sección Contenido .
  3. Copie y pegue el código de colocación pertinente abajo donde quiera que aparezca la herramienta ShareThis.
    1. Comparte el código de colocación de los botones:
    2. Botones de seguir código de colocación
    3. Reaction Buttons placement code