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, quantity: formQuantity, ...propertiesObj } = Object.fromEntries(new FormData(form));
               const properties = Object.entries(propertiesObj || {}).reduce((props, [key, value]) =>{
                   const formattedKey = key.split('[')[1].slice(0,-1);
                   console.log(key, formattedKey);
                   props[formattedKey] = value;
                   return props;
               }, {});
               const atcBtn = document.querySelector('[data-atc-button]')
               const quantity = atcBtn && atcBtn.dataset.quantity ? Number(atcBtn.dataset.quantity) : 1;
               return {
                   id: id,
                   quantity: quantity,
                   properties,
               };
           } catch (e) {
               console.error(e);
               return {};
           }
       };
   </script>

3. Test that your upsell work by publishing the template. Please note that this popup will not appear on Page Previews.