On this page

Overview

Sometimes, additional scripts and code need to be added to the source code of your pages and/or blog posts to have them function properly with other apps/services you might be using. 

In order to make including your additional scripts as easy as possible, we have included both a Global (applies to all pages) and Local (applies to a specific page) script insertion feature. Using this feature, any additional script(s) can be added to the Header (<head>) and/or Footer (<body>) of your pages and blog posts. 

Not sure where to place your script? Contact the app company or service that provided the script for directions on where it should go in the source of the page. 

As mentioned, there are two ways to add scripts to a Zipify Pages page through the ZP app

  1. Global scripts - these are active across ALL pages created with ZP.
  2. Local scripts - these are specific to a single page.

*Important Notes: 

1. You don't need to add your Google Analytics or Facebook Pixel scripts if you're already using Shopify's native integrations found in the Online Store > Preferences section of your Shopify admin. Pages created and published through the Zipify Pages app will automatically use these native integrations.

2. The published pages will also use any scripts added to the Google Analytics "Additional Google Analytics Javascript" field in the Online Store > Preferences section of your Shopify admin as well.

Adding a Global Script

To add a Global script (a script which you need added to ALL pages), follow the quick and easy steps below: 

1. Go to Settings > Global Scripts. There you will be presented with the option to add scripts globally to either your ZP Pages or ZP Blog Posts.

2. Under either Page Scripts or Blog Scripts, click the "Add New" button to add a new global script.

3. In the "Add Page Scripts" popup, choose whether the script should be added to the Header or Footer of the page. Then enter in the Script Title and paste in your script code

4. The "Enable this script on all existing pages that are using Global Scripts" box is checked by default. Un-check this box if you don't want the new script automatically included on all of your ZP pages. 

5. Click the "Save" button to save the script and have it applied. 

Note: We may need some time to apply changes to the Global Scripts on all published pages/posts. In most cases your new scripts will be live within 5 minutes.

Managing Global Scripts

Once a Global script has been added to either Pages or Blog Posts, you will see it listed in the Settings > Global Scripts section of the app. The scripts added will be sorted into either Header Scripts or Footer Scripts, depending on where they were added. 

The scripts you add can either be Edited (if you need to apply a change) or Deleted (if you no longer need it) through the available actions. 

Adding a Local Script

If you only need an additional script added to a particular page (or need a combination of both Global and Local scripts for a particular page), then use the Local script option. This option can be found within the Page Constructor as seen here: 

Follow these steps to add a Local script to your page or blog post:

1. Click the "</>" button to open up the Manage Scripts popup window for the page. 

2. Choose either "Header Scripts" or "Footer Scripts" depending on where the script needs to be placed in the source code of the page. 

3. From the "Manage Scripts" drop-down menu, select either "Use local scripts only" or "Use both global and local scripts".

4. Enter in the Script Title, paste in the script code, click the "ADD SCRIPT" button and then click the Save button.

5. In order for the Local script to be applied live to the source code of the page, click the "Update" button in the Page Constructor (or the "Publish" button if the page hasn't been published yet):

Managing Local Scripts

The Manage Scripts popup window allows you to choose one of the following options (separately for Header and Footer section):

  1. Use global scripts only: This option will only use the Global scripts which have been added. The Global scripts will appear for you to select which ones you want to have used.
  2. Use local scripts only: This option will open up the script addition form (similar to the Global scripts form in the Settings > Global Scripts section of the app) where you can add Local scripts to the page. 
  3. Use both global and local scripts: This will show a list of both Global and Local scripts which allows you to check the ones you want to use for the page. 
  4. Use no scripts for this section: No scripts added through Zipify Pages will be used for the page.
    Note
    : If the "Use no scripts for this section" option is chosen, the scripts for the native integrations for the Facebook Pixel ID and Google Analytics will still be used.

Once a Local script has been added, you can View the code by hovering your mouse over the script title, Copy the script using the copy button or Delete the script using the delete button: 

Example: Adding a custom Facebook Pixel Event

Ezra Firestone did a great video here called "How to Increase Your Email Revenue: Generating Leads & Converting Customers Using Social Giveaway Campaigns".

It has a bonus video at the bottom of the comments on how to have the "Contact" Facebook pixel event fire for your ZP page when landed on:

In that video Ezra shows how to use one combined script (FB pixel base code + event code) that you can add to the Scripts > Header section of a ZP page. Here is the example code to have the "Contact" event fire for example, you just need to include your FB pixel ID in the two locations shown in the script:

<!-- Begin Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR FB PIXEL ID HERE');
  fbq('track', 'PageView');
  fbq('track', 'Contact');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR FB PIXEL ID HERE&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Did this answer your question?