On this page

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 to click the Refresh Assets button found at Settings > General > Advanced Settings > Application Assets Management after publishing the new Theme to add our Assets to your new theme.

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 for certain pages, then the page.custom.zipifypages.liquid Template file which controls those pages isn’t being updated when you publish a new theme or if you update the header/footer on your existing theme, so some additional actions are needed to get that to update:

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. After that just click the Refresh button under Application Assets Management.

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 theme.liquid (Online store > Themes > Actions > Edit code > Layout > theme.liquid ) into the page.custom.zipifypages.liquid file (Online store > Themes > Actions > Edit code > Templates > page.custom.zipifypages.liquid) 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 or blog post, it changes the way Open Graph properties work. Once enabled, it will start to use the Open Graph properties from your Theme for the page instead, regardless of whether "Automatic" or "Custom" options are chosen in the builder:

If you'd like to change the Open Graph Properties for your page, an option is to manually add code via the Scripts feature. For example, this site can be visited to check and/or modify your page's OG properties: https://www.opengraph.xyz/

Just paste in your page URL and click the "Check Website" button:

On the next page you can preview the current OG tags and data for your page as well as make edits. To make edits, use the available fields for Title, Description and Image under the "Edit" section:

When edits are made to these fields, that will generate new HTML meta tags which can be copied using the "Copy" button:

Back in the Zipify Pages page editor, use the </>Scripts feature to add a new Local Header script. Paste the copied meta tags, Save the script and Update your page.

📝If the page was previously shared on Facebook, it can take some time for the OG properties to update on Facebook's end. To expedite the process, you can use the Facebook Sharing Debugger tool: https://developers.facebook.com/tools/debug/

Paste in your page's URL there and click the "Debug" button:

On the next screen, you can see a preview of the OG data that Facebook has cached for your page. Click the "Scrape Again" button (a few times in some cases) for Facebook to scrape your page again and get the updated OG data:

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's Assets are refreshed.

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?