On this page

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

    Note: The "ZP Layout" approach creates a new/separate product.liquid Template file in your Theme for each new product page published using this approach.

    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 - Shopify Layout
    This option allows you to customize Product Pages (/products) by adding different Zipify Pages blocks into your existing product page layout's structure. Your Theme's Header, Footer and Buy Box section are required to be used.

    Note: The "Shopify Layout" 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.

*Note:

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. From the Pages section, click into the Product Pages subsection.

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:

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

  • ZP Layout (Option 1)

  • Shopify Layout (Option 2)

5. If "Shopify Layout" is chosen, 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.

Option 1 - ZP Layout

If "ZP Layout" is chosen, then on the next screen select the pre-built Template you'd like used 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 and apply any applicable Zipify Pages Tags (for in-app organization):

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 "Pre-built Template" option, the ZP Layout option will always include the "Dynamic Product Section" block in it. 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 are 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: 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.

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

Option 2 - Shopify Layout

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.

*Note: 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-in to 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.

*Note:

  • 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.lqiuid 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:

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!

*Note: Unpublish the layout from the Product Pages list to use your themes default product page layout once again.

Changing the Product associated with a Product Page Layout

You may want to make a copy of one of your Product page layouts and use it as a template for another product(s) on 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.

Advanced Work with product.liquid Files (Shopify Layout only)

Note: This is an advanced guide which 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 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 into 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.

Video

Did this answer your question?