There are 2 different options available to choose from when creating a new Product Page layout in Zipify Pages:

📝 When you publish a "Product Page" in Zipify Pages, what you're actually doing is publishing a Shopify Product Page Template for the product 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.

Follow the quick and easy steps below to create your new Product Page layout with Zipify Pages:

1. Hover over the Pages section and select Product Pages:

2. If you haven't added any Product Page layouts yet, click on the "Create Product Page" button:

If you already have at least one Product page layout added, click the "New Page" button instead:

3. On the next screen, select the Product you want to create a layout for by searching for it and then clicking on it. 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:

4. On the next screen, choose the approach you'd like used for the new Product page layout, based on which option you want to be used, then click the "Next" button:

5. If "Shopify Layout" 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!

Otherwise, proceed with the information for Option 1 - ZP Layout listed below.

If "ZP Layout" 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!

Regardless of whether you've chosen the "Blank Page" option or the "Template" option, the ZP Layout will always include the "Dynamic Product Section" block in it. The product connected to the Dynamic Product Section block determines the product page URL. This block can't be copied or deleted like other blocks can:

This block looks pretty similar to the Dynamic Buy Box but has a set of differences.

Since we're working with Shopify Product Pages, there is a set of mandatory elements that must be used with no ability to hide or remove them. Mandatory elements include:

All other elements are non-required and can be used at your own discretion. To access the Layout tab where you can enable/disable elements for the "Dynamic Product Section" block, click the "Block Settings" icon in the top-right corner of the block and then click into the "Layout" tab:

*Note: Product, Cross-Sell, Mobile Sticky Button and Sold Out View tabs use the same settings and elements as the Dynamic Buy Box block.

By default, the Image section will dynamically pull in your featured product image from the "Products" section. A placeholder will be shown in the editor. Additional/other image(s) can be added via the Image Carousel if desired.

The image container space for the Dynamic Product Section is approximately 540x540 px. Use square 1:1 product images with dimensions at least that large in size to fill the container space.

📝 When a variant is selected on the published page, the featured image will update dynamically to show the variant image pulled from the Products section of your Shopify admin.

Check out this awesome video on how the Shopify Layout option works from our Founder and CEO, Ezra Firestone:

Your default Product page Buy Box section will be used for the layout along with your Theme's Header and Footer. These sections are required to be used for the layout.

New page blocks can be added either above or below the product placeholder block.

📝 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 Block 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 block content will show higher up the page, above those "sections" you move in the file.

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 Block content showing above those sections when viewing the live product page:

You’re also able to select another Product for the layout when in the Page Builder by clicking on the product placeholder block, selecting a different product, and then clicking Save:

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

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:

*Note: 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!

To publish from the Product Pages list, click the Status switcher for a layout that has Draft status.

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.

To save any "ZP Layout" 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 of the builder:

Once you save it as a Template, it will be added to the "My Templates" section that is available when creating a new "ZP Layout" Product page. To use it, simply click on the Template you'd like used and then on the "Use Template" button:

You may want to make a copy of one of your Product page layouts and use it as a template for another product(s) in your store. For example, if you've made a product page layout you really like and want to re-use it for other product(s).

Follow the steps below to accomplish this:

1. Click the "Make a Copy" button in the Product Pages table for the desired page

2. Click on the copy that was made to open the Page Builder for the copy

3. Within the page builder, change the Product associated with the copy. Depending on which Layout option you've chosen, the steps will be different:

ZP Layout

Shopify Layout

4. Edit the Product Page name of the copy in the General publish settings so it matches the new product you've selected

📝 If you're not ready to publish the copy yet, the Product Page name can be changed using the "Edit Properties" action in the Product Page table instead:

5. Publish/Update the copy to make it live. It will use the URL of the new product you've selected and not the URL of the original product the copy was made from.

Note: This is an advanced guide that requires basic knowledge of HTML, Shopify liquid, and the Theme editor. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

For the Shopify Layout option, we are using the product.liquid file from your Theme for the product you select as the baseline for the new layout you create and then we're adding our page blocks to it. You may find that after publishing the new Shopify Layout product page layout with Zipify Pages, that more content is being included on the page than you'd like.

To address that, the information below goes over how to create a new stripped-down version of your product.liquid file for use with your new Shopify Store layout product page you create in Zipify Pages.

1. Within your Shopify admin, go to Online Store > Themes > Actions > Edit code

2. Under the Templates section, click the "Add a new template" link to add a new template file.

3. Add a new Product template and name it accordingly I.e. zptemplate or whatever you'd like to name it.

4. If your Theme uses Sections (most new themes do) then your product.liquid file will have the following line of code listed in it: {% section 'product-template' %}

It is the product-template.liquid file in the Sections folder of the theme being referenced, which is the file which actually controls most of the content on the product page.

*Note: If your Theme doesn't use Sections, then skip Steps 4-9 and proceed with Step 10.

5. In the Sections folder, click the "Add a new section" link:

6. Add a new Section file called zpproduct-template or whatever you'd like to name it:

7. Open the default product-template.liquid file in the Sections folder, select all code (Ctrl+a) and copy it (Ctrl+c):

8. Open the new Section file you created, (zpproduct-template.liquid) or whatever you named it) select all code in the file (Ctrl+a) and paste over it with the code from the default product-template.liquid file and Save:

9. In the Templates folder, open the new product.zptemplate.liquid (or whatever you named it) that you created in Step 3 above.

Edit this line of code to reference the new Section file you created instead of the default one and Save the file:

The new Section file created in this guide is called zpproduct-template.liquid so to reference that new file instead of the default one, it would be like this as shown in the screenshot: {% section 'zpproduct-template' %}

10. Now, you have a new product Template file (product.zptemplate.liquid) that has a new Section file (zpproduct-template.liquid) being referenced in it.

This new Section file can now be edited to remove the additional content you don't want to be included for the new product page template you create using Zipify Pages, without affecting the content for your default product page template.

*The amount and what content to remove is entirely up to you! You can even remove ALL content from the section file for example if you want all of the content between the Theme Header and Footer to be replaced with Zipify Pages Blocks.

In this example, the Judge.me review widget code is being removed from the file because in this case, we don't want that included on the new product page template we create using Zipify Pages. Instead, we'll add that section using a Review Block included in the app:

If you aren't comfortable with removing content from the new Section file (zpproduct-template.liquid) then it's recommended to consult with your Theme developer or an expert in Shopify liquid code.

*Note: For Themes that don't use Sections, you will be editing the new product.zptemplate.liquid (or whatever you've named it) file you created in Step 3 directly instead.

11. Next, you need to assign this new product.zptemplate.liquid file you created to the Product(s) in your Shopify admin that you want to use it on (that you will make a new Template for using the Zipify Pages app) and Save:

12. Open the Zipify Pages app and click on the Product Pages section. Add a New Product Page and select the same product that you applied the new Theme template to in the previous step.

When you publish this new product page template in Zipify Pages, it will use the new stripped-down version of your default product.liquid file that you created in this guide instead. In the example above, the Judge.me review widget is no longer being included on that product page but remains on other product pages that still use the default product.liquid file.