Shopify Buy Button Embed not showing up

SOLVE
MiaPV
Top Contributor

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>

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

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.

View solution in original post

0 Upvotes
9 Replies 9
Jsum
Key Advisor

@MiaPV,

 

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

0 Upvotes
MiaPV
Top Contributor

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

0 Upvotes
Jsum
Key Advisor

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. 

0 Upvotes
MiaPV
Top Contributor

@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.

0 Upvotes
Jsum
Solution
Key Advisor

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.

View solution in original post

0 Upvotes
MiaPV
Top Contributor

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.

0 Upvotes
MiaPV
Top Contributor

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

0 Upvotes
Premier_Will
Participant

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.

html.png

 

Will

0 Upvotes
MiaPV
Top Contributor

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.

0 Upvotes