In this article you will learn how to set up the integration so that customers will be able to log into their Self-Service Center (SSC) by logging in with their Shopify username and password.

This consists of two steps:

Ensure the native Shopify integration has been set up
Add a redirect in your store

Request Shopify app credentials

Please reach out to our Firmhouse support to request Shopify app credentials which you need to install this app. Use the chat bubble on the bottom right or email support@firmhouse.com.

Add a redirect in your store

Now it's time to add a redirect link in your store. This involves editing some HTML of your online store. We will provide two examples of how to do this.

Customers use both the Shopify account page and the Firmhouse SSC.
Customers only use the Firmhouse SSC.

Both examples start with the same steps:

Log into your Shopify store admin page
Click on Sales channels -> Online Store
For your Current theme, click on Customize
In the header click the three dots -> Edit code
Find the file customers/account.liquid in the templates folder

Choose how you want to set up the redirect:

Customers use both the Shopify account page and the Firmhouse SSC

While editing customers/account.liquid, place the following link somewhere in the HTML so that it makes sense in your theme
1. ```
<a href="/a/firmhouse">Click here to go to your Firmhouse SSC</a>
```
2. You are free to edit this example in any way, as long as the href attribute is unchanged
Click on Save

Customers only use the Firmhouse SSC

While editing customers/account.liquid, place the following piece of code somewhere at the top of the file
1. ```
<script>
  window.location = '/a/firmhouse'
</script>
```
2. Warning: This will always redirect anyone going to your Shopify account page to the Firmhouse SSC, please make sure this is what you want.

Can't find the customers/account.liquid file

If you can't find the file, it means your theme doesn't use it and you'll need to add the redirect in another way.

From the Shopify admin page, go to Content -> Menus
Select the Customer account main menu
Add a new menu item. Label it "Subscriptions" or something similar and set the link to /a/firmhouse
Confirm the link
Click on Save

This will add a new Subscriptions button to the header of the account page.

Styling error messages

If a customer is redirected to /a/firmhouse but cannot be logged into the Firmhouse SSC (due to either their email not being found within your Firmhouse project or not being logged into their Shopify account), an error message will be displayed in English. We’ve added a unique FH-SSO--not-logged-in class to this error message, enabling you to easily target it with custom CSS and style it to seamlessly match your store's design.

We also display a separate error message for technical issues, such as when the app is not correctly installed or configured. We've added a unique FH-SSO--error class to this message, allowing you to target and style it separately.

How to test the integration

After following one of the examples above you can test the integration by logging into your Shopify store with an email address that has an active subscription in Firmhouse. Once logged in you should be able to click on the link you just added, or be redirected if you opted for the second example.

Limitations

Currently, it is not possible to disable the original (magic link) login flow. The original login form which sends customer an email with a magic login link will remain active.

The only thing that changes for customers still using the original login flow (because they might have bookmarked the login form page) is that they are sent to your Shopify store upon logout.

Demo

shopify_sso_app_demo.mp4