On this page

Product Page Templates

Phase 1 (Shopify Store layout)

This NEW feature allows you to customize Product Pages (/products) by adding different Zipify Pages blocks into your existing product page template's structure.

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

Check out this awesome video on this new feature from our Founder and CEO, Ezra Firestone: https://landing.zipify.com/pages/edit-publish-pages-in-products-section

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

Note: Phase 2 of Product Page functionality (coming soon!) will allow for full customization of the new Template using Zipify Page Blocks.

*IMPORTANT:
If you are currently redirecting your Product page (/products) to a Zipify Pages landing page (/pages) using the redirect workaround from our help article here, you will first need to remove the redirect by either:

  • Deleting the redirect code included in the new product template file created.
  • Assigning the default product page template (i.e. product.liquid) back on the product(s).

Creating a new Product Page Template

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

1. From the Pages section, click into the Product Pages subsection.

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

If you already have at least one product page template added, click the "New Template" button instead:

3. On the next screen, select the Product you want to create a template 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 template, 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 template, the following warning message will show asking you to confirm the action:

4. The Page Builder will then be opened for you so you can start adding content via Page Blocks and customizing your new product page template!

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 Template 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 template 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 Template you create and publish using Zipify Pages.

You’re also able to select another Product for the template 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 Template

You can either publish a template right from within the Page Builder or you can exit the builder and publish your new template later from the Product Pages list (such templates will have "Draft" status until you publish them).

Publishing from the Page Builder:

Once you're ready to use the new product page template live on your store, click the Publish button in the top-right corner of the Page Builder.

Edit the Product Page Name if needed and then click the Publish button below that to fully publish this new product page template:

*Note: If the product page template 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 template in action!

Publishing from the Product Pages List:

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

Click the Publish button on the confirmation popup and the template becomes published and live:

Click the "Preview" icon from the Actions menu to see your new live Zipify Pages Product Page template in action!

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

Advanced Work with product.liquid Files

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.

We are using the product.liquid file from your Theme for the product you select as the baseline for the new template you create and then we're adding our page blocks to it. You may find that after publishing the new Shopify Store layout product page template 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 template 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 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 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 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 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) 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.

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?