Overview
Sometimes, custom scripts or tracking code need to be added to your page’s source in order for certain apps or third-party services to function correctly. This is common when integrating things like analytics, tracking pixels, chat widgets, or special design customizations.
To make this process as simple and flexible as possible, Zipify Pages offers two ways to add custom scripts:
Global Scripts – Apply your script(s) across all Zipify Pages.
Local Scripts – Apply script(s) to a specific individual page.
These scripts can be inserted into either the Header (<head>) or the Footer (<body>) of your page templates, including:
Home pages
Landing pages
Product pages
Collection pages
Blog posts
Where Should the Script Go?
Not sure whether the script belongs in the Header or Footer? The best practice is to check with the provider of the script or app you’re integrating. They will typically specify where the script should be inserted for proper functionality.
Global vs. Local Scripts — Key Differences
Global Scripts
Automatically apply to every Zipify Page that is set to use Global Scripts (enabled by default).
Once added, you do not need to update individual pages — the script is immediately live on all applicable pages.
Local Scripts
Added to a specific Zipify Page within the page builder.
After adding a local script, you must click the “Update” button in the builder to publish it live on the page.
⚠️ Important Notes
No need to manually add Google Analytics or Meta (Facebook) Pixel scripts
If you're already using Shopify’s native integrations for Google Analytics or Facebook Pixel, there’s no need to manually add those scripts again.
All Zipify Pages you publish automatically inherit and support these native integrations.
You can combine both Global and Local scripts
Every page built with Zipify Pages includes a</> Scriptssettings panel in the page builder. From there, you can:Apply Global scripts that load across all applicable pages.
Add Local scripts specific to that individual page.
Use both together if needed — for example, site-wide tracking globally and a special widget or code snippet locally.
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
Collection 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 Code:
📝Paste code with <script> </script> Tags for JS or <style> </style> Tags for CSS
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.
4. Click the "Save" button to save the script and have it applied.
📝 After updating or adding Global Scripts, it may take a few minutes for those changes to propagate across all published Zipify Pages and blog posts.
Managing Global Scripts
Once a Global script has been added to either Pages or Blog Posts, you will see it listed in the Global > 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 be viewed by hovering over the title and either 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>
📝 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 section or element's style on your page(s). CSS overrides can also be applied on a device-type basis by using media queries and 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.
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>
These are just a few examples of style edits you can accomplish through CSS overrides!