Overview

Zipify Pages added support for Online Store 2.0 Themes on Oct. 26th, 2021. Once the Zipify Pages app is installed, Assets (files and code) are added to your currently published theme.

The goal of this article is to give technical information about how to work with Online Store 2.0 Themes in terms of Zipify Pages app behavior:

When Assets are added to a new JSON Theme that have not had app Assets added before.
In Themes that have already had Assets added before Zipify Pages added support for JSON Themes.

📝Theme files can be accessed in your Shopify admin by navigating to Online Store > Themes > Click the "Actions" dropdown menu > Select "Edit code"

Assets added to an OS 2.0 Theme after Refreshing Assets in Zipify Pages

The following Asset files (Layout / Templates / Sections / Snippets) will be added to the Theme:

Layout:

theme.zipifypages.liquid

Templates:

article.custom.zipifypages.json
article.zipifypages.json
blog.custom.zipifypages.json
blog.zipifypages.json
page.custom.zipifypages.json
page.zipifypages.json

Sections:

article-content-zipifypages.liquid
blog-content-zipifypages.liquid
index-content-zipifypages.liquid
page-content-zipifypages.liquid
product-footer-content-zipifypages.liquid
product-header-content-zipifypages.liquid

Snippets:

best-value-horizontal-view.zipifypages.liquid
best-value-offer-view.zipifypages.liquid
best-value-view.zipifypages.liquid
dynamic-product.zipifypages.liquid
header-scripts.zipifypages.liquid
offer-box-view.zipifypages.liquid
page-footer.zipifypages.liquid
product-content.zipifypages.liquid
product-view.zipifypages.liquid
recharge-subscription-view.zipifypages.liquid
three-products-view.zipifypages.liquid

Such inserts as:

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

The theme.liquid Layout file has not changed its logic and functions as it did on a previous Liquid theme.

Product templates with "Partial Customization" approach

Two Sections:

zp-product-header-content
zp-product-footer-content

...will be added to the product JSON Template files (like product*.json) before and after the product section to display ZP content.

An insert will be added to the beginning of sections of the product template files:

"zp-product-header-content": {
  "type": "product-header-content-zipifypages",
  "settings": {
  }
}

An insert will be added to the end of the product template files:

"zp-product-footer-content": {
  "type": "product-footer-content-zipifypages",
  "settings": {
  }
}

This mechanism for adding sections is analogous to the mechanism of sections in Liquid templates.

Product Pages with "Full Customization" approach

Two Assets are being created during the publishing of a "Full Customization" Product page:

Template: product.zipifypages-XXX.json
Section: product-content-zipifypages-XXX.liquid

JSON markup is recorded to the product.zipifypages-XXX.json Template file and HTML template content is recorded in the product-content-zipifypages-XXX.liquid Section file. A user can add theme sections in a template via the Shopify Theme Editor. Zipify Pages templates won’t be re-recorded/re-written if any further product page updates happen, until the template is removed.

Homepage

Each time the "Homepage" feature is enabled, the following sequence of actions are performed:

The content of Templates/index.json is being copied to Snippets/index.original.json.zipifypages.liquid
An availability of the Sections/index-content-zipifypages.liquid asset is checked in the Theme's assets list. In case it is not found, the Zipify Pages app will try to add this asset.
1. If adding an asset is unsuccessful, an error will be received and the process of setting a Zipify Pages landing page as the Homepage will be stopped.
2. If adding an asset is unsuccessful, the next step below will be processed
An availability of Snippets/index.app.json.zipifypages.liquid is being checked, also:
1. If the Snippet exists, its content is being validated.
  1. If the JSON is valid, it is recorded in the Templates/index.json file.
  2. If the JSON is invalid, a default content will be recorded:

{
  "sections": {
    "content": {
      "type": "index-content-zipifypages",
      "settings": {
      }
    }
  },
  "order": [
    "content"
  ]
}

b. If the Snippet doesn’t exist, a default content will be recorded to the Templates/index.json file:

{
  "sections": {
    "content": {
      "type": "index-content-zipifypages",
      "settings": {
      }
    }
  },
  "order": [
    "content"
  ]
}

Each time the Homepage feature is disabled, the following sequence of actions are performed:

The contents of the Templates/index.json file is being copied to the Snippets/index.app.json.zipifypages.liquid file to save any/all changes of the Homepage made in the Shopify Theme Editor for the next time the Homepage feature is enabled.
The content that have been copied to the Snippets/index.original.json.zipifypages.liquid file is also being copied to the Templates/index.json file (the previous version of the Homepage is restored, the one that was used before a Zipify Page became the Homepage)

If Zipify Pages returns an error when disabling the Homepage feature and some problem with the Homepage occurs and it's displayed incorrectly, you can manually rollback the Homepage file to a desired state, using the "history" option for the index.json Template file. You can use this method to make a hotfix for the Homepage, to get it to display and function correctly again.

Working with JSON Themes with app Assets added before Zipify Pages supported JSON Themes

The logic will remain the same (as it was before an update) for the case when refreshing the assets for Zipify Pages on a Theme that does not contain any Templates in a JSON format (templates/*.json).

The following assets will be recorded while the assets refresh in a theme with at least one template in a JSON format:

Layout:

theme.zipifypages.liquid

Sections:

product-footer-content-zipifypages.liquid
product-header-content-zipifypages.liquid

There will also be sections added to all product JSON templates (product*.json) to function correctly with products using the "Partial Customization" approach.

Liquid templates won’t be replaced with JSON ones, it should be done manually instead if desired. [Note: An automation hasn’t been done to save the customization made in Liquid templates.]

For instance, if a user deletes the Templates/article.zipifypages.liquid file and refreshes Zipify Pages assets, the Templates/article.zipifypages.json and Sections/article-content-zipifypages.liquid files will be added to the theme (it corresponds to the logic of the new JSON theme - there must be a template in JSON format and the corresponding content section).

To make everything work smoothly, a Liquid template and its content snippet should be deleted. Otherwise, the user would not have an ability to customize Zipify Pages templates.

Examples of Liquid theme asset pairs to delete if necessary:

Templates/article.zipifypages.liquid Snippets/article-content.zipifypages.liquid

Templates/article.custom.zipifypages.liquid Snippets/article-content.zipifypages.liquid

Templates/blog.custom.zipifypages.liquid Snippets/blog-content.zipifypages.liquid

Templates/blog.zipifypages.liquid Snippets/blog-content.zipifypages.liquid

Templates/page.zipifypages.liquid Snippets/page-content.zipifypages.liquid

Templates/page.custom.zipifypages.liquid Snippets/page-content.zipifypages.liquid

*📝 The Snippets/page-content.zipifypages.liquid should not be deleted if the snippet index-content.zipifypages ({% include 'index-content.zipifypages' %}) is added to the Templates/index.liquid file. If the Zipify Pages snippet index-content.zipifypages is added to the Templates/index.liquid file and the Homepage feature is enabled, the Homepage won’t be displayed.

If any customizations are made in these assets that you want persevered, those changes must be manually transferred to the new assets. Deleting is necessary to edit templates in the Shopify Theme Editor. Online Store 2.0 supports editing of JSON templates only. There is no ability to edit Liquid templates in the Theme Editor. If there is no need to make any customizations and transition to the JSON theme, Liquid templates might NOT be deleted and used further.

Pair assets examples in a JSON theme:

Templates/article.custom.zipifypages.json Sections/article-content-zipifypages.liquid

Templates/article.zipifypages.json Sections/article-content-zipifypages.liquid

Templates/blog.custom.zipifypages.json Sections/blog-content-zipifypages.liquid

Templates/blog.zipifypages.json Sections/blog-content-zipifypages.liquid

Templates/page.custom.zipifypages.json Sections/page-content-zipifypages.liquid

Templates/page.zipifypages.json Sections/page-content-zipifypages.liquid

*📝Product templates in the Liquid format, that were created before the launch of JSON theme support, will continue to work and will continue to be updated in the Liquid format. New product templates in the JSON theme will be created in JSON format with the appropriate section:

Templates/product.zipifypages-XXX.json
Sections/product-content-zipifypages-XXX.liquid

Managing App Assets and Files [Zipify Pages]

Creating a new Home Page [Zipify Pages]

Use Theme Header / Footer [Zipify Pages]

Landing Pages vs. Product Pages [Zipify Pages]

Settings [Zipify Pages]