I, probably like many of you reading this article, struggle to cope with the deluge of beeps, pings, and whooshes all vying for my attention countless times per day. Long gone are the days when the ping of a new email would get me excited. These days notifications have become personal; they growl at me from screens, vibrate from pockets and even tap, unapologetically, on my wrist.

“Stop what you are doing, this is really important!” is the attitude conveyed by most notifications even if what they report is seldom so. Notifications and alert messages have become the boy who cried wolf; I no longer listen to them as I know they rarely are important.

As a Shopify store owner, I can choose to receive email notifications, push notifications on my desktop browser, alerts on my phone, or alerts on my watch. The resulting noise from a single sale on my store could easily wake the cat!

Although all of these nags are mutable (the ability to choose what notifications to receive is a great feature with Shopify), I still want to receive some kind of alert when an order is placed or when there's a spike in traffic. I just want something that isn’t so distracting; something gentle that says “hey, something has happened, but don’t worry, nothing to worry about.” So, I decided to build something.

The first thing to decide had to be which non-critical notifications I actually want. As these notifications are not to be intrusive, I decided to show activity on the site; cart updates, sales and traffic spikes.

Fortunately, Shopify has the ability to post webhooks when certain conditions are met. That seemed liked a good way to go as these are pretty much instant, certainly faster than using a service like IFTTT to monitor emails for sales activity.

I have been known to make the odd IoT gadget and love the interaction of physical objects with data. So I set about gathering some components to make what I was calling the ‘Notification Bug’.

The idea was simple: when an order gets placed a slow pulse of light would gently notify me. This notification wouldn’t require any interaction from me and would disappear just as stealthily as it appeared. A similar pulse of light would also notify me of a cart update or spike in traffic, and these would be distinguishable from each other through the use of different coloured lights. An array of RGB LED’s could handle that for me quite comfortably and with very little power required.

I wanted this little device to be standalone, just requiring power from the USB socket so it could be plugged in anywhere. The finished device works great plugged into the back of a TV (most modern TV’s have a USB port) and creating a gentle glow behind the screen when my store receives an order. This guarantees high-fives in my house.

Here's the final product:

How I Built My Bug

Here's how you can build your own notification gadget for your store or your client's.

Parts required:

Photon wifi Dev kit
Neopixels Jewel - 7 pixel RGB
Wire
Solder
USB lead
PLA for 3D printer

The first thing I needed was a housing for the ‘bug.’ It would have to be something small and semi opaque to allow the transfer of light. This was a perfect opportunity to warm up the 3D printer and design something custom.

After many iterations, I decided on a simple circular housing. About the half the width, but twice the height of a cookie, the housing seems small enough to fit anywhere but just large enough to fit the Photon board, Neopixels, and a small light diffuser. With a thickness of just 8mm, light would ‘glow’ from what seemed to be a solid object. I chose arctic white PLA from Faberdashery as I have had very good results and finishes with this particular PLA in the past.

Next up, was the soldering of the Neopixels Jewel directly to the Photon board. Simple enough once I trimmed down the headers. Neopixels have pull up resistors as standard so a direct connection works fine. With just three wires to connect, this was a breeze. One to 3.3v, one to ground, one to a pin - in this case D5.

Notification button for Shopify Store: Housing for Unit

Next, I used a hole punch to make a hole in the housing allowing for a mini USB cable to power the board (which also has the nifty feature of holding the lid of the gadget in place.) The gadget now has its final form — at this point it just needs code to come alive.

Notification button for Shopify Store: Gadget in Housing

Now I needed the gadget to listen for notifications from Shopify. The Photon works independently of a computer with its own wifi chip and processor. A Photon connects to the Spark cloud where it can listen for ‘events’ which can then trigger routines. All pretty simple using the subscribe method.

The final part of the puzzle was to direct the webhook POST data from Shopify to the Spark Cloud. We don’t actually require any of the JSON data sent with the POST request, just a way to 'ping' the Spark cloud. My PHP is a little rusty but I just about managed to use cURL to process the POST request. This little PHP script just sits on my own server and awaits a POST request from a Shopify webhook.

Flash the Photon with the code below, upload the PHP scripts to a PHP enabled server and add the URL of these scripts to the Shopify notifications panel and you are ready to go. Voila! Gentle notifications for you or your client that require no action.

Get the code

Craig Lockwood