Shopify Buy Button Embed not showing up

[MiaPV]

Hello! I was asked to update some custom html code on one of our landing pages, but when I plug the new (JS) code I was sent, nothing appears on the page and I can't figure out why. The first time around, I was able to troubleshoot because I saw there were no styles attached. Now the code is updated with colors etc. and nothing shows. Any chance you could look at the code and tell me what I'm missing/need to do?

Thank you in advance!

<div id='collection-component-a0541ea622d'></div>
<script type="text/javascript">
/*<![CDATA[*/

(function () {
 var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
 if (window.ShopifyBuy) {
   if (window.ShopifyBuy.UI) {
     ShopifyBuyInit();
   } else {
     loadScript();
   }
 } else {
   loadScript();
 }

 function loadScript() {
   var script = document.createElement('script');
   script.async = true;
   script.src=scriptURL;
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
   script.onload = ShopifyBuyInit;
 }

 function ShopifyBuyInit() {
   var client = ShopifyBuy.buildClient({
     domain: 'preventive-vet.myshopify.com',
     apiKey: 'ea25c17f0c3e3d8b6d353860616c6101',
     appId: '6',
   });

   ShopifyBuy.UI.onReady(client).then(function (ui) {
     ui.createComponent('collection', {
       id: 1942192153,
       node: document.getElementById('collection-component-a0541ea622d'),
       moneyFormat: '%24%7B%7Bamount%7D%7D',
       options: {
 "product": {
   "variantId": "all",
   "contents": {
     "imgWithCarousel": false,
     "variantTitle": false,
     "description": false,
     "buttonWithQuantity": false,
     "quantity": false
   },
   "text": {
     "button": "ORDER NOW"
   },
   "styles": {
     "product": {
       "@media (min-width: 601px)": {
         "max-width": "calc(33.33333% - 30px)",
         "margin-left": "30px",
         "margin-bottom": "50px"
       }
     },
     "button": {
       "background-color": "#ffa500",
       "font-size": "17px",
       "padding-top": "16.5px",
       "padding-bottom": "16.5px",
       ":hover": {
         "background-color": "#e69500"
       },
       ":focus": {
         "background-color": "#e69500"
       }
     },
     "quantityInput": {
       "font-size": "17px",
       "padding-top": "16.5px",
       "padding-bottom": "16.5px"
     }
   }
 },
 "cart": {
   "contents": {
     "button": true
   },
   "styles": {
     "button": {
       "background-color": "#ffa500",
       "font-size": "17px",
       "padding-top": "16.5px",
       "padding-bottom": "16.5px",
       ":hover": {
         "background-color": "#e69500"
       },
       ":focus": {
         "background-color": "#e69500"
       }
     },
     "footer": {
       "background-color": "#ffffff"
     }
   }
 },
 "modalProduct": {
   "contents": {
     "img": false,
     "imgWithCarousel": true,
     "variantTitle": false,
     "buttonWithQuantity": true,
     "button": false,
     "quantity": false
   },
   "styles": {
     "product": {
       "@media (min-width: 601px)": {
         "max-width": "100%",
         "margin-left": "0px",
         "margin-bottom": "0px"
       }
     },
     "button": {
       "background-color": "#ffa500",
       "font-size": "17px",
       "padding-top": "16.5px",
       "padding-bottom": "16.5px",
       ":hover": {
         "background-color": "#e69500"
       },
       ":focus": {
         "background-color": "#e69500"
       }
     },
     "quantityInput": {
       "font-size": "17px",
       "padding-top": "16.5px",
       "padding-bottom": "16.5px"
     }
   }
 },
 "toggle": {
   "styles": {
     "toggle": {
       "background-color": "#ffa500",
       ":hover": {
         "background-color": "#e69500"
       },
       ":focus": {
         "background-color": "#e69500"
       }
     },
     "count": {
       "color": "#ffffff",
       ":hover": {
         "color": "#ffffff"
       },
       "font-size": "17px"
     },
     "iconPath": {
       "fill": "#ffffff"
     }
   }
 },
 "productSet": {
   "styles": {
     "products": {
       "@media (min-width: 601px)": {
         "margin-left": "-30px"
       }
     }
   }
 }
}
     });
   });
 }
})();
/*]]>*/
</script>

[Jsum]

@MiaPV,

9/10 this is a javascript error. You would need to share a preview link so we can see the console.

[MiaPV]

Hi @Jsum, thanks for your response. Here is the preview link: https://www.preventivevet.com/vetpromo?hs_preview=UXPgijch-5343889926

Please let me know if there's anything else I can send your way to help.

Cheers!

Mia

[Jsum]

Try separating your embed code like this.

Place the script in the head of your page and the div where you want it. That might fix it. You definitely have an error related to the script file being pulled in by the embed's javascript. Usually when this happens it is not actually an error with the third party library it is an error with how you are implementing it on the page. Moving your script to the head of the document might help. Let me know. 

[MiaPV]

@Jsum I appreciate the help and link to the resource, but it's still not working. : ( I moved the script to the page head and put the div where it was supposed to be and nothing. The weird thing is, we have buy buttons that work elsewhere. This page is using a new script for a product collection vs. a single item.

The original script works on this landing page (the page looks similar to the one I'm trying to update, so hopefully it's not too confusing), and when I check the page head (in the CMS), there is no extra code, the div and script code are both in the Custom HTML (for CTA) module.

[Jsum · Accepted solution]

Use your console. The error has changed, now it's:

client-ed-books:511 A Parser-blocking, cross site (i.e. different eTLD+1) script, https://widgets.shopifyapps.com/assets/widgets/embed/client.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.See https://www.chromestatus.com/feature/5718547946799104 for more details.

[MiaPV]

We figured it out— I was given the wrong code. Thanks for all your help @Jsum!

[Premier_Will]

Hi,

How do you mean the wrong code? We are using the Shopify buy buttons in a hubspot email - appear fine in preview (online) but just as /**/ on the test email.

It is clear that the code is designed for web, hence it works on the preview, but not designed for email. We just don't know how to fix this... Any advice is greatly appreciated.

Will

[MiaPV]

Hey @Premier_Will, my issue happened a while ago, so I can't remember it completely, but I believe the person who sent the code for me to embed, had sent me something incorrect.

That, or this may have been the issue where we wanted to embed the same button on one page twice (long scroll), but only one instance would show up. It was an easy fix where I just had to change one of the collection names twice in the script (like adding a "-1").

I'm not exactly sure what your question is, but hopefully can offer an alternative solution. Since the buy buttons don't work in emails, you could create a CTA to insert into your emails that direct people to your store. Or directs them to your HubSpot landing page with the shopify embed code you originally wanted to include in your email. If you have multiple products, you can create multiple CTAs, or you can create one CTA that directs them to the landing page where your add to cart collection exists.

[MiaPV]

Thanks @Jsum I'm not a developer so, I'm really not sure what any of that means. I'll try to find other help.