Shopify Subscribe Checkout Button sample code | Firmhouse

To add a Subscribe, Lease, or Rent button to your product detail pages in Shopify, you can take and adapt the following sample code snippet.

The most common place where the code will be included is the product-template.liquid file in your Shopify template. This is also the template file where the usual Add to cart button is implemented.

This code snippet you'll see below includes support for:

Options and Variant selection, such a sizes, colors, etc.
Quantity selection.

All you need to do is replace the var firmhouseCheckoutUrl with the Checkout URL of your Firmhouse project.

It's also possible that you need to change the code that fetches the quantity from the Quantity input field. As you or your theme might have customised.

Sample Code

<a data-role="firmhouseSubscribeButton" href="#" class="btn product-form__cart-submit" style="background-color: pink; color: black">
  Subscribe
</a>

<script>
  var firmhouseVariants = {
    {% for variant in product.variants %}
      {% if variant.metafields.firmhouse.product_id != null %}
        {{ variant.id }}: {{ variant.metafields.firmhouse.product_id}},
      {% endif %}
    {% endfor %}
  }
  var firmhouseCheckoutUrl = "https://checkout.firmhouse.com/YOUR-FIRMHOUSE-PROJECT?add_ordered_products[{FIRMHOUSE_PRODUCT_ID}]={FIRMHOUSE_QUANTITY}"

  document.querySelector("[data-role='firmhouseSubscribeButton']").addEventListener("click", function(event) {
    var variantId = new URL(window.location.href).searchParams.get("variant") || {{ product.selected_or_first_available_variant.id }};
    var firmhouseProductId = firmhouseVariants[variantId];
    var url = firmhouseCheckoutUrl.replace("{FIRMHOUSE_PRODUCT_ID}", firmhouseProductId);
    
    var quantity = 1;
    var quantityField = document.getElementById("Quantity");
    if (quantityField) {
      quantity = quantityField.value;
    }
    url = url.replace("{FIRMHOUSE_QUANTITY}", quantity)

    window.open(url, "_self")
    event.preventDefault()
  })
</script>

If you only want to show (or hide) the button on certain products, you can make use of tags on your Shopify Product. For example, the following additional condition will only show the button for products tagged with Subscription.

{% if product.tags.contains 'Subscription' %}
  <a data-role="firmhouseSubscribeButton" href="#" class="btn product-form__cart-submit" style="background-color: pink; color: black">
  Subscribe
</a>
{% endif %}