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 builder. 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 Builder.

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 Builder:

📝

  • Code from your theme.liquid file will be included in the source code of the published page as well when this feature is enabled.

  • The theme Template file that controls pages that use this feature is called page.custom.zipifypages.liquid or page.custom.zipifypages.json for 2.0 Themes.

  • 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.

Page Formatting Issues?

Sometimes the theme header/footer feature can cause page formatting issues on the published page when enabled. This is due to theme styles conflicting with and overriding Zipify Pages block content and styles. The theme header/footer feature works seamlessly with most stock Shopify themes, however each theme is coded differently and there are countless custom themes as well. Due to that, it's not possible to account for how each and every theme is coded and how it will interact with the theme header/footer feature.

Should you notice a page formatting issue on your published page after enabling the theme header/footer feature, please try disabling the feature, updating your page and checking the published page again to see if the formatting issue has been resolved. If that fixes the issue, then it indicates a code conflict between your theme code and Zipify Pages block content.

In most cases, the code conflict can be resolved by adding an additional script to your page(s) that use the theme header/footer feature. The Zipify Pages support team can provide this script to you typically with a turnaround time of 24 - 48 hours. Just contact us in support chat and we'll be happy to help!

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?