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 matt@backinstock.org

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 matt@backinstock.org.

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.

A new feature was quietly released last week. The Products report allows you to view all products that have a current or past notification recorded against them.

To view it, click ‘Products’ in the top menu from your dashboard.

You can sort by any column, including unsent notifications (your most wanted products) and sent notifications (your all time most wanted).

This has been one of the most requested features. I’m very happy to finally release it and I hope you find the data useful.

If you have any requests for additional functionality please let me know.

The standard email template has been replaced with a new, better looking HTML version.

The new email tempalte

The new template includes a big, beautiful product image with a Buy Now link prominently above it. Below the image is a short bit of text explaining why the customer has received the email, followed by another Buy Now link.

I think it’s a huge improvement on the previous template, and all new accounts will start using it automatically.

If you have an existing account you notifications will continue to use the existing template unless you want to upgrade. If you have customised your email template, and choose to upgrade, you will lose all your changes.

If you would like to upgrade to the new template you can use the Restore Default button found under Settings, Email Template. The new template will replace your current template and you can then apply any changes you previously made.

The layout of the new template is better, but more complex, so editing the template is also more complicated. A future is planned to include basic colour and text editing controls, similar to the Shopify theme settings interface.

If you have any feedback or questions about the new template please send an email to info@backinstock.org

Don't miss the next post

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