Replace Add To Cart button with Hubspot CTA

Technical Q&A

Topic summary

Goal: Replace Shopify’s product Add to Cart (ATC) button with a HubSpot CTA while preserving full add-to-cart functionality and enabling HubSpot tracking.

Context:

  • Site setup: Shopify store on a subdomain; HubSpot hosts the main domain.
  • Current ATC: A Shopify form submit button with conditional classes (primary/secondary), disabled state when variant unavailable, and a loading spinner.
  • HubSpot CTA: Embed snippet (anchor + image) loaded via hscta script; marketing requires HubSpot-based tracking, so native Shopify tracking/CTAs aren’t considered.

Key challenges:

  • How to combine the HubSpot CTA embed with Shopify’s ATC behavior (form submission, variant availability, loading state).
  • Unclear whether to wrap the HubSpot CTA around the Shopify button, wrap the Shopify button around the CTA, or use another approach.

Request:

  • Examples or guidance from anyone who has implemented this, and best-practice integration pattern.

Status:

  • No solution or consensus presented yet; code snippets are central to understanding the issue; discussion remains open.
Summarized with AI on January 15. AI used: gpt-5.
1

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!