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

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)

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

Note: Only one product using a Buy Box that has the Infinite Options code should be added per page. 

Example 4: Klaviyo "Back in Stock" feature

To get a Klaviyo "Back in Stock" link to show for a sold out product featured in a Buy Box block, follow the steps below:

1. Follow Klaviyo's official documentation to get their "back in stock" code snippet added to your theme.liquid file: Install the Snippet

2. Add the following code:

{% unless current_variant.available %}
<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>
{% endunless %}

Between the <zp_product_soldout_integration> tags just like this:

The final result will look like this:

<zp_product_soldout_integration>{% unless current_variant.available %}
<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>
{% endunless %}</zp_product_soldout_integration>

3. Save the file.

*Notes:

  1. You must enable the "Theme Header/Footer" feature for your page, so the Klaviyo code snippet added to your theme.liquid file gets included on the page.
  2. If you don't want to use the "Theme Header/Footer" feature for your page, then instead manually add the Klaviyo code snippet (that goes in the theme.liquid file) to your page using the "Additional Scripts" feature included in the Zipify Pages app. Add it as a "Footer Script" so it gets included in the <body> of the page's HTML.

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?