Integrating Buy Button to Squarespace - button not loading

New Member
1 0 0

Hi all, 

I've built my website on Squarespace and am using to Shopify Buy Button to see my products.

Everything works fine - EXCEPT my buy buttons are not loading upon first visiting the page. They appear only if you refresh the page.

I've reached out to Squarespace Support (with no luck) and Shopify gurus directed me here.

It looks like there is a javascipt code in my Squarespace template that is preventing the Shopify Buy Button to appear upon loading. Has anyone had this problem? OR does anyone know of a snippet of code I can implement to debug this problem? OR any developers that can help me out??

 

Thanks!

0 Likes
New Member
2 0 0

I'm having the same issue :( Super frustrating.

I've just redesigned and converted my Squarespace blog to one of their ecommerce themes. I just found out that MailChimp doesn't connect with Squarespace e-commerce after I redesigned everything.

I was so stoked to find the Shopify buy button to solve this issue, but when I embed the code, the button doesn't load until I refresh and then it's off center.

Melissa, what theme are you using? I'm using Hyde. 

Really hoping I don't have to rebuild my entire site on Shopify since I really love the look of my Squarespace site, not to mention the time I've already put into it. If only the buy button would work, I would be good to go!

Any help regarding this issue is much appreciated! Thank you!

Here is the code just in case:

<div id='product-component-13659080fa9'></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: 'salt-and-ritual.myshopify.com',
      apiKey: '4d7067c84970d95af9da739f78c7307f',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9057330561],
        node: document.getElementById('product-component-13659080fa9'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "background-color": "#7cb0ec",
        ":hover": {
          "background-color": "#709ed4"
        },
        ":focus": {
          "background-color": "#709ed4"
        },
        "font-weight": "normal"
      },
      "title": {
        "font-weight": "normal",
        "font-size": "26px"
      },
      "price": {
        "font-size": "18px"
      },
      "compareAt": {
        "font-size": "15px"
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "text": {
      "title": "Babe Cart to the rescue.",
      "empty": "Boo. Your cart is empty, babe."
    },
    "styles": {
      "button": {
        "background-color": "#7cb0ec",
        ":hover": {
          "background-color": "#709ed4"
        },
        ":focus": {
          "background-color": "#709ed4"
        },
        "font-weight": "normal"
      },
      "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": "#7cb0ec",
        ":hover": {
          "background-color": "#709ed4"
        },
        ":focus": {
          "background-color": "#709ed4"
        },
        "font-weight": "normal"
      },
      "title": {
        "font-weight": "normal"
      }
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#7cb0ec",
        ":hover": {
          "background-color": "#709ed4"
        },
        ":focus": {
          "background-color": "#709ed4"
        },
        "font-weight": "normal"
      },
      "count": {
        "font-size": "16px"
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

0 Likes
New Member
3 0 0

Hey there! Did either of you find a solution to this? I'm having the same issue over at www.hippiechemist.com. Ahhh yes so frustrating. 

0 Likes
New Member
1 0 0

We had a similar problem where the collection code that shopify gives you wasn't loading on a squarespace site.  I went on a deep dive on google trying a ton of stuff and nothing worked.  FINALLY found this: https://answers.squarespace.com/questions/188857/why-doesnt-my-javascript-code-work-until-i-refresh....

 

turning off the template's 'ajax' loading allowed the custom js to execute.  With ajax on, it would only load the js code when the page was refreshed!

 

this is a super easy solution, so hope it saves you some time and energy!

0 Likes