💡 This feature is currently in beta, please reach out to our support if you're interested in trying it out.

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 three steps:

Requesting Shopify app credentials with us
Installing the Firmhouse "Single Sign-On with Shopify" app
Integrating the app into your store

Requesting Shopify app credentials with us

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

Installing the Firmhouse "Single Sign-On with Shopify" app

After our support team has provided you with the required Shopify app credentials you can configure and install the app into your Shopify store.

Steps

In your Firmhouse project go to Apps in the main navigation.
Find the "Single Sign-On with Shopify" app and click Configure.
In the app configuration enter the Client ID and Client Secret provided by our support

Also fill in Your Shopify Store Domain with the myshopify.com domain (e.g.
firmhouse.myshopify.com)

Self-service center logout behavior has two options:
Customers only log out from Firmhouse: Will log out the customer from Firmhouse and redirect the customer back to the account page on your Shopify store.

Customers log out from Firmhouse and Shopify: Will log out the customer from Firmhouse and Shopify and redirect the user back to the homepage of your store.
Click Save to apply the changes.
Click on Install on Shopify and authorize the app with Shopify.

Once installed you should see a success message and the status should be Connected.

Integrating the app into your store

Now that the app has been installed you need to integrate the app into 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
Navigate to customers/account.liquid

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.

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