Advanced work with BuyBox product blocks (integration with 3rd-party apps)

Note: This guide requires basic knowledge of HTML, Shopify liquid, and the theme editor.

While working with BuyBox 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 product block snippet files found at: Online store -> Edit HTML/CSS -> Snippets:

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 BuyBox Blocks of Zipify Page.

In order to preserve the code you've added so that it isn't removed each time you turn the app off then back on, you need to paste your code between the following 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>

All code pasted between these tags will be left as-is when re-enabling the ZP application.

Note: We don't remove product snippets from your theme after switching the app off. 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 re-enabling the ZP application.

How to get the BuyBox Blocks to work with ReCharge Subscription products

The ZP BuyBox 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 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

The final result will look like this:

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

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:

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

You can also add "Subscription only" ReCharge products to the BuyBoxes 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. 

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

Example 3: Reviews

Add the following code:

{% include 'judgeme_widgets', widget_type: 'judgeme_review_widget' %}

Between the <zp_product_footer_integration></zp_product_footer_integration> tags at the end of the respective BuyBox snippet file: 

The final result will look like this:

<zp_product_footer_integration>{% include 'judgeme_widgets', widget_type: 'judgeme_review_widget' %}</zp_product_footer_integration> 

Important Note: 

  1. The "Use theme header/footer" setting will need to be enabled for the reviews widget to show on the page.

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 BuyBox 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?