Signup Button Improvements

The JavaScript widget that powers the button and form on store product pages has been upgraded with some great new features.

New look

The first thing you will notice is the new look. The form now appears centred in the middle of the screen. In supported browsers the background is semi-transparent and the corners of the form are rounded off. A product image now also appears in the form next to the selection dropdown. Finally, after hitting submit the customer will see any success or errors messages rendered directly above the submit button.

Detection for common multi-variant dropdowns

Many stores offer products with several variants and provide a dropdown to allow the user view a particular variant. It’s currently not possible to detect which variant has been selected using the Shopify API so previously the Notify Me button would appear on any product page with at least one variant out of stock. This hasn’t been ideal and until now the only way to show the button for a specific variant was with custom JavaScript.

The new widget now attempts to detect if a product variant dropdown exists on the page. If it does the button will show and hide based on the current selection of the user. This won’t work on all stores. If you are using the standard Shopify multi-variant dropdown it probably will. If for some reason it doesn’t work you can still use custom JavaScript to how and hide the button as needed.

Show the form with an embedded link

It’s now even easier to create your own embedded link to show the registration form. Add a link to your product page, such

<a href="BIS_trigger">Notify me when available</a>

and the widget will detect it and show the button when clicked. This is perfect for stores with products variants displayed using a list of radio buttons, or where greater integration with the shop theme is required.

I’ve also created a tutorial that walks you through adding this link using the Shopify template editor.

Smaller and faster

One of the most important (but less obvious features) in this new release is a dramatic reduction in file size. Compressed file size (what actually gets sent over the network to the browser) has been reduced from 35Kb to just 11.5Kb. The button and form will now appear sooner for your customers. Hopefully we’ll see an increase in the number of notifications being registered.

How to upgrade

You can upgrade by visiting the widget customisation page and clicking ‘Enable new widget’. You should then take a look at one of your product page with an out of stock product and make sure everything is working.

If you’ve added custom CSS for your current widget you will probably need to update it when upgrading.