All Collections
Zipify Pages - Tutorials & Documentation
Creating Pages
Creating a new Product Page Layout [Zipify Pages]
Creating a new Product Page Layout [Zipify Pages]
Learn how to create new Product Page layout(s) using the Zipify Pages app!
Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Product Page Layouts 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 Blocks. No section from your Theme is required to be used, although you can enable the "Theme Header/Footer" option 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.

    Note: This approach creates a new/separate product.liquid Template file in your Theme for each new product page you publish.

    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 blocks into 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.

    Note: This approach re-uses your default product.liquid Template file which was assigned to the particular product at the time you created the new layout in the Zipify Pages app.

    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 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 Layout

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 "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 blocks. The product page template can be assigned to one or multiple products.
    πŸ“The page content (outside of the Dynamic Product Section block) 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 blocks 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 "Dynamic Product Section" Block

Regardless of whether you've chosen the "Blank Page" option or the "Template" option, the Full Customization layout option will always include the "Dynamic Product Section" block on 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:

  • Product Price

  • Variant Selector (if applicable)

  • CTA Button

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: Layout, Cross-Sell, 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 if either "Shopify Image Carousel" or "Product/Variant Image" options are selected for the Image Area in the Layout tab.

Managing which Product(s) are Assigned to a "Full Customization" Template

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 during the creation process and after creation as well:

πŸ“If a template is assigned to multiple products, then the Dynamic Product Section block's settings will be the same across all products the template is assigned to. This includes the Layout, Cross-Sell and Sold Out View settings.

To display a particular product in the builder for a template assigned to multiple products, click the Tag icon located in the header of the builder:

Then select the desired product you'd like displayed from the dropdown menu by clicking on the πŸ‘ icon 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.

Option 2 - Partial Customization

With the "Partial Customization" option, your Theme's default Product page Buy Box section will be used along with your Theme's Header and Footer. These sections are required to be used for the layout.

New Zipify Pages 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:

πŸ“To use a different product for the template when in the Page Builder if desired, click on the product placeholder block, 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:

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

Publishing from the Product Pages List:

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.

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 of the builder:

Once you save it as a Template, it will be added to the "My Templates" section that is acessible 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:

Did this answer your question?