You can use this feature on a New Page, a Template or on an existing page you've created in the Pages Table:

From the Page Constructor interface, click on the Page Settings tab:

Click on the "Layout" section and switch the option for Use theme header/footer to the "Yes" position. Page settings are saved automatically. 

Click the "Publish/Update" button in the top-right corner to see this setting applied on your actual published page:

When you view your Published page, your actual store 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.

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. 

Note: If the “Use theme header/footer” option is being used the page.custom.zipifypages.liquid template isn’t being updated when you publish a new theme or update the header/footer on your existing one so 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 -> Actions -> Edit code -> Templates. After that just disable/enable the Zipify Pages app from the Settings tab.
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 Layout theme.liquid (Online store -> Actions -> Edit code -> Layout -> theme.liquid ) into the page.custom.zipifypages.liquid file (Online store -> Actions -> Edit code -> Templates -> page.custom.zipifypages.liquid) to preserve the changes you applied before publishing the new theme.

Open Graph Tags 

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

If you want to use tags configured for the page or blog post in the page constructor, then some modification is needed for the file found at Online Store -> Edit Theme -> Templates -> page.custom.zipifypages.liquid (pages) and article.custom.zipifypages.liquid (blog posts) as follows...

The first line of code 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". The resulting code will look like this:

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

Then you need to find this piece of code:

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

and comment it out like this:

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

If you aren't finding this line of code in your page.custom.zipifypages.liquid (pages) and article.custom.zipifypages.liquid (blog posts) then this 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) and look for the line which includes it and then comment it out per our instructions.

NOTE: The Open Gragh tags from the Page Settings section will work for the page once again if the "Use theme header/footer" feature 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/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 snippet file. 

This string: 

{% assign zp_use_favicon = false %} 

should be replaced with:

{% assign zp_use_favicon = true %}  

Did this answer your question?