This guide will assist in deploying Cymatic to your Shopify store. By default, there is no password policy built into Shopify. Cymatic can quickly and easily be integrated into your Shopify store to enforce the requirements your organization requires.

To complete the below steps, modification of the theme code for your Shopify store is required. An administrator account for your Shopify store is required. An administrator account for the Cymatic platform is also required.
1. Import the necessary JS and CSS files into Shopify
To fully protect the registration, login, and password reset pages of your Shopify store, four files are required. They can be downloaded as a zip file from the following link:
https://drive.google.com/file/d/17w0o9PyqRyqS0gaKopBTuceAzVCimtau/view?usp=sharing

Once downloaded, extract the files and upload them to your Shopify store by navigating in the Shopify admin console to online store > themes. Find the theme you want to edit and click actions > edit code. In the assets section, click add a new asset. On the upload a file page, click on the choose file button and upload one of the four files. Repeat this procedure for the remaining three files. You should now be able to see the four imported files in the assets section.

The contents of the files provided are built using the default ID values for the selectors on the registration, login, and password reset forms. If you have modified these values on your forms, you will need to modify the files provided. For the registration and password reset pages, Cymatic needs the selectors for the password text box and the submit button. For the login form page, the selectors for the form, username, password, and submit button are required. For assistance on obtaining the correct selectors, please refer to step 4 of the Deployment for Login Forms guide.
There are two CSS files. For most scenarios, form.css does not require any modification. If you would like to modify the way the text is presented to the user, you can do so in criterias.css.
2. Create the site in the Cymatic app
Once logged in to the Cymatic app, depending on your administrative access, you will be presented with either the companies or sites dashboard. If you are on the ‘companies’ dashboard, click the appropriate company in which you would like to create the new site. Once you are on the ‘sites’ dashboard, click on the ‘New Site’ button in the top right corner. In the 'Site URL' text box, select either https or http as the protocol, and then enter the fully qualified domain name of the site you would like to add. An example would be https://cymlink.xyz. In the 'Site Name' text box, give the site a name. This is what the site will be referred to as within the Cymatic app. Optionally, you can upload an image file to represent the site. Once saved, the next page is where we will enter the selectors of the login form. If you have not modified the default values of the form in the Shopify app, the following values can be used:

Login form selector: #customer_login
Username field selector: #CustomerEmail
Password field selector: #CustomerPassword
Submit button selector: #CustomerLoginForm form input[type=submit]


With the selectors entered, click continue. On the deploy page, copy the text out of the code block and paste it into your favorite text editor. This snippet will be used in the next steps and will need to be deployed before the site creation can be completed within the Cymatic app.

3. Enter the snippet and CSS links into the theme.liquid file
In the Shopify admin console, navigate to online store > themes. Find the theme you want to edit and click actions > edit code. In the layout section, click on theme.liquid. In the head section, the Cymatic snippet and CSS files need to be added. Add the snippet snippet obtained in step 2.

When adding the snippet to the theme.liquid file, do not add the last line at this time.
To add the CSS files, please use the following lines:
<link rel="stylesheet" href="{{ 'form.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
<link rel="stylesheet" href="{{ 'criterias.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">

When the snippet and CSS files are added, it should appear as follows in the theme.liquid file:


Save the changes to the file within the Shopify admin console.

4. Add the necessary attributes to the registration, login, and password reset pages
In the Shopify admin console, navigate to online store > themes. Find the theme you want to edit and click actions > edit code. In the templates section, there are three files that need to be modified: register.liquid, login.liquid, and reset_password.liquid.

register.liquid
In register.liquid, the following line needs to be added to display the help text to the end user:
<div class="cy-criterias"></div>

This is typically added just above the submit button.

In order to control the password policy, add cy-form-submit and cy-form-submit-disabled as classes to the submit button.

After the form, add the required JS file with the following line:
<script src="{{ 'shpfy_reg.js' | asset_url }}" defer="defer"></script>

When complete, it should appear similar to the following:


Save the changes to the file.

login.liquid
In login.liquid, add the followinng line to the end of the file:
<script>CymaticXid.v2.init({ login: { selector:'#customer_login', username:'#CustomerEmail', password:'#CustomerPassword', submit:'#CustomerLoginForm form input[type=submit]' }});</script>

Save the changes to the file.

reset_password.liquid
In reset_password.liquid, the following line needs to be added to display the help text to the end user:
<div class="cy-criterias"></div>

This is typically added just above the submit button.

In order to control the password policy, add cy-form-submit and cy-form-submit-disabled as classes to the submit button.

After the form, add the required JS file with the following line:
<script src="{{ 'shpfy_rst.js' | asset_url }}" defer="defer"></script>

When complete, it should appear similar to the following:


Save the changes to the file.

5. Finish the site creation in the Cymatic app
Open a new tab in your browser and connect to your Shopify store login page. Once connected, go back to your Cymatic app and click continue to get to the test page.

If your session has timed out, please log back in to the Cymatic app and navigate to the site you just created. Step through the pages to get to the test page for the site. Once on the test page, open a new tab in your browser and connect to your Shopify store login page.
Click on the test implementation button. Upon success, the Shopify integration is complete. To configure the password policy within Cymatic, please refer to the Credential defense requirements configuration section in the Credential Defense for Registration and Password Reset Forms guide.
Was this article helpful?
Cancel
Thank you!