On this page:

Overview

Note: This guide 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.

While working with Buy Box Blocks, you might need integrations with other 3rd-party apps installed on your store that offer more options for product pages.

To do that, you will need to paste the code script from each app you want integrated into the Zipify Pages Buy Box snippet files found at: Online store > Themes > Actions > Edit Code > Snippets in your Shopify admin:

dynamic-product.zipifypages.liquid  (Dynamic Buy Box block and Dynamic Product Section block included in "ZP Layout" Product pages)
product-view.zipifypages.liquid  (Product Listing 1 and Product Listing 3 blocks)
three-products-view.zipifypages.liquid  (2 & 3 Products + Buy Now blocks)
best-value-view.zipifypages.liquid  (Best Value Offer block)
best-value-horizontal-view.zipifypages.liquid  (Best Value Offer 2 block)
best-value-offer-view.zipifypages.liquid  (Best Value Offer 3 block)
offer-box-view.zipifypages.liquid  (Offer Box 2 block)
recharge-subscription-view.zipifypages.liquid  (ReCharge Subscription block)

*Note: You need to paste the product code from the app you want integrated into each of the Snippet files listed above that you want them to work with for the current Buy Box Blocks of Zipify Pages.

In order to preserve the code you've added so that it isn't removed each time you click the "Refresh Assets" button or when we push an update, you need to paste your code between one of the following integration tags within the snippet files above:

  1. <zp_additional_integration> PASTE CODE HERE </zp_additional_integration>

  2. <zp_additional_property_integration>PASTE CODE HERE </zp_additional_property_integration>

  3. <zp_variant_integration> PASTE CODE HERE </zp_variant_integration>

  4. <zp_product_footer_integration>PASTE CODE HERE </zp_product_footer_integration>

  5. <zp_product_soldout_integration>PASTE CODE HERE</zp_product_soldout_integration>

Start by adding your code to one of the integration tags above and then Save the Snippet file. Then check your published page. If it doesn't work there or isn't located where you want it on your page, remove it from the first integration tag and try the next one. Then Save the Snippet file and check your published page once again. Repeat this process until it works and/or shows up in the location desired on your published page. 

Note: We don't remove product snippets from your theme after clicking the Remove Assets button. This is done intentionally to preserve any possible modifications you might have made there. So, any product snippets modifications that have been added between the tags above will be left as-is when clicking the Remove/Refresh Assets buttons in the Settings.

Example 1: How to get the Buy Box Blocks to work with ReCharge Subscription products (ReCharge Legacy only, does not work with the new ReCharge app that uses Shopify Checkout)

The ZP Buy Box product blocks can work with Recharge products - we're obtaining their additional settings, but only if the ReCharge script is added into the product snippets as described above. 

If you already have Subscriptions by ReCharge (Legacy Version) successfully installed and configured on your store, you just need to go into each product snippet file above that you want this to work with and add the following code:

{% if product.available %}{% include 'subscription-product' %}{% endif %}

between the <zp_additional_property_integration></zp_additional_property_integration> tags like this

To find exactly where to add the ReCharge code mentioned above, press Ctrl + F on your keyboard and then enter in <zp_additional_property_integration>. That will show you exactly where you need to include the ReCharge code in the file:

The final result will look like this:

<zp_additional_property_integration>{% if product.available %}{% include 'subscription-product' %}{% endif %}</zp_additional_property_integration>

Then Save the file. 

This is described in the first section of ReCharge's integration guide. Everything that is described there for the product.liquid file should be done for our product snippets as well: http://support.rechargepayments.com/article/91-recharge-integration-guide

If your product has ReCharge "One-time & Subscription" options, you've followed the steps above and are using one of the Buy Box Blocks, then the one-time and subscription widget will show as seen here:

You can also add "Subscription only" ReCharge products to the Buy Boxes once this integration code has been added as well. When a "subscription only" product is added, no Recharge widget will be shown next to the product. 

Make sure to set the button destination to Cart (not Checkout) so that the ReCharge checkout can be initiated from the cart page of your store. 

Once you do that correctly and then "Publish" your page, you should see the ReCharge option show up for the Buy Box(s). It won't show in the page editor within the ZP app, only on the live published page. 

Note: Only one unique subscription product should be added to a Buy Box per page. If the same subscription product is added multiple times, it won't function correctly.

Example 2: Product Customizer (Basic)

If you already have Product Customizer successfully installed and configured on your store, you just need to go into each product snippet above that you want this to work with and add the following code:

{% include 'product-customizer' %}

Between the <zp_additional_property_integration></zp_additional_property_integration> tags. 

The final result will look like this:

<zp_additional_property_integration>{% include 'product-customizer' %}</zp_additional_property_integration> 

Product Customizer (Basic) will only work for the first product added to the page using a Buy Box block. If you're going to use this integration, we recommend adding only 1 product to the page via Buy Boxes. 

Note: Everything else regarding theme installation in Product Customizer's install guide should be followed on your store as well: https://help.shopstorm.com/article/266-theme-installation

Example 3: Infinite Options

If you already have Infinite Options successfully installed and configured on your store, you just need to go into each product snippet above that you want this to work with and add the following code:

<div id="infiniteoptions-container"></div>

Between the <zp_additional_property_integration>  tags just like this:

The final result will look like this: 

<zp_additional_property_integration><div id="infiniteoptions-container"></div></zp_additional_property_integration>

Once you do that correctly and then "Publish" your page, you should see the Infinite Options fields show up for the Buy Box(s). It won't show in the page editor within the ZP app, only on the live published page. 

*Important Note: Only the first product (the one closest to the top of the page) added using a Buy Box that has the Infinite Options code will work to display those additional product options. Infinite Options typically only works on Product pages (where only one product is featured) so that is how their app and logic works.

Example 4: Klaviyo "Back in Stock" feature

To get a Klaviyo "Back in Stock" button/link to show for a sold out product featured in the Dynamic Product Section block for "ZP Layout" Product Pages (/products), follow the steps below:

1. Follow Klaviyo's official documentation to find their "back in stock" code snippet for your Klaviyo account.

2. Copy the code.

3. Create a new Snippet file in your Theme files within your Shopify admin and name it klaviyo-init-script

4. Paste your Klaviyo "back in stock" snippet code that you copied in step 2 there and Save the file.

5. Open the page-footer.zipifypages.liquid file and copy/paste the following code:

{% if zp_entity_custom_template == false %}{% render 'klaviyo-init-script'%}{% endif %}

Between the <zp_additional_integration></zp_additional_integration> tags included there:

📝Press Ctrl+f on your keyboard and search for <zp_additional_integration> to find exactly where to paste the code within the file (as shown above).

If your file doesn't have the <zp_additional_integration> tags included in it, Refresh your Zipify Pages app Assets in the Settings > Advanced Settings section of the app first. It will be included after that.

6. Save the file.

7. Open the dynamic-product.zipifypages.liquid file and copy/paste the following code:

{% if zp_product_view_type == 'dynamicproductsection' %}<a class="btn klaviyo-bis-trigger ss" href="#" style="text-align: center; margin: 0px; width: auto;">Notify Me When Available</a>{% endif %}

Between the <zp_product_soldout_integration></zp_product_soldout_integration> tags included there:

📝Press Ctrl+f on your keyboard and search for <zp_product_soldout_integration> to find exactly where to paste the code within the file (as shown above).

8. Save the file.

The Klaviyo "back in stock" button/link will start showing for your "ZP Layout" Product Pages that have a "sold out" product included in the Dynamic Product Section block:

*Notes:

  1. Only works with products with no variants or if only the sold out variant(s) are selected for use in the Dynamic Product Section block.

  2. In most cases, you need to enable the "Theme Header/Footer" feature for your page to have a button shown, otherwise a link will be shown instead.
    You are also able to apply some CSS code to the .btn class via the Scripts > Header section of the page to have it shown as a button without enabling the Theme H/F feature as an option.

Passing Additional URL parameters like Google UTM codes:

If someone lands on your ZP page through a URL which has additional parameters at the end, then those parameters will be stripped when directing customers to the specified URL when the Button Destination is set to this:

In order for these additional parameters to be passed successfully you need to locate the snippet according to the Buy Box block you've used, then paste this code:

{% assign zp_product_redirect_with_params = true %}

between these tags: 

<zp_additional_integration> PASTE CODE HERE</zp_additional_integration>

like this:

And then Save the snippet file. 

Once this is done it will pass the additional custom parameters into the destination page URL.

Did this answer your question?