How to integrate with Shopify

Installing the Prefinery JavaScript Snippet

1

Login to your Shopify admin dashboard and in the Sales Channels section navigate to Online Store >  Themes. 

2

Under your Current theme, click on Actions and in the dropdown select Edit code to go to the Theme Code Editor. 

3

In your Prefinery project dashboard, navigate to Installation then copy the JavaScript Snippet. 

4

Back in the Shopify theme code editor you have the directory of theme files on the left, and a space to view and edit the files on the right. 

In the  Layout directory find and open the theme.liquid file. Scroll down the file until you see the closing </head> tag (or use your browser's find functionality) and right above that add a new line to paste in your Prefinery JavaScript Snippet. Save your changes when done. 

Embedding the Signup Form on a page

Now that you've installed the JavaScript Snippet, the next step is to display the signup form where you want it to. Here's how: 

1

In the  Sales Channels section of your Shopify admin dashboard navigate to Online Store > Pages. You can either add a new page or edit an existing one where you'd like to embed your signup form. This will bring you to the Shopify Page Editor. 

2

In the Installation page of your Prefinery project dashboard, copy the Embedded Form code. 

3

Back in your Shopify page editor, click on the <> Show HTML button then in the Content add a new line to paste in your embed code. 

That's it! When you view the page on the frontend, you'll find that your Prefinery form is now embedded on your Shopify store page. 

Embedding the Prefinery Signup Form on the Password page

Shopify allows you to restrict customer access to your online store by enabling the password page. This can be useful as a landing page while you're still setting up your store before launch, or if you simply just want to gate access to the store, only allowing those who are exclusively invited. 

Shopify by default places a newsletter or email collection form on this page which you can replace with a Prefinery-powered signup form to better suit your intended user experience. Here's an example: 

• A visitor lands on your store and see the password page with the Prefinery signup form. 
• They fill out the form, submit it, and are shown the referral page telling them to refer friends in order to get access to the store. 
• Once the user hits your minimum number of referrals to gain access to the store, you can invite them which triggers the invitation email that contains the password to your store. 
• Additionally, if you also want to automatically add each user that applies through your Prefinery form as a new customer to your Shopify store, you can use Zapier to setup that integration. 

Here's how you can embed the Prefinery signup form on your password page: 

1

Login to your Shopify admin dashboard and in the Sales Channels section navigate to Online Store >  Themes. 

2

Under your Current theme, click on Actions and in the dropdown select Edit code to go to the Theme Code Editor. 

3

In your Prefinery project dashboard, navigate to Installation then copy the JavaScript Snippet. 

4

Back in the Shopify theme code editor you have the directory of theme files on the left, and a space to view and edit the files on the right. 

In the Layout directory find and open the password.liquid file to edit it. Scroll down the file until you see the closing </head> tag (or use your browser's find functionality) and right above that add a new line to paste in your Prefinery JavaScript Snippet. 

Save your changes when done. 

5

In the Installation page of your Prefinery project dashboard, copy the Embedded Form code. 

6

Back in your Shopify theme code editor, open the  Sections directory and select password-content.liquid. Find the default newsletter form's opening tag {% form ... } and right above that insert a new line to paste in your copied embed code. 

Depending on the version of the theme editor you're using, the location or file to edit might be different. For example and like as shown below, you may find that you'll have to edit code in a differently named file like email-signup-banner.liquid.

At this point after saving your changes your Password Page will display both Shopify's and Prefinery's forms. To disable Shopify's by commenting out the whole form code, right before the form's opening {% form ... } tag insert an opening {% comment %} tag. 

Scroll further down the file and and right after the form's ending {% endform %} tag insert the closing {% endcomment %} tag. Save your changes when done. 

That's about it. Below is an example of a simple Prefinery signup form embedded on a Shopify Password page.

Automatically adding new Shopify customers to your Prefinery campaign

Using Prefinery's JavaScript Web API, you can automatically add new customers in Shopify as new users in your Prefinery campaign, and even trigger rewards for users who have referred new customers to your shop. 

1

[Optional] If you want to set up a reward in Prefinery that requires a person to refer friends AND that those friends make a purchase, then create the reward in Prefinery and be sure to set the Award Event to Custom Event with the word "purchase" as the Award Event Name. 

Check out our help guide on triggering rewards with a custom event for more information on how this works.

2

In your Prefinery project dashboard, navigate to Installation then copy the JavaScript Snippet. 

3

In your Shopify admin dashboard, click on Settings in the bottom-left corner, then choose Checkout. 

4

Scroll down to the Order processing section and paste in the Prefinery JavaScript Snippet you copied from step 2 into the Additional scripts box. 

5

You'll then use Prefinery's JavaScript Web API in order to add new Shopify customers as new users in your Prefinery campaign. Depending on your use case, you can use one of the following JavaScript code snippets: 

A. If you just want to add the customer to Prefinery after they make a purchase: 

{% if first_time_accessed %}
  {% if order.email %}
    {% if (order.total_price | money_without_trailing_zeros) > 0 %}
      <script type="text/javascript">
        prefinery('addUser', '{{order.email}}');
      </script>
    {% endif %}
  {% endif %}
{% endif %}
	

The above code will add new customers to Prefinery, and track all shares and referrals through their referral link. See example #1 of our JavaScript Web API tutorials for more details. 

B. If you set up a reward in step 1, such that the customer's referral, after performing a custom action (e.g. "purchase"), also counts towards - and can trigger - a reward for their referrer, use this instead: 

{% if first_time_accessed %}
  {% if order.email %}
    {% if (order.total_price | money_without_trailing_zeros) > 0 %}
      <script type="text/javascript">
        prefinery('addUser', '{{order.email}}', function(user) {
          prefinery('triggerRewards', {
            email: user.email,
            event: 'purchase',
          });
        });
      </script>
    {% endif %}
  {% endif %}
{% endif %}
	

The above code will add new customers to Prefinery, record that they did the custom event "purchase", and track all shares and referrals through their referral link. See example #2 of our JavaScript Web API tutorials for more details. 

Copy the code snippet above that you'd like to use, then add a new line right after the Prefinery JavaScript Snippet you pasted in during the previous step, and paste in the code snippet. 

6

Scroll up a bit to find the Customer contact section and make sure that to select Customers can only checkout using email under To check out (since Prefinery requires the email address for the user to be added in your campaign). If you want to provide the customer a way to be contacted/updated via phone number, just enable that option under To receive shipping updates. 

Under Form options in the next section, you may also need to make the Shipping address phone number Optional or Required. 

7

Save your changes. 

Delivering discount codes to users as referral reward

With Prefinery, you can run a referral campaign for your Shopify store where you reward users with a unique, one-time-use discount code for referring others. Here's how you can set that up: 

1

Create your discount codes in Shopify following their guide here or use one of the many Shopify apps that allow you to generate discount codes in bulk. 

2

Following our guide on delivering dynamic codes from an uploaded list to setup the referral campaign at Prefinery's end.