<aside> 💡 TL;DR

  1. Crea el código de tu widget en → WhatsApp Widget Generator
  2. Copia el código HTML, el link de CSS y el link de JS
  3. Copia tu código de la burbuja en un nuevo snippet: bubble.liquid
  4. Pega los links CSS & JS en la sección <head> de theme.liquid
  5. Copia el código que genera el widget en la sección <body> de theme.liquid </aside>

1. Crea el código de tu widget

Puedes crear tu propio widget usando nuestro creador de WhatsApp Widget Generator. Este es el primer paso.

Aquí, añade toda la información necesaria:

  1. Mensaje de Bienvenida
  2. Mensaje de Teaser
  3. Botón de CTA
  4. Color del botón

Untitled

En el siguiente paso, ańades:

  1. Tu número de WhatsApp Business
  2. Tu mensaje pre-definido

Haz click en “Generar”

Untitled

La información se va a guardar en un código HTML, esto lo necesitamos para Shopify.

Puedes comprobar que el link para asegurar que realmente vaya a tu número de WhatsApp con el mensaje adecuado.

Dale al botón de “Copy”

Untitled

2. Añade el código en Shopify

Primero añadimos el código de la burbuja en tu Theme la web

Abre tu editar de themes

Online store > Themes > ... > Edit code

Untitled

Untitled

Crea un snipped que se llame bubble.liquid

Busca la sección Snippets en la barra izquierda lateral > Añade new snippet.

Llámalo bubble(.liquid).

Untitled

Untitled

A continuación, pega el código generado directamente allí.

Haz click en “Save”!

Untitled

Ahora añadimos el código “funcional” para decirle a Shopify cómo usar nuestro Widget

Busca la sección Layout en la barra izquierda lateral > Abre el archivo theme.liquid

Untitled

Pega las siguientes 2 líneas de código en la sección <head>