<aside> đź’ˇ TL;DR

  1. Create your widget copy on WhatsApp Widget Generator
  2. Copy the HTML code, CSS link & JS link
  3. Create a bubble.liquid snippet in Shopify
  4. Paste CSS & JS link in the <head> of theme.liquid
  5. Render the bubble snippet in <body> </aside>

1. Creating the WhatsApp widget

You can create your own widget using the WhatsApp Widget Generator tool on Hoola’s website. This is the first step.

In there, you put your information:

  1. Welcome message text
  2. Teaser message text
  3. CTA button text
  4. Button Color

Untitled

And in the next step:

  1. Your WhatsApp business number
  2. Your pre-filled message

Hit “Generate”

Untitled

Your information is saved in an HTML code, this is what we need for Shopify.

Test the link to see if it actually goes to your WhatsApp, and puts the right pre-filled message.

Hit “Copy” to copy the html code.

Untitled

2. Add the code in Shopify

Open theme editor

Online store > Themes > ... > Edit code

Untitled

Untitled

Create a bubble.liquid snippet

Scroll in the left bar down to snippet > Add a new snippet.

Call it bubble(.liquid).

Untitled

Untitled

Then, paste your generated widget code in there.

Hit “Save”!

Untitled

Add the functional code in theme

Scroll in the left bar to theme.liquid

Untitled

Place the following 2 lines of code within the <head> section

Copy the script & stylesheet: