Replace Add To Cart button with Hubspot CTA

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

{%- if product.selected_or_first_available_variant.available -%}
{{ ‘products.product.add_to_cart’ | t }}
{%- else -%}
{{ ‘products.product.sold_out’ | t }}
{%- endif -%}

CTA Embed Code:

ADD TO CART

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. Thanks!