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

  • Preparing your Shopify platform for KickoffLabs
  • Integrating KickoffLabs Scripts in your Shopify Store
  • Hosting Your Own Landing Page

After going through this documentation, you will know how to integrate KickoffLabs into your Shopify platform completely.

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.