Advanced Work with Buy Box Sections [Zipify Pages]

Integrate 3rd Party Product App options with Buy Box Sections!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Overview

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

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

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

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

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

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

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

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

The "zp_product_view_type" Variable

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 %}

Example 1: How to get the Buy Box Sections to work with Recharge Subscription products (Recharge Checkout on Shopify version only, does not work with the new Shopify Checkout Integration version of the Recharge app)

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:

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

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

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

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

7. Save the file.

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

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:

  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.

  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.

Example 5: Adding Klaviyo "Viewed Product" + "Added to Cart" event code

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

📝The Added to Cart event only tracks users previously cookied by Klaviyo

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.

A "Cart" destination must be used for the Buy Box button to have the "Added to Cart" event fire correctly.

Copy the following code:

<script type="text/javascript"> 
var _learnq = _learnq || [];
{%- capture track_item_props -%}
{
Name: {{ product.title | json }},
ProductID: {{ product.id | json }},
Categories: {{ product.collections | map:'title' | json }},
ImageURL: "https:{{ product.featured_image.src | img_url: 'grande' }}",
URL: "{{ shop.secure_url }}{{ product.url }}",
Brand: {{ product.vendor | json }},
Price: {{ product.price | money | json }},
CompareAtPrice: {{ product.compare_at_price_max | money | json }}
}
{%- endcapture -%}
var item = {{ track_item_props }};
_learnq.push(['track', 'Viewed Product', item]); _learnq.push(['trackViewedItem', {Title: item.Name, ItemId: item.ProductID, Categories: item.Categories, ImageUrl: item.ImageURL, Url: item.URL, Metadata: { Brand: item.Brand, Price: item.Price, CompareAtPrice: item.CompareAtPrice }}]);
{%- if zp_show_variants_selectors -%} document.querySelector('#{{ zp_product_wrapper_selector }} button[data-zp-add-to-cart]').addEventListener('click',function (){ _learnq.push(['track', 'Added to Cart', {{ track_item_props }}]); }); {%- endif -%}
</script>

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:

<script> 
var _learnq = _learnq || []; if ('{{ customer.email }}') { _learnq.push(['identify', { '$email' : '{{ customer.email }}' }]);</script>

Example 6: Adding the Affirm payment widget

⚠ The Affirm widget can only render in the Buy Box if either "Cart" or "Checkout" destinations options are used for the Buy Box button:

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

<!-- Affirm --> 
<script> _affirm_config = { public_api_key: "YOUR_PUBLIC_KEY", script: "https://cdn1.affirm.com/js/v2/affirm.js" }; (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready"); </script>
<!-- End Affirm -->

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:

<p class="affirm-as-low-as" data-page-type="product" data-amount="{{zp_current_product_price}}" style="font-size:14px; padding-bottom: 10px"></p>

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

Example 7: Adding the Afterpay payment widget

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:

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.1.7) -->
{% if cart.currency.iso_code == shop.currency %}
<script type="text/javascript">
// Overrides:
// var afterpay_min = 1.00; // As per your Afterpay contract.
// var afterpay_max = 2000.00; // As per your Afterpay contract.
// var afterpay_msg_size = 'sm'; // Can be 'xs', 'sm', 'md' or 'lg'.
// var afterpay_bold_amount = true;
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_modal_open_icon = true;
// var afterpay_hide_upper_limit = false;
// var afterpay_hide_lower_limit = true;
// var afterpay_show_if_outside_limits = true;
// var afterpay_cbt_enabled = false;
// var afterpay_apr_loans_available = false;
// var afterpay_product_integration_enabled = true;
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_variable_price_fallback = false;
// var afterpay_variable_price_fallback_selector = '';
// var afterpay_variable_price_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';
// var afterpay_variable_subtotal_fallback = false;
// var afterpay_variable_subtotal_fallback_selector = '';
// var afterpay_variable_subtotal_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
// var afterpay_dynamic_cart_integration_enabled = false;
// var afterpay_dynamic_cart_selector = '.cart-drawer__footer .totals';
// var afterpay_dynamic_cart_observer_target = '#CartDrawer';
// var afterpay_footer_logo_enabled = true;
// var afterpay_footer_logo_format = 'icon'; // Can be 'icon', 'stacked' or 'logo'.
// var afterpay_footer_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_footer_logo_background = 'border'; // Can be 'border' or 'transparent'.
// var afterpay_footer_logo_container = 'footer ul.payment-icons';
// var afterpay_footer_logo_template = '<li class="payment-icon"><object data="{logo_path}" type="image/svg+xml"></object></li>';
// Non-editable fields:
var afterpay_js_language = {{ localization.language.iso_code | slice: 0, 2 | json }};
var afterpay_js_country = {{ localization.country.iso_code | json }};
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_product = {{ product | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.1.7';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
{% else %}
<!-- Afterpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
{% endif %}
<!-- End Shopify-Afterpay JavaScript Snippet (v1.1.7) -->

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.

{%- render 'shopify-afterpay-javascript' -%}

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.

{% if zp_product_page_with_zp_layout and zp_entity_custom_template == false %}{%- render 'shopify-afterpay-javascript' -%}{% endif %}

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:

<script> var afterpay_product_selector = '.zpa-dynamic-product-section-160 .zpa-flex__wrap.zpa-flex__v--baseline'; </script>

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

How to hide the Shop Pay Installments widget in Buy Box sections

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:

  1. Not display the Shop Pay Installments widget on Buy Boxes with > 1 product

  2. Not display the widget for the product with the price of the item (and selected variant) < $50 or > $3000

  • Disabling the Shop Pay widget for the Multi Product Dynamic Buy Box section.
    Add the following code:
    {% if zp_product_view_type == 'multiproductdynamicbuybox' %}{% assign zp_display_shop_pay_widget = false %}{% endif %}
    To the dynamic-product.zipifypages.liquid Snippet file
    Between the zp_product_custom_variants_integration integration tags.

  • Displaying the Shop Pay widget for product price ranging from $50.00 - $3,000.00 only.
    Аdd the following code:
    {% assign zp_display_shop_pay_widget_by_price_range = true %}
    To the dynamic-product.zipifypages.liquid Snippet file
    Between the zp_product_custom_variants_integration integration tags.

  • Disabling the widget for only a particular type of Buy Box section.
    Add the following code:
    {% if zp_product_view_type == '.......' %}{% assign zp_display_shop_pay_widget = false %}{% else %}{% assign zp_display_shop_pay_widget_by_price_range = true %}{% endif %}
    To the dynamic-product.zipifypages.liquid Snippet file
    Between the zp_product_custom_variants_integration integration tags.
    * Where ....... is shown in the script above, include the variable for the particular Buy Box section where you want the widget hidden on.

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

  • dynamicbuybox (Dynamic Buy Box, Product Listing 1 for v5-7, Product Listing 3 for v5-7)

  • dynamicproductsection (Dynamic Product Section)

  • multiproductdynamicbuybox (Multi Product Dynamic Buy Box)

  • dynamicbundleoffer (Dynamic Bundle Offer)

  • productlisting1 (Product Listing 1 for v1-4)

  • productlisting3 (Product Listing 3 for v1-4)

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.

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