While working with Buy Box Sections, 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  (Buy Box, Buy Box with Cross-sell, Multi-Product Dynamic Buy Box, Dynamic Buy Box, Dynamic Bundle Offer, Product Listing 1 & 3 (starting from ver. 5) and the Dynamic Product Section included on "Full Customization" Product pages)
​product-view.zipifypages.liquid  (Product Listing 1 and Product Listing 3 sections ver. 1 - 4)
​three-products-view.zipifypages.liquid  (2 & 3 Products + Buy Now sections)
​best-value-view.zipifypages.liquid  (Best Value Offer section)
​best-value-horizontal-view.zipifypages.liquid  (Best Value Offer 2 section)
​best-value-offer-view.zipifypages.liquid  (Best Value Offer 3 section)
​offer-box-view.zipifypages.liquid  (Offer Box 2 section)
​recharge-subscription-view.zipifypages.liquid  (ReCharge Subscription section)

*📝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 Sections 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:

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 Refresh Assets buttons in the Settings.

The dynamic-product.zipifypages.liquid file renders not only the Buy Box section, but also the Multi-Product Dynamic Buy Box section, Dynamic Bundle Offer section, Product Listing 1 & 3 sections (starting from ver. 5) and the Dynamic Product Section included on "Full Customization" Product pages.

So a special condition can be added to the file depending on which Buy Box(s) you want your integration code to be included on. There is a zp_product_view_type variable for each Buy Box section, by which you can distinguish the sections.

Here is a list of possible values for the zp_product_view_type variable:
​

dynamicbuybox = Dynamic Buy Box

multiproductdynamicbuybox = Multi Product Dynamic Buy Box

dynamicbundleoffer = Dynamic Bundle Offer
​productlisting1 = Product Listing 1 (v5-...)
​productlisting3 = Product Listing 3 (v5-...)
​dynamicproductsection = Dynamic Product Section
​

For example, if you want the code you add to the file to affect only on the Buy Box section, then add the following condition to your code:
​
​{% if zp_product_view_type == 'dynamicbuybox' %} Integration Code Here {% endif %}
​
Another example, if you want the code to affect on all Buy Boxes except the Multi-Product Dynamic Buy Box section, then add the following condition to your code:
​
​{% unless zp_product_view_type == 'multiproductdynamicbuybox' %} Integration Code Here {% endunless %}

The ZP Buy Box product sections 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 (Recharge Checkout on Shopify 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:

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:

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

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:

Between the <zp_additional_property_integration></zp_additional_property_integration> tags. 

The final result will look like this:

Product Customizer (Basic) will only work for the first product added to the page using a Buy Box section. 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
​

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:

Between the <zp_additional_property_integration>  tags just like this:

Then Save the change to the file. 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. 

If you already have Uploadery 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="uploadery-container"></div>

Between the <zp_additional_property_integration> tag:

Next, add the following code:

{% assign zp_use_product_form_action = true %}

Between the <zp_product_custom_variants_integration> tag and Save the file:

Once completed, you should see the Uploadery widget show up on the Buy Box on the published page. It won't show in the page editor within the Zipify Pages app, only on the live/published page.

To get a Klaviyo "Back in Stock" button/link to show for a sold out product featured in the Dynamic Product Section for "Full Customization" 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. Copy and paste the following code before the </body> tag in the theme.liquid file:
​{% render 'klaviyo-init-script'%}

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

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.

7. Save the file.

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

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

9. Save the file.

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

*Notes:

First, ensure that you've implement the information and code located within Klaviyo's guide to your Shopify store so that "Active on Site" tracking is enabled: https://help.klaviyo.com/hc/en-us/articles/360020342232
​
Next, ensure that you've implemented the "Added to Cart" event code within your Theme as described in this article: https://help.klaviyo.com/hc/en-us/articles/115001396711

To have Klaviyo's "Viewed Product" and "Added to Cart" events fire for products featured in Buy Boxes on your Zipify Pages, follow the steps below.

Copy the following code:

Paste it between the <zp_product_footer_integration> integration tags within each Buy Box snippet file that it's needed:

Then Save each file. If you need to add it to the other/remaining Buy Boxes as well, please follow the same steps to repeat the process for the remaining buy box snippet files.

📝If you've enabled Customer Accounts for your store, add the extra script below to the theme.zipifypages.liquid file to identify your customers with the email they use to log in to your store:

Steps to integrate Affirm pricing widget in Zipify Pages buy boxes:

1. The "_affirm_config" script should be added within both liquid files of the applied Theme - theme.liquid and theme.zipifypages.liquid

The most valid and relevant script can be taken from the official Affirm doc (paragraph '1. Add Affirm.js'):

This code should be placed between the <head> </head> tags like shown here in the example:

📝 Don't forget to update the script with your personal Affirm public_api_key which can be found in your Affirm account.

2. Add the Affirm widget code for product pages to the Buy Box snippet file within your theme that you want it included on (dynamic-product.zipifypages.liquid in most cases) within the <zp_additional_property_integration> tags located within that file:

📝Add it between the <zp_additional_property_integration>PASTE CODE HERE</zp_additional_property_integration> included in the Buy Box snippet file that you want it included in as seen in the example below:

This guide goes over how to get the Afterpay installment widget to show and function correctly in the Dynamic Product Section included on "Full Customization" product pages only:

1. In your Shopify admin, navigate to Online Store > Themes. Click the "Actions" dropdown selector and select "Edit code".

2. In the Snippets folder, click the "Add a new snippet" link there:

3. Name the new snippet file shopify-afterpay-javascript then click the "Create snippet" button:

4. The new shopify-afterpay-javascript.liquid file will be created. In the file, copy and paste the following code (the Afterpay Javascript Snippet) into it and Save the file:

The final result will look like this:

5. Open the theme.liquid file and copy/paste the following code at the very end of the file. Then Save the file.

6. In the Snippets folder, find and open the page-footer.zipifypages.liquid file. Copy/paste the following code between the <zp_additional_integration> tags included in that file. Then Save the file.

To find exactly where the code should be pasted, press Ctrl + F when the file is open and search for "zp_additional_integration". The final result will look like this:

7. Add the Global Header Script for Product Pages with the following code:

📝.zpa-dynamic-product-section-160 in the Global Script code above may need to use a different number, depending on the Dynamic Product Section version used on your product page(s).
​

In the Settings > Integrations section of the app is the integration to show the Shop Pay Installments widget on all Buy Boxes when enabled: Shop Pay Installments Widget by Shopify

However, you may not want it shown on all Buy Boxes, depending on certain conditions. Applying the code changes below allows you to:

Available values for the zp_product_view_type liquid variable which can be used in the scripts above are below:

NOTES:
1. Shop Pay widget is ONLY displayed within Buy Boxes when the ATC Button destination = Cart OR Checkout.
2. The widget will not be displayed in the Buy Box for a product with a price (and selected variant) < $50 or > $3,000.
3. ZP discounts (Static and Dynamic ones) along with default product Quantity values are NOT taken into account when rendering the Shop Pay widget on ZP published pages.

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 section you've used, then paste this code:

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.