Shopify Timber Theme

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 cartbutton appears right next the product image. We want the Back In Stock button to appear just after it.

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.

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 [email protected]. We’d love to hear from you!