Zipify One-click Upsell (OCU)

  • Updated

Replo customers can use Zipify One-click Upsell to add customized upsells to their product pages.

Using a Zipify upsell on a Replo PDP

You can use Data Attributes and Custom HTML and Liquid to provide the correct configuration for upsells to work on Replo Product Templates or Shopify Sections which are part of a product template.

To do this:

  1. Add a data attribute to your add to cart button with the key atc-button and set the value to the Dynamic Data value for "Quantity"

  2. Add the following code to a Custom Liquid block positioned next to the button:
    <script> 
    window.OCUApi = window.OCUApi || {}; window.OCUApi.customAddToCartButton = '[data-atc-button]' ; window.OCUApi.getCustomAddToCartData = () = { try { const form = document.querySelector('form[data-productid="{{ product.id }}"]'); const { id } = Object.fromEntries(new FormData(form)); const atcBtn = document.querySelector('[data-atc-button]') const quantity = atcBtn && atcBtn.dataset.quantity ? Number(atcBtn.dataset.quantity) : 1; return { id: id, quantity: quantity, }; } catch (e) { console.error(e); return {}; } }; </script>
  3. Test that your upsell works by using Page Previews, or by publishing the template and verifying manually.

 

NOTE this only works on Product Templates (PDPs) or on Sections used within a Product Template. If you want to use the Zipify One Click Upsell popup for a non-Product Template, or even a Product Template with multiple Add To Cart buttons, you will need to modify this code in some way depending on specifically what you're trying to do. 

Was this article helpful?