Add an integrated cart to your Shopify store

This guide explains how to set up the new integrated Firmhouse cart on your Shopify store. This allows your customers to add items to their cart and view it while staying in your webshop. They will only leave your shop once they go to checkout.

When successfully set up it will look like this:

To get this working in your Shopify store you will need to do three things:

Add the Firmhouse Storefront JS SDK to your theme's code.
Update or replace the existing "Add to cart" button.
Update or replace the existing "View cart" button.

Before following this guide make sure your Firmhouse project is connected to Shopify.

Have your Storefront token ready

Before continuing this guide. Make sure you've created a Storefront token.

Embed the Storefront JS SDK in your Shopify theme

Edit your Shopify theme and add the following snippet to your <head> section, replacing yourtokenhere with your actual token.

<script 
  src="https://storefrontjs.firmhouse.com/dist/storefront.js"></script> 
<script> 
window.Firmhouse = { storefrontToken: "yourtokenhere", } 
</script>

This will be different for every theme but theme.liquid is typically a great place to add this next to the other scripts that you are loading in.

Add or update the Add to cart button

Almost there! Now we're getting to the fun stuff.

Lets make sure that that the Add to cart button on your product detail pages will actually add the product to the cart.

You want to locate the liquid file that contains your Add to cart button. Most likely this is in your product-template.liquid but that can be different for every theme.

Open product-template.liquid and find the line where the product form gets loaded in. It looks like this:

Screenshot of Shopify theme editor highlighting the line of the product form.

{% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}

Pro Tip: Use Ctrl/Cmd + F to search within the file and look for form 'product'

This line might look a bit different based on your theme. Add the following to the end of the line, before the %} closing brackets:

,data-firmhouse-target: 'productForm', data-variant-id: {{product.selected_or_first_available_variant.id}}

The full line should look like this:

{% form 'product', product, class:form_classes, id:form_id, data-product-form: '',data-firmhouse-target: 'productForm', data-variant-id: {{product.selected_or_first_available_variant.id}}  %}

Make sure you save the file and continue.

Link your quantity field (Optional)

Do this only if you are using a quantity field on your product detail page.

Within product-template.liquid locate the quantity field. Usually that is a few lines below the product form:

Screenshot of Shopify theme editor highlighting the line of the quantity selector.

<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">

Add the end of the input tag add the the following code:

data-firmhouse-target="quantity"

so that the full line looks like this:

<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector" data-firmhouse-target="quantity">

Make sure you save the file and continue.

Verify that everything went well

Clicking on the Add to cart button should trigger a new notification telling you that the product got added to the cart:

Screenshot showing Firmhouse added to cart overlay after clicking the Add to Cart button.

Troubleshooting

If the "add to cart" button is not working as expected, check for (previous) installed apps that affect the checkout experience. Even removed apps can leave traces of code (JavaScript) in the theme that affect the behaviour of certain parts and block the full use of our Firmhouse code.