If, like me, you’re a fan of Panic’s Status Board for iPad you’ll be glad to know Back In Stock now provides support for adding your Most Wanted catlaog items as a table panel. To get setup, login to Back In Stock on your iPad and then visit http://backinstock.org/embed.

The last few months have seen a surge in the use of customers visiting online stores from their handheld devices. To better support these customers the Back In Stock registration form will scale to fit the screen width on a narrower devices, such as smartphones or small tablets. As long as you are running the latest version of the app on your site you don’t need to do anything to enable this feature. If you’re not, you’ll see an upgrade button on the ‘widget settings’ page which will update your site automatically with one click.

There’s a huge range of devices on the market now and this is only going to grow in the future. I want Back In Stock to work well on as many as possible, so if you notice any rendering issues on a certain device please let me know by dropping an email to [email protected] .

A question that comes up a lot is how to add a custom button the product page. In this short video I demonstrate how to achieve this using the custom trigger feature that was recently introduced.

Video Transcript

Here have a product page selling a photographic print with four different product variants. The second variant, the 12x12 inch matte print, is out of stock and unavailable to order. The customer can clikc the notify me button to register for a notification, but I’d like to have a liunk next to the out of variant.

Let’s have a look at how I can do this.

The first thing I’ll do is turn of the standard button so it doesn’t appear on the product page for the customer. From the Back In Stock Dashboard I’ll go to Customize, Widget Appearnce. I’ll scroll down and uncheck ‘Always show button’, and hit save.

When I refresh the produce page the green button no longer appears. It’s up to me to add a link to the product template to show the registration form. I’ll do that next.

In the template editor for my store I’ll open up Product.liquid. This is the tempalte that is used for rendering the product page. Now I need to find the markup in the tempalte that display the produce variants in the product page. Unless you are using the exact same template your markup will look a little different to mine. What I’m looking for is the content that is used when the variant is unavailable.

Here it is:

{% if variant.available %}
<input type="radio"{% if variant.compare_at_price > variant.price %} data-compare-at-price="{{ variant.compare_at_price | money_with_currency }}"{% endif %} data-price="{{ variant.price | money_with_currency }}" id="{{ variant.id }}" value="{{ variant.id }}" name="id"{% if found_available_variant == false %}{% assign found_available_variant = true %} checked="checked"{% endif %} />
<label for="{{ variant.id }}">{{ variant.title }}</label>
{% else %}
<input type="radio" class="out-of-stock" id="{{ variant.id }}" value="{{ variant.id }}" name="id" disabled="disabled" />
<label for="{{ variant.id }}" class="out-of-stock">{{ variant.title }}</label>
{% endif %}

The Liquid tag {% if variant.available %} handle the content to be show when the variant is availabe to order. Then the Liquid tag {% else %}, and after that the contnet to be rendered when the variatn is not available. This is where I want to add my link to show the registration form.

I’ll put in an anchor. I don’t want it to load a new page when the customer clicks it, so I’ll use a hash for the href. I’ll put in a friend message and close the tag. There’s one more thing I need to do so that Back In Stock recongises the anchor when the customer clicks it: I need to set the id to be BIS_trigger.

<a href="#" id="BIS_trigger">Notify when available</a> 

I hit save, and take a look at the product page.

There on the product page is the link against the out of stock variant. I can click on it, and the registration form appears and I can enter my email address and register as I would normally. And that’s it. If you have any question please drop me an email at [email protected]

Several updates were launched today. Here’s the rundown.

New icon, streamlined layout

There’s a shiny new icon along with a simpler layout for the homepage. Once logged in you will notice the dashboard has been tidied up and a new navigation bar at the top. It’s slimmer, allowing more screen space for you account information.

Your account activity summary breaks out a count of notifications created and sent for the current month. The product demand report includes a sparkline visualization for the number of notifications created for that SKU for the week.

New plans

New plans have been added. The trial plan is now a permanent free plan. Previously the trial plan offered delivery of five notifications before requiring an upgrade to a paid plan. Accounts on the free plan now receive five notifications delivered each month. If you are currently on the trial plan, you’ll be upgraded to the free plan automatically. As before, you can continue to record notifications even after sending your quota of notifications for the month.

The Standard paid plan is no longer available, and has been replaced by three paid plans with different service levels. All paid plans now include Activity Reports.

If you are already signed up the Standard plan your account will remain on that plan.

Activity reports

Activity Reports provide a daily or weekly update on your account activity. You’ll receive a total count of notifications created and sent for the day (or week). In addition, you’ll get a list of the ten most wanted SKUs, delivered directly to your inbox.

To receive an Activity Report you need to set it up. Click Customize, and choose Activity Reports, and follow the instructions.

This has been an often requested feature so I’m delighted to release it. There’s scope for further information to be added the activity reports so please email me any feedback or suggestions to [email protected].

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

New look

New look form

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.

Don't miss the next post

Subscribe and receive new posts, actionable info, and more to your inbox.