On this page

Use Theme Header / Footer

To help improve site consistency and synergy between your ZP pages and the rest of your store, we have included the "Use theme header/footer" feature in the page constructor. You can use this feature on a New Page, a Template or on an any existing page you've created! 

To enable this feature on a page or blog post, follow the steps below:

1. Click into the Page Settings (📄) section of the Page Constructor.

2. Click on the "Layout" section and toggle the option for "Use theme header/footer" to the "Yes" position. Placeholder images will appear at the very top and bottom of the page indicating that the setting has been enabled. Page settings are saved automatically. 

3. Click the "Publish or Update" button in the top-right corner to apply this setting to your actual published page.

When you view your Published page, your actual Theme's Header and Footer will replace the placeholder images shown in the Page Constructor:

*Important Note: When the "Use theme header/footer" feature is enabled, the ZP page content will be wrapped by the main theme container and inherit the main theme's width for page content. This means that unless your theme already has full-width for page content specifically, the page blocks in ZP will not span the full-width of the page.

Publishing a New Store Theme

If you change your store's theme, you’ll need to disable and re-enable the application for it to function properly again. This may not be required if you are only updating or modifying your currently published theme. 

If the “Use theme header/footer” option is being used, then the page.custom.zipifypages.liquid template file isn’t being updated automatically when you publish a new theme or update the header/footer on your existing one. So in order for your new theme's header/footer to be used instead, some additional actions are needed: 

1. If no changes were applied to the page.custom.zipifypages.liquid  file manually before the new theme was published, then you just need to delete the page.custom.zipifypages.liquid  file by going to Online store > Themes > Actions > Edit code > Templates in your Shopify admin. 

After the file has been deleted, just disable and re-enable the Zipify Pages app from the Settings > General section by clicking the "Application Status" switch off then back on. This will create a new page.custom.zipifypages.liquid  file which is ready to work with your new theme.

2. If changes were manually applied to the page.custom.zipifypages.liquid  file before publishing your new theme, then you need to manually transfer code from the theme.liquid file (Online store > Themes > Actions > Edit code > Layout in your Shopify admin) into the page.custom.zipifypages.liquid  file (Online store > Themes > Actions > Edit code > Templates) to preserve the changes you applied before publishing the new theme.

Open Graph properties

When using the "Use theme header/footer" feature for a page, it changes the way Open Graph properties work. Once enabled, it will start to use the Open Graph properties from the theme for the page instead.

If you want to use OG properties configured for the page or blog post in the page constructor, then some file modification is needed. Go to Online Store > Themes > Actions > Edit code > Templates > page.custom.zipifypages.liquid  (pages) and article.custom.zipifypages.liquid  (blog posts) and apply the edit as follows...

The first line of code in the file looks like this:

{% assign zp_use_meta_tags = false %}{% assign zp_use_open_graph_tags = false %}

The value for the "zp_use_open_graph_tags" variable should be set to "True" instead of "False". The resulting code will look like this:

{% assign zp_use_meta_tags = false %}{% assign zp_use_open_graph_tags = true %}

Then find this piece of code:

{% include 'social-meta-tags' %}

and comment it out like this:

{% comment %} {% include 'social-meta-tags' %} {% endcomment %}

Then Save the file. 

Not finding the {% include 'social-meta-tags' %} code in the file?

If you aren't finding this line of code in your page.custom.zipifypages.liquid  (pages) and article.custom.zipifypages.liquid (blog posts) files, then the social-meta-tags.liquid Snippet file is named differently in your theme.

Shopify's Help section specifies that file is named as social-meta-tags.liquid (https://www.shopify.com/partners/blog/open-graph-tags)

So your theme should have an include of the "social-meta-tags" snippet. If you can't find this exact line there then it means that the needed snippet is named differently in your particular theme. You need to identify the name of which Snippet file within your theme contains the OG properties data in it. 

Once you find it, go back to the page.custom.zipifypages.liquid  (pages) and article.custom.zipifypages.liquid  (blog posts) files and look for the line which includes it and then comment it out per our instructions.

NOTE: The Open Gragh properties from the Page Attributes section of the Page Constructor will work for the page once again if the "Use theme header/footer" feature is disabled.

Favicon

The code which is responsible for adding a favicon to your ZP pages can be found in the header-scripts.zipifypages.liquid  file between these tags:  <zp_favicon_integration>CODE GOES HERE</zp_favicon_integration>  

You can add changes into the code between the tags mentioned above if needed. The code added there will be preserved even when the app is disabled/re-enabled.

By default, the favicon from your store’s theme will be used for the page when the “Use theme header/footer” feature is enabled. 

If you want use the favicon set within the ZP app's Settings section on the pages instead, then changes should be applied to the page.custom.zipifypages.liquid template file. 

This code: 

{% assign zp_use_favicon = false %} 

should be replaced with:

{% assign zp_use_favicon = true %}  

Then Save the file and the page will use the favicon you've set within the ZP app's Settings instead. 

Did this answer your question?