Step-by-Step Guide for Configuring Shopify Web3 Login Application

Pre-requisite : Shopify Web3 Login Application

To configure SSO into Shopify with Web3 metamask wallet, you will need to install the miniOrange Shopify Web3 Login and Token Gating Application on your store:

Step-by-Step Guide for configuring Shopify Web3 Login and Token Based Restriction Application

Locking means restricting the users from accessing locked content on the Shopify store.

Lock Criteria

Based on the criteria you can restrict users from accessing the content such as users must be logged in to access the content, users must have specific customer tags to access the content, users have a passcode to access the content, or users must be from a specific location to access the content.

Step 1: Install application on your Shopify store.

• Click here to add Shopify Web3 Login application on your Shopify Store.

Step 2: How to Login using metamask wallet?

• Once the application have been successfully installed, you will be able to view the application dashboard. Enable the Display Login Widget on Storefront option as shown in the below image.

• Click on the Preview theme button and then manage the styling of the login widget as shown below. Enable the Web3 login widget and then click on the Save button at top right corner

• Navigate to your Shopify Store Login Page. You will be able to see the Login with CryptoWallet button.

• To enable login using metamask on your Shopify store, you will need to add metamask extention to your browser. If you are using chrome Click here to add metamask extention.
• Once you click on the Login with metamask button, a popup will appear where you have to verify the signature request. Enter your credentials and login into your metamask wallet.

• You will be successfully logged-in into your Shopify store.

Step 3 : Enable Token Gating over your Store

• Navigate to the application dashboard and enable Token Gating over Products option as shown in the below image.

• If your store is password protected, then please add your storefront_digest cookie value as shown below. Refer this guide to get your storefront_digest cookie.

• Now, navigate to Token Gating section in the left navigation bar.
• Click on the Start Locking button. You will be redirected to the New Lock section in the upper navbar.

Step 4 : Select the type of content on which you want to create a lock.

• Select the template and Enable the button as shown in the image below if you want to create a lock on this template.
• Let’s say you want to create a lock on Products. Then click on Enable to create a lock on products.
• You can select multiple items to include in Content to be Locked. You can also select content from multiple templates by simply enabling the button and selecting the content in that respective template.

• After Selecting the content that you want to lock, click on Create Lock button.

Step 5 : Add Token for the Campaign

Content will be unlocked only if the user have any of the below added tokens.

• Click on the Add new token button.

• Add Contract address of the token in the Contract Address section and choose the condition as per your requirements.
• Click on Add Token button.

Step 6 : Allow or Restrict

• Select whether to restrict or allow access to content if a customer satisfy lock criteria.

Step 7 : How to Lock?

• You can define the behavior of the locked page for the users who fail the lock criteria defined above.
  • Redirect to login URL
  • Redirect to store page
  • Custom HTML Code
  • Redirect to another URL

• Click on Save.
• You can see the list of all locks that you have created on the dashboard. You can Enable, Disable, Edit Lock, and Delete Lock for any lock from the dashboard.

Step 8 : Enable token gating extension

• Click on the Enable and Preview in Theme button and enable the Theme app extension.

• Enable the token Gating Block and make sure to click on Save on top right corner as shown below.