> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ownid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> OwnID's Shopify Plus Connector is a low-code way to add passwordless authentication to your store with a few clicks.

By integrating Shopify with OwnID, you can implement the full set of OwnID features to simplify and streamline your user login experience.

## How it Works

OwnID supports integration with Shopify through our pre-built Shopify Connector. To use it, create your OwnID app in the Console and select the *Shopify Plus* connector as described below.

<img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi-tile-shop.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=abc9995ad9a7947eeaa53a543acb294c" alt="Shopify Plus Connector tile as it appears in OwnID Console" width="290" height="103" data-path="images/oi-tile-shop.png" />

Configuration on the Shopify side happens through the OwnID Connector in the Shopify marketplace. Ensure you have an account with admin access in Shopify.

Integrate OwnID with Shopify in four basic steps:

**Step 1** - Enable Multipass.

**Step 2** - Get your Shopify Token.

**Step 3** - Create a new OwnID No-code App.

**Step 4** - Insert OwnID Widget.

## Step 1 - Enable Multipass

Multipass login is for store owners who have a separate website and a Shopify store. It redirects users from the website to the Shopify store and seamlessly logs them in with the same email address they used to sign up for the original website. If no account with that email address exists yet, one is created. There is no need to synchronize any customer databases.

### To Enable Multipass

1. Log in to your Shopify admin and go to the **Settings > Checkout and accounts** page.
2. Scroll down to the **Customer accounts section** section and ensure that you have "Allow customers to log in from online store and checkout" selected.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shopify-config-users.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=4b346ec03741f6611ebe489c325d787a" alt="Shopify Checkout and accounts configuration screen showing the selection of the option to Allow  customers to log in from the online store and checkout" width="1245" height="559" data-path="images/shopify-config-users.png" />
</Frame>

3. Select **Enable Multipass**.

Once enabled, a secret will be shared with you. You need the secret during the OwnID onboarding. Make sure you keep your secret private.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shopify-multipass-v2.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=a4cdf9e67875497b26dc35c835f2b36a" alt="Shopify Customer Accounts" width="889" height="269" data-path="images/shopify-multipass-v2.png" />
</Frame>

## Step 2 - Get your Shopify Token

To implement our Shopify integration you will need to specify two identifiers:

* URL of your Shopify Store
* Shopify API access token.

In this section you'll learn how to get your API access token within your Shopify Store.

First enable a custom app from your Shopify owner's account:

1. Log in to your Shopify Store as the store owner.
2. Select **Apps** in the admin section on the left sidebar.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop1.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=4777d4e376471d1f1074af60a4231359" alt="Shopify Customer Accounts setting screen" width="1455" height="716" data-path="images/shop1.png" />
</Frame>

3. From the dropdown menu, select **Apps and sales channels settings**.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop2.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=ecbba6bf6f0da75b739ed07da57d7aeb" alt="Shopify Customer Accounts setting screen with App and Sales channel settings option" width="1455" height="717" data-path="images/shop2.png" />
</Frame>

4. In the next window that appears click on **Develop apps for your store**.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop3.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=bdb5fa8b1ce4583c0b662a61f235a068" alt="App and Sales channel settings page in Shopify with the button labelled Develop apps for your store" width="1457" height="720" data-path="images/shop3.png" />
</Frame>

5. Click to **Allow Custom App Development** in the next two screens.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop5.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=550236c949cfdf3ec9270cca15c5d1f3" alt="Shopify confirmation page to allow custom development with the Allow Custom App Development button shown" width="1455" height="766" data-path="images/shop5.png" />
</Frame>

6. Select **Create an app**. You'll be asked to give your app a name, and add your email in the App developer text box.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop7.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=c146b5ff86cac150525651a18ad0c3df" alt="Shopify Customer Accounts" width="1451" height="685" data-path="images/shop7.png" />
</Frame>

7. Navigate to the **Configuration** tab and select **Configure** in the Admin API Integration section.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop8.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=09f9695574d46fcd9e5a1e23cec8ea3c" alt="Shopify Customer Accounts" width="1453" height="718" data-path="images/shop8.png" />
</Frame>

8. Under **Admin API access scopes** you'll see many categories. Scroll down until you reach **Customers**, or search for "Customers" in the search bar.
9. Select the boxes for 'write\_customers' and 'read\_customers'
10. Click **Save**.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop9.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=76529d94950bebd5cb80e4d605a3da3b" alt="Shopify Customer Accounts" width="1280" height="497" data-path="images/shop9.png" />
</Frame>

11. Go to the **API Credentials** and click on **Install** in the Access tokens box. The Admin API Access Token is generated. Click on **Reveal token once** to see the token as plain text. Make a copy to use during onboarding in the OwnID console.

<Frame>
  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shop12.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=e59a1590ddeee13640249b39c421ef0b" alt="Shopify Customer Accounts" width="601" height="402" data-path="images/shop12.png" />
</Frame>

<Info>
  **Securing User's Personal Data**

  OwnID does not store or process any user data. Users' public keys and device information are stored on your platform.

  Private keys are kept exclusively on the user's device and are never transmitted elsewhere.
</Info>

## Step 3 - Create OwnID Application

Each website integrating with OwnID must have an OwnID application.

1. Login to the [OwnID Console](https://console.ownid.com) (or create your account).

2. Click **+Create Application** from the Apps screen.

3. Enter a name for your application in the *App name* field.

4. From the *Choose your integration* panel, select the Shopify Plus tile. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi-integ-tiles.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=5bf0883b7b5a978e8d6cebd790538e47" width="400" alt="Profile editor" data-path="images/oi-integ-tiles.png" />

5. Click **Next**.

6. Enter the your Shopify settings and click **Continue**.  <img src="https://mintcdn.com/ownid/i3kGqVa3mIaTdz4d/images/shopify-settings.png?fit=max&auto=format&n=i3kGqVa3mIaTdz4d&q=85&s=2fe01b27a8dd347ef59e9a300f96aeac" width="400" alt="Profile editor" data-path="images/shopify-settings.png" />

7. Click **Explore my App** on the "Congratulations" popup. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi_app_ready.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=aeaaeef9f684aa99d048009c631e5e39" width="400" alt="Profile editor" data-path="images/oi_app_ready.png" />

8. From the *OwnID Settings* panel, copy the *App ID* and the *Shared Secret* for use in configuration on the Shopify side. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi_app_settings.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=57db84a4b0a11aab1b5c4fe17032df3f" width="400" alt="Profile editor" data-path="images/oi_app_settings.png" />

<Check>Your OwnID application and secret key are created and you're ready for next steps!</Check>

Complete the integration steps. Use your `Shopify Multipass secret` and `Shopify API Access Token` described above.

## Step 4 - Add the OwnID Widget

Lastly, we'll add the passwordless widget to the frontend login and registration forms.

Do this by editing three pages of your Shopify theme:

1. From your Shopify admin, go to **Online Store > Themes**.
2. Click **Actions > Edit code**. The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
3. On the left panel, go to the folder **Layout** and select the file **theme.liquid**. Place the following script in the `<head>` of the file:

```js theme={null}
<script>
((o,w,n,i,d)=>{o[i]=o[i]||((...a) =>new Promise((r, j)=>((o[i].q = o[i].q || []).push([{r,j,_isResolvers:true},...a])))),
(d=w.createElement("script")).src='https://cdn.ownid.com/sdk/'+n,d.async=1,w.head.appendChild(d);o[i].whenReady = o[i]('init')})
(window,document,'<appID>','ownid');
       ownid('init', {boxShadow:'none'});
</script>
```

4. Go to the **Sections** folder and select the file **main-login.liquid**. Place the following code **after** your login form:

```js theme={null}
  <script>
       ownid("login", {
            mobileInfoTooltipPosition:'end',
            loginIdField: document.getElementsByName("customer[email]")[0],
            passwordField: document.getElementsByName("customer[password]")[0],
            targetField: document.getElementsByName("customer[password]")[0].parentElement,
            onError: (error) => console.log(error),
            onLogin: function (data) {
                //setting user session
                window.location.href = data.token;
            }
        });
  </script>
```

5. Finally, inside the same folder **Sections**, select the file **main-register.liquid**.

6. Add the following input after your password field element, inside the registration form:

```html theme={null}
  <div class="ownIdData">
      <input id="ownIdData" type="hidden" name="customer[note][ownIdData]" />
  </div>
```

7. In the same file, insert the following code below the registration form:

```js theme={null}
  <script>
      ownid("register", {
            loginIdField: document.getElementById("RegisterForm-email"),
            passwordField: document.getElementsByName("customer[password]")[0],
            targetField: document.getElementsByName("customer[password]")[0].parentElement,
            onError: (error) => console.log(error),
            onRegister: function (data) {
                document.getElementById("ownIdData").value = "<ownIdData>" + data.data + "</ownIdData>";
            }
        });
  </script>
```

8. Save your changes.

<Check>Congratulations! Enjoy your Shopify Plus passwordless authentication!</Check>

### Client secrets

Your app's client secret is a unique key that authenticates your app when it requests access to a store's data. You can use your client secret to retrieve an access token for a store, or to verify a webhook request is genuine.

Retrieve your app's client credentials
Anchor link to section titled "Retrieve your app's client credentials"

You can manually retrieve your app's client credentials in the Partner Dashboard.

1. Log in to your Partner Dashboard.
2. Click Apps.
3. Click the name of the app you want to retrieve client credentials for.
4. Click Client credentials.
5. View or copy your client ID and client secret.

## Next Steps

### Ready to deploy?

<Card title="YES!" href="/building-blocks/pre-deployment-checklist" icon="rocket-launch">
  Take me to the Deployment Checklist
</Card>
