Add an integrated cart to your Shopify store
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Before continuing this guide. Make sure you've created a Storefront token.
Edit your Shopify theme and add the following snippet to your <head> section, replacing yourtokenhere with your actual token.
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.
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:
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:
The full line should look like this:
Make sure you save the file and continue.
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:
Add the end of the input tag add the the following code:
so that the full line looks like this:
Make sure you save the file and continue.
Clicking on the Add to cart button should trigger a new notification telling you that the product got added to the cart:
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.
