Shopify themes, liquid, logos, and UX
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!
User | RANK |
---|---|
219 | |
165 | |
65 | |
54 | |
53 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023