Shopify’s new Timber theme is a great new way to start building custom store themes. It’s got a sensible selection of components built right in. It’s like Bootstrap for Shopify designers.

In this article we’ll look at how easy it is to add a custom Back In Stock button into the product page in two easy steps.

You’ll need to have Back In Stock installed in the store for the button to work. If you haven’t go Back In Stock setup yet go do that first.

Adding the button to the product page

Take a look at one of your product pages with a sold out product. In Timber the Add to cart button appears right next the product image. We want the Back In Stock button to appear just after it.

The Back In Stock button to appear just after the add to cart button

In the theme editor open up product.liquid.

Scroll down to the Add to cart button which should be on or around line 145.

<input type="submit" name="add" class="btn" id="addToCart" value="Add to Cart">

Add another button right on the line after it. To differentiate it from the ‘Add to cart’ button we can use Timber’s built in secondary button style by adding the class name btn-secondary. We can also set the new element to be type=button so it doesn’t submit the form when clicked.

<input type="submit" name="add" class="btn" id="addToCart" value="Add to Cart">
<input type="button" name="bis" class="btn-secondary" id="BIS_trigger" value="Email when available">

Hit Save and reload the product page. The new button should sit just after the Add to cart button.

The Back In Stock added to the product page

So far so good - but what about multivariant products? We only want this new button to appear when a sold out variant is selected. For that we can dive into some JavaScript.

Hide or show the button with JavaScript

When the customer chooses a size or style from the dropdown it fires a little JavaScript function called selectCallback. This function handles toggling the ‘Add to cart’ button to display ‘Sold out’ (and back again). The relevant logic is in product.liquid around line 207.

if (variant.available) {
  // We have a valid product variant, so enable the submit button
  addToCart.removeClass('disabled').removeAttr('disabled').val('Add to Cart');
} else {
  // Variant is sold out, disable the submit button
  addToCart.val('Sold Out').addClass('disabled').attr('disabled', 'disabled');
}

We want to do the same with the Back In Stock button, so add two lines: one for the variant when it’s sold out (show the button) and one when it’s available (hide the button):

if (variant.available) {
  // We have a valid product variant, so enable the submit button
  addToCart.removeClass('disabled').removeAttr('disabled').val('Add to Cart');
  $('.main-content #BIS_trigger').hide();
} else {
  // Variant is sold out, disable the submit button
  addToCart.val('Sold Out').addClass('disabled').attr('disabled', 'disabled');
  $('.main-content #BIS_trigger').show();
}

Hit Save and reload the page again. Try switching between a sold out and available product variant. The button should politely show or hide itself as required.

Questions? Comments? Drop an email to support@backinstock.org. We’d love to hear from you!

A dive into the workflow behind sending (or not sending) customer notifications

Store owners occasionally contact support asking for details on what steps are involved causes a notification to be sent. This hasn’t been published previously because it’s a little more complex than you would expect.

As more stores are working with an advanced or hybrid setups, such as inventory being managed by a third party service, it can be useful to understand the checks that are performed before sending a customers notification.

The quick summary is

Customer notifications are sent when sending is enabled, a product is published and the variant inventory is greater than zero.

Let’s break down the workflow step-by-step.

Are there any notifications?

The first check is to actually see if there are any unsent customers notifications. If there the delivery task continues to the next step.

Is sending enabled?

Next, the store account is checked to make sure sending notifications is allowed. If for example, you have disabled delivery we stop here.

The app also checks if a delivery policy is enabled. This limits the number of notifications sent for a single product variant per hour or day.

If neither of these settings will prevent email being delivered we continue to the next step.

Is the product published?

It’s important that the product is published on the store. Sending the URL for a hidden product to the customer is pointless and frustrating - clicking it will only get the you as far as page not found message. If the product is hidden we stop here. If it’s published, we can continue.

Is the inventory quantity greater than zero?

Finally, we check the product is in stock by looking at the inventory quantity. If the quantity is greater than zero (1 or more) the variant is considered to be in stock.

Note that the inventory management setting is ignored. This means you can use external inventory tools to mange your catalog. As long as they updated the quantity field Back In Stock will happily consider the product variant to be in stock.

Send the email

Finally, the email is sent and customers can start placing orders.

Delivery Policy is the first new feature launch for 2014, and something a few of the bigger stores are really going to appreciate.

Sometimes you can find yourself with a popular product on your hands. Lots of customers have registered for a back in stock notification. Great!

But what if your supplies are constrained? Your distributor doesn’t have enough units to cover the size of the order you’d like to place. Or it’s been sometime since you last stocked the product - how many of the customers waiting will convert to a purchase?

Setting a delivery policy lets you control how many customers are notified at once.

Normally when a product is restocked all the customers waiting for the item are notified by email by Back In Stock. If you don’t have enough product inventory to cover all the demand you can end up with a customer receiving an email notification for a product only to arrive at your store and find it already sold out again.

With the delivery policy feature you can control how many customers are notified at once.

For example, say your stunning designer wall clock has been featured on @ShopifyPicks and several hundred customers are waiting to buy. You can only reorder 20 this week so you’d only like to notify 20 people at a time.

By enabling the Delivery Policy for your account you can choose to notify only as many customers per hour as you have units to sell. Customers notifications will continue to be sent each hour until all customers have been notified or the inventory sells out again.

If you’d like to read more about setting up a Delivery Policy for your account take a look at the Delivery Policy help page.

A major new feature to help you grow your store mailing list is available today: MailChimp integration.

We’ve covered a few ways to build your mailing list, and today there’s one more: Back In Stock now integrates with MailChimp. This new feature allows customers to opt-in to your mailing list at the same time a product notification is created. It’s simple to setup, and you can select which mailing list new customers are added to.

To get started log into the app and choose Customization, MailChimp Integration. It’s quick and simple to setup with no template editing required. All you need is your MailChimp account.

This new feature is available to all accounts on a paid plan. Need help or more information on this feature? Or just want to share how it’s working on your store? Great! Please get in touch.

Email marketing is one of the key tools for growing an online store. MailChimp, with powerful features and easy to use interface, is one of the most popular tools for managing email marketing campaigns. Here are some top apps to help to promote your Shopify store using Mailchimp email marketing.

If you’re not convinced about the the value of email marketing have a read of Checkout Why Email Marketing is the Key to Ecommerce Success. Then come back and get started.

Chimpified - the official MailChimp app for Shopify

This is a must have if you’re using MailChimp with your store. Chimpified automatically adds customers to your MailChimp list after placing an order. Chimpified supports segmenting and the MailChimp Ecommerce360 features, so you can then send email campaigns to specific customers based on certain criteria. For example, target customers who placed an order over a certain value, or ordered a specific product.

Zenbox - MailChimp data in Google Mail

Once you have customers added to your list you want to make the most of that data. With the Zenbox Google Chrome extension your MailChimp subscriber data appears alongside email messages when using Google Mail. You can also update the subscriber record in place, keeping your MailChimp list up to date and relevant to your customers.

Autopilot - MailChimp email marketing while you sleep

Now you have your MailChimp list growing you want to make the most of it. Autopilot does the hard work for you. Autopilot automatically sends a monthly or weekly newsletter to your MailChimp list based on new and featured products in your catalog.

Updated November 12, 2013: Back In Stock now supports MailChimp, too!

Don't miss the next post

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