Overview
Sometimes additional scripts and code need to be added to the source code of your home pages, landing pages, product page templates 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 landing pages, product page templates 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
Global scripts - these are active across ALL pages created with ZP that are configured to use global scripts (default). When a new script is added, it is automatically applied to all pages that have the global scripts setting enabled, without needing to click the "Update" button in the page builder for each page.
Local scripts - these are specific to a single page. After a local script is added, it's necessary to click the "Update" button in the page builder to apply the script live to the 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.
3. You are able to use a combination of both Global and Local scripts for any particular landing page, product page template or blog post through the </>Scripts setting available in the page builder for the particular page:
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. Click on the "Global" link (1) in the sidebar, then select "Global Scripts" (2):
2. There you will be presented with the option to add scripts Globally to the following:
Landing Pages
Product Pages
Home Pages
Blog
Under the needed section, 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.
📝 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 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 Builder 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 the "Header" or "Footer" tab, 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 (1) paste in the script code (2), click the "ADD SCRIPT" button (3) and then click the Save (4) 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 Builder (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):
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.
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.
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.
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 script by hovering your mouse over the script title, Edit the script by clicking the edit icon, Copy the script clicking the copy icon or Delete the script by clicking the delete icon:
Example: Adding a standard 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 -->
Another option that works equally as well, but doesn't require you to add your FB pixel ID is the following code, which can be added to the Scripts > Footer section of your ZP page:
<script>
window.trekkie.load = function(){
fbq('track', 'Contact');
}
window.addEventListener('load', function() {
fbq('track', 'Contact');
});
</script>
Note: The scripts above can work with any Standard Facebook pixel events, just replace "Contact" with the other standard event name you want fired on page load instead.
Examples: Adding CSS style overrides
CSS overrides are helpful when you want to make particular changes to a block and/or element's style on your page(s). CSS overrides can also be applied on a device-type basis by specifying the max-width for it.
For example, here is one you can use to make the Button Font Size on Mobile devices (screens with viewport width < 767.98px) 20px size instead of the default 16px:
<style>
@media only screen and (max-width: 767.98px) {
.zpa-mobile-btn-size { font-size: 20px !important;
}
} </style>
Note: The 20px part in the code can be changed to any size desired as needed.
This example changes the Timer Text Size on mobile from the default 51px to 40px or whatever size you'd like used instead:
<style>
@media only screen and (max-width: 767.98px) {
.zpa-countdown-info {
font-size: 40px !important;
}
}
</style>
Note: The 40px part in the code can be changed to any size desired as needed.
This example will add button shadow to a particular button on the page:
<style>
.zp.bcss-26360118 {
box-shadow: 6px 8px 22px -2px rgba(0,0,0,0.74);
} </style>
Note: The .zp.bcss-26360118 part in the script needs to be updated for a specific button on your Zipify Page. Use the browser Inspect Element tool to find it.
You can apply the same style to multiple buttons/elements at once using one code, by defining each button ID in your code, separated by commas:
<style>
.zp.ba-31119301, .zp.ba-31119299 {
box-shadow: 6px 8px 22px -2px rgba(0,0,0,0.74);
}
</style>
For Landing Pages, use this one to Stretch all blocks to Full-width, on all devices, even with the Theme header/footer feature enabled for the page:
<style>
.container.main.content {
max-width: initial;
width: initial;
}
</style>
Note: May not work for all Themes.
For Landing Pages, change the default 15px left/right padding applied to all blocks by default on Mobile devices to some other value (30px in the example below):
<style>
@media only screen and (max-width: 767.98px) {
.xs, .xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12, .xs-offset-1, .xs-offset-2, .xs-offset-3, .xs-offset-4, .xs-offset-5, .xs-offset-6, .xs-offset-7, .xs-offset-8, .xs-offset-9, .xs-offset-10, .xs-offset-11, .xs-offset-12 {
padding-left: 30px!important;
padding-right: 30px!important;
}
}
</style>
These are just a few examples of style edits you can accomplish through CSS overrides!