Adding a Custom Button

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 12×12 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]