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. In the "Layout" section, toggle on the "Use theme header/footer" option.
📝Placeholder images will appear at the very top and bottom of the page indicating that the setting has been enabled.

3. Click the "Publish" or "Update" button in the top-right corner to apply this setting to your 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:

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 section 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 section 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!

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.

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:

The following guide goes over how to implement code changes to have the "Custom" Open Graph Properties set in the Zipify Pages builder apply to pages that use the Theme Header/Footer feature:

Step 1: Ensure that you're using the "new templates" approach for Zipify Pages.

Step 2: Depending on whether or not you're using a Zipify Pages Home Page on your store, follow the corresponding steps below.

1. In the theme.liquid file, find {%- include 'social-meta-tags' -%} or {%- render 'social-meta-tags' -%} and wrap it in the following condition:

{%- unless template.suffix contains 'zipifypages' -%}

.......

{%- endunless -%}

The final result should be:

{%- unless template.suffix contains 'zipifypages' -%}

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

{%- endunless -%}

Or:

{%- unless template.suffix contains 'zipifypages' -%}

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

{%- endunless -%}

2. Before this piece of code

{% render 'header-scripts.zipifypages', renderctx: 'thm' %}

Add the following:

{%- if template.suffix contains 'zipifypages' -%}{% assign zp_use_open_graph_tags = true %}{%- endif -%}

3. Modify this piece of code:

{% render 'header-scripts.zipifypages', renderctx: 'thm' %}

To this:

{% render 'header-scripts.zipifypages', renderctx: 'thm', zp_use_open_graph_tags: zp_use_open_graph_tags %}

4. Save the theme.liquid file.

1. In the theme.liquid file, depending on which line of code below is listed first:

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

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

- {% render 'header-scripts.zipifypages' , renderctx: 'thm'%}

...Add this piece of code before the inclusion/render code:

2. Find {%- include 'social-meta-tags' -%} or {%- render 'social-meta-tags' -%} and wrap it in the following condition:

{%- if entity_with_zp_layout == false and zp_homepage_enabled == false -%}

.......

{%- endif -%}

The final result should be:

{%- if entity_with_zp_layout == false and zp_homepage_enabled == false -%}

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

{%- endif -%}

Or:

{%- if entity_with_zp_layout == false and zp_homepage_enabled == false -%}

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

{%- endif -%}

3. Modify the next piece of code from this:

{% render 'header-scripts.zipifypages', renderctx: 'thm' %}

To this:

{% render 'header-scripts.zipifypages', renderctx: 'thm', zp_use_open_graph_tags: zp_use_open_graph_tags %}

4. Save the theme.liquid file.

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: 

should be replaced with:

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