Overview
There are 2 different options available to choose from when creating a new Product Page layout in Zipify Pages:
Option 1 - Full Customization
This option allows you to completely replace the default Product Page (/products) content with Zipify Pages Sections. No section from your Theme is required to be used, although you can enable the "Theme Header/Footer" feature if desired, to use your Theme's header and footer for the new layout. This product page type can be assigned to one or multiple products (Advanced plan only).
📝 This approach creates a new/separate Product Template file in your Theme for each new product page you publish I.e.product.zipifypages-XXXX.liquidorproduct.zipifypages-XXXX.jsonon 2.0 Themes.
It's recommended to use this option if your product page doesn't rely heavily on additional customization applied by 3rd party apps, and you want greater control and flexibility over the product page design.
Option 2 - Partial Customization
This option allows you to customize Product Pages (/products) by adding different Zipify Pages sections to your Theme's existing product page layout structure. Your Theme's Header, Footer, and Buy Box section are required to be used. This product page type can only be assigned to one product at a time.
📝 This approach uses your defaultproduct.liquidorproduct.jsonProduct Template file, or whichever product template file was assigned to the particular product at the time you created the new page in Zipify Pages.
It's recommended to use this option if your Product Page heavily integrates with other 3rd party apps for additional customization.
📝 When you publish a "Product Page" in Zipify Pages, what you're actually doing is publishing a Shopify Product Page Template for the product(s) you've selected. There is no ability to create and/or publish a Product to your Shopify store from the Zipify Pages app, instead, Products are created and published in the "Products" section of your Shopify admin.
Creating a new Product Page
Follow the quick and easy steps below to create your new Product Page layout with Zipify Pages:
1. Click on the "Pages" link in the sidebar:
2. Click on the "New Page" button (1) in the top-right corner, then hover over "Product Page" there and click the "New Page" button (2):
3. On the "Choose Your Approach" popup, select the approach desired for the new product page layout:
Full Customization - Allows for full customization of the product page using Zipify Pages sections and elements. The product page template can be assigned to one product on Starter and Basic plans or to multiple products on the Advanced plan.
📝The page content (outside of the Dynamic Product Section) will be the same for all product(s) assigned to the template.Partial Customization - Allows for partial customization of the product page where Zipify Pages sections can be added to your Theme's existing Shopify product page. The product page template can only be assigned to one product.
4. On the "Select Product" popup, choose the product(s) you want to use the new layout for by searching for it and clicking on it. For a "Full Customization" template, this step is optional and the template can be created without selecting any products initially if desired. Then click the Next button:
📝 If a product is already using a Zipify Pages product layout, this icon will be displayed next to the product in the "Select Product" popup:
If you select a product that is already using a Zipify Pages layout, the following warning message will show asking you to confirm the action:
5. If the "Full Customization" option is chosen, you can select a prebuilt Template from the Zipify Pages templates library if desired. See this section below for more details.
If the "Partial Customization" option is chosen, in the popup enter the Name for your new Product Page layout, add it to a Group if desired and apply any applicable Zipify Pages Tags (for in-app organization):
📝If you don't want the page to be added to a Group, leave the default option "Choose Group" selected.
6. Click the "Create" button and you'll be launched into the Page Editor to start editing content!
Option 1 - Full Customization
If "Full Customization" is chosen, then on the next screen either select a pre-built Template you'd like used, select one of your saved templates from the "My Templates" tab or select "Blank Product Page" if you want to build out the content from scratch:
After you've made your selection, click either the "Create Blank Product Page" or "Use Template" button.
On the next screen, Name your new Product Page layout, add it to a Group if desired and apply any applicable Zipify Pages Tags (for in-app organization):
📝If you don't want the page to be added to a Group, leave the default option "Choose Group" selected.
Click the "Create" button to be launched into the editor to start customizing your new Product page layout!
The "Buy Box" Section
Regardless of whether you've chosen the "Blank Page" option or the "Template" option, the Full Customization layout page will include the "Buy Box" section by default.
The Buy Box Product section's product type will be set to "Inherit from assigned product" automatically and is not recommended to be changed:
Managing which Product(s) are Assigned to a "Full Customization" Template
📝Product page multi-assign is available on the Zipify Pages Advanced plan only.
Want to spend less time creating Product Pages and more time focusing on other areas of your business? Now you can build your very own pre-designed Product Page template using the "Full Customization" option!
Any product assigned to your template will inherit the pre-designed layout for the Product Page and their product information in Shopify is dynamically added. If any changes are made to your template, every assigned product page will update too, giving you more global control in just a few clicks.
A "Full Customization" product page can be assigned to one or multiple products (on the Advanced plan) during the creation process and after creation as well:
📝If a product template is assigned to multiple products, then the Buy Box(s) that use the "Inherit from assigned product" product type will be the same across all products the template is assigned to.
To display a particular product in the builder for a template assigned to multiple products, click the "Assigned Products" button located in the header of the builder. Then select the desired product you'd like displayed by clicking on the 👁 button to the left of the product:
To edit which product(s) are assigned to the template, click the "Edit Products" button:
Then make your adjustments as needed in the "Product Select" popup. Select the desired products and then click the Save button:
📝The same action can be invoked from the Product Pages table as well by either clicking on the "Assigned to" link (1) or on the more actions button and then choose the "Edit Assigned Products" (2) action:
To set a Discount and/or Default Product Quantity for the template, click the "Set Discount" button:
Then choose the type of discount you'd like applied for the template from the dropdown menu (1), set the default product quantity (2) then click the "Save" button:
📝The Product Discount and Quantity will be applied to all products assigned to the template. There are limits on the Shopify side for Dynamic discounts (no more than 100 per template). So it's not possible to assign a template that uses a "dynamic discount" to more than 100 different products.
Either remove the dynamic discount so it can be assigned to more than 100 different products. Or, decrease the number of products assigned to the template to be less than 100 and use a dynamic discount.
Adding Additional Buy Boxes or Product sections to a "Full Customization" Template
You may want to add additional Buy Boxes or Product sections to your page in-addition to the Dynamic Product Section. In this case, you need to define which product the additional buy boxes or product sections should use.
To choose which product to use in the Buy Box, click on the "Product" element within the Buy Box and then choose an option from the "Type" dropdown in the sidebar:
Select manually - This Product section will use a specific product you select manually.
Inherit from assigned product - The Product section will use the same product as the one assigned to the product page template.
Option 2 - Partial Customization
With the "Partial Customization" option, your Theme's Buy Box section from the product page template assigned to the product will be used, along with your Theme's Header and Footer. These sections are required to be used for the layout.
New Zipify Pages sections can be added either above or below the "Product Section Placeholder" section:
📝 The Page Builder displays a placeholder for the Buy Box area which will be replaced by your actual Product page section when viewing the live product page URL.
Generally, the amount of content that will be pulled into the "Buy Box area" for the new layout depends on what is being included in the Product page section for the default Product page Template for your currently published Theme.
In more technical terms, it is being dictated by the product.liquid file that is being used for a product that you select. We modify that specific product.liquid file for the product you've selected, to include our code in it for the new product layout you publish using Zipify Pages.
This means that all app integration code you've added into your default product.liquid file will be included automatically on the new layout you create and publish using Zipify Pages.
📝 If ZP Section content isn't showing up where you'd like (shows too low on the page, below your Theme sections) you are able to manually move code "sections" in your product.liquid file to below our code included there, so our section content will show higher up the page, above those "sections" you move in the file. Alternatively, you can add CSS code to the page via the Scripts feature to hide the theme sections you don't want shown.
In this example below, the "related products" and "recently viewed" product sections in that file are moved to below our code there, resulting in ZP Section content showing above those sections when viewing the live product page:
📝To use a different product for the template when in the Page Builder if desired, click on the "Product Placeholder Section", select a different product, and then click Save.
Publishing a New Product Page Layout
You can either publish a new Layout right from within the Page Builder or you can exit the builder and publish your new layout later from the Product Pages list (such layouts will have "Draft" status until you publish them).
Publishing from the Page Builder:
Once you're ready to use the new product page layout live on your store, click the Publish button in the top-right corner of the Page Builder.
If you want to go back to using your Theme's layout instead, simply unpublish the layout in Zipify Pages and your theme's layout will automatically be used for the product page once again.
Edit the Product Page Name if needed and then click the Publish button below that to fully publish this new product page layout:
📝 If the product page layout is already published, you will see an Update button instead.
Click the "Preview on Store" button next to the Publish/Update button to see your new live Zipify Pages Product Page layout in action!
Publishing from the Product Pages List:
To publish from the Product Pages list, click the Status switcher for a layout that has Draft status. Then click the Publish button on the confirmation popup and the layout becomes published and live:
Click the "Preview" icon from the Actions menu to see your new live Zipify Pages Product Page layout in action!
📝 Unpublish the layout from the Product Pages list to use your themes default product page layout once again.
Saving a "Full Customization" Product Page as a Template
To save any "Full Customization" product page as a Template for use with other product(s), simply click the "Save as a Template" button located in the "More options" menu in the Product Pages table:
📝 The "Save as a Template" option is also located in the "Page Settings" tab in the sidebar of the builder.
Once you save it as a Template, it will be added to the "My Templates" section that is accessible when creating a new "Full Customization" Product page. To use it, simply click on the Template you'd like used and then on the "Use Template" button:
Changing the Product associated with a Product Page Layout
To change the product(s) used for a particular template, you can click on the "Assigned to" link on the Product Pages table:
Make your adjustment in the "Product Select" popup that appears, then click "Save":
This can also be done from the builder. Follow the steps below depending on which option is used (Full Customization or Partial Customization) for the template:
Full Customization (single product)
Partial Customization (single product)
📝Edit the Product Page name in the General publish settings so it matches the new product you've selected
📝 If you're not ready to publish yet, the Product Page name can be changed using the "Edit Properties" action in the Product Page table instead:
