Change Add To Cart button to a Hubspot CTA

[MattLaw13]

Our company uses Hubspot and Shopify, with our store on a subdomain and the hubspot site being the main url. I have been asked to turn our Add To Cart button into a Hubspot CTA. I know I can add an embed code to put CTAs on pages, and have implemented in some places, but to replace the Add To Cart button and still have it function as it should is proving to be complicated.

Current ATC Button:

<button type="submit" name="add" class="product-form__submit button button--full-width
  {% if block.settings.show_dynamic_checkout %}button--secondary
    {% else %}button--primary
  {% endif %}"
  {% if product.selected_or_first_available_variant.available == false %}
    disabled
  {% endif %}>
    <span>
      {%- if product.selected_or_first_available_variant.available -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- else -%}
        {{ 'products.product.sold_out' | t }}
      {%- endif -%}
    </span>
    <div class="loading-overlay__spinner hidden">
      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
</button>

CTA Embed Code:

<span class="hs-cta-wrapper" id="hs-cta-wrapper-701945db-0547-45f7-8167-33fa2846b130">

  <span class="hs-cta-node hs-cta-701945db-0547-45f7-8167-33fa2846b130" id="hs-cta-701945db-0547-45f7-8167-33fa2846b130">

    <!--[if lte IE 8]>

      <div id="hs-cta-ie-element"></div>

    <![endif]-->

    <a href="https://cta-redirect.hubspot.com/cta/redirect/20676444/701945db-0547-45f7-8167-33fa2846b130" >

      <img class="hs-cta-img" id="hs-cta-img-701945db-0547-45f7-8167-33fa2846b130" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/20676444/701945db-0547-45f7-8167-33fa2846b130.png" alt="ADD TO CART"/>

    </a>

  </span>

  <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>

  <script type="text/javascript"> hbspt.cta.load(20676444, '701945db-0547-45f7-8167-33fa2846b130', {"useNewLoader":"true","region":"na1"}); </script>

</span>

I'm wondering if anyone has done this before, and how the codes could be combined. I don't know if I should wrap the CTA around the Shopify button, or wrap the Shopify button around the CTA, or if I am thinking of this wrong and there is another better way. Haven't messed with Shopify CTAs, but the Marketing heads want to be able to track everything in Hubspot, so I don't think that's an option either. Would love some feedback on this. I posted in the technical area as well, but hoping to get a wider audience if at all possible, and I didn't see an issue with in the community guidelines, so sincerest apologies if it is not allowed. Thanks!