This document covers the complete integration of your KickoffLabs product into Shopify. Throughout this document we will cover:

  • Setting up a full pages contest on Shopify Pages
  • Adding KickoffLabs pop-ups and embed widgets into your store.
  • Hosting your own landing page outside of Shopify on your domain.

Adding KickoffLabs Contest Pages to Your Shopify Site

1. Add a Template for your Signup Page in Shopify

Back on your Shopify Dashboard select “Themes” from the left hand side.

From the theme dropdown select “Edit Code”

Edit Shopify Theme

Under “Templates” Pick “Add New Template”

Select for “Page” and name it “KickoffLabs Signup” (or other page)

Add New Template Options

Select everything in the template and remove it.

Paste the following code:

{% layout none %}

From inside of Kickofflabs open the page settings of your contest signup page. Then select “Download Page” from the tab.

Copy the code from “B. Upload an HTML Page to YOUR Server”

Paste that code below the {% layout none %} line you just added. It should look like this.

Shopify KickoffLabs Template

Save that template.

2. Add a new page to your Shopify store using the template you just created.

From your Shopify Dashboard scroll down to “Pages” on the left hand side. Then choose to “Add Page”. You’ll want to name the page for your campaign. We’ll just call it “Kickoff Contest”.

For the “Template”  you’ll want to select the one that you just created in Step 1 as shown here:

Select the Template on the new Shopify page.

Save this page.

You can now open it to preview.

3. Repeat Steps one and two for your thank you page or other Kickofflabs campaigns.

At this stage the Kickofflabs signup page is now hosted within your Shopify site. You can repeat steps one and two for your KickoffLabs thank you page or other pages from your KickoffLabs Account.

4. Update your default URLs within KickoffLabs (optional)

If the pages you created in steps 1 through 3 are going to be the main locations for your contest then you can update the default sharing and default thank you pages from your campaign settings.

On those settings pages you can select the “custom URL” option and paste in the signup and thank you page URLs from your Shopify site you created.

Preparing your Shopify platform for Kickofflabs Pop-Ups and Custom Forms

Kickofflabs pop-ups utilize javascript to collect leads, however, Shopify does not directly allow scripts to be integrated into your web pages without the help of an addon. This means we need to find a working addon that allows you to add scripts to the Headers and Footers of your web pages.

  1. When you first navigate to your Shopify page you are greeted by your dashboard. Within your dashboard there is an Apps link which brings you to your currently installed Applications. On the right side there is a button to visit the Shopify App Store.
  2. Once you get into the app store make a quick search for “jquery” at the top of the box. You should see an app called “Custom JavaScript & jQuery”
  3. Follow the steps on screen and install the App in your Shopify account.

Integrating Kickofflabs Scripts in your Shopify Store

  1. Copy the code generated for your plugin and navigate back to your Shopify Portal.
  2. Navigate back to the Apps tab of your Shopify store and select the Custom JavaScript & jQuery scripts application.
  3. Select the option to Add new JS snippet. In the Snippet name field create a name that makes sense for you. In this example we are using a Pop-Up Widget and we’ll name it “KickoffLabs Pop-Up”. Select the box to activate the As HTML option and paste your code into the Snippet code field.

(Optional) Add a Button for your KickoffLabs Popup

  1. Navigate to the page you want to modify. In the Content field there is a box on the upper right hand corner that allows you to view the HTML
  2. Navigate back to your Widget Configuration page and find the section Generating Your Own Popup Links. We’ll be choosing the option for a button.
  3. Paste the HTML for the button into your page.
  4. Save your page. View the page to confirm that the button is working.

Hosting Your Own Landing Page

If your goal is to have paths on your website (hosted with Shopify) be landing pages from KickoffLabs like this we recommend that you instead setup a part of your website to host all your landing pages.  This would be something like pages.MySite.Com.

This approach separates the hosting,  pages would load faster, and it is easier to manage. You only have to setup one subdomain that can be used to host an unlimited number of pages from KickoffLabs. This way the two parts of your site can live side by side.