Note: This feature is still in beta. You might still encounter some technical hiccups.

This article explains how to set up the new integrated Firmhouse cart. 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:

See how it works in an example store (password: yiadra)

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

  1. Load in the Firmhouse Storefront

  2. Configure the Add to Cart button

  3. Configure the Cart button

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

Step 1: Create a Storefront token

  • Log in to the Firmhouse admin portal

  • Go to Integrations

  • Generate a new token and choose Storefront as access type

  • Locate the new Storefront token and copy it to your clipboard

Step 2: Add the Firmhouse Storefront to your Shopify theme

Head over to Shopify 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.

Not sure how to access the code of your theme? This article will help you.

Step 3: Configure your Add to cart buttons

Almost there. Now you have to make sure that the Add to cart button on the product page will add the right product to the new 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.

Copy this snippet and paste it where you want the button to show up:

<button type="button" onclick="Firmhouse.addToCart({ productId: {{current_variant.metafields.firmhouse.product_id}} })" class="btn" style="width: 100%;"> Add to cart </button>

Make sure to save the file.

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. From there you can also access the cart.

Step 4: Configure the cart button

The last step is to make sure that the new cart is triggered when a customer clicks on the cart icon.

First you need to locate where your Cart button is loaded in. Typically this will be in header.liquid.

Then make sure to add this to your button

onclick="Firmhouse.showCart()" 

Also make sure that href is set to #:

href="#"

Here's how it should look like:

Clicking the cart icon should now open the Firmhosue cart as a slide in cart on the right hand side.

Optional: Custom translations

The cart comes with English and Dutch translations. It is automatically translated based on the customers browser settings.

If you want to override these, you can do this through the configuration you did in Step 2. For example:

Or, if you want to add an additional language (like French), you can do this:

Here's a full list of of translation keys:


Did this answer your question?