Buy Button / It's Displaying Two full "buy button windows", please help

Highlighted
New Member
2 0 0

I know that this is probably in the code, but I cannot figure it out.  When I paste in hy html for the buy button, it always shows two "buy button windows" on my page. It's hard to explain, so here is the URL: 

https://page-preview.instapage.com/preview/799dab467d7be7d8f429c2d385cc318d91c0a5f42b11edc64b7d2c5b3...

 

Here is the html code that is being created by Shopify:

<div id='product-component-1540749529612'></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: 'ultimate-comfort-sleep.myshopify.com',
          storefrontAccessToken: 'a5986f1eec12611f0f13b8b338c00ddb',
        });

        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: [1399474618412],
            node: document.getElementById('product-component-1540749529612'),
            moneyFormat: '${{amount}}',
            options: {"product":{"layout":"horizontal","variantId":"all","width":"100%","contents":{"img":false,"imgWithCarousel":true,"variantTitle":false,"description":true,"buttonWithQuantity":true,"button":false,"quantity":false},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"100%","margin-left":"0","margin-bottom":"50px"}},"title":{"font-size":"26px"},"price":{"font-size":"18px"},"compareAt":{"font-size":"15px"}}},"cart":{"contents":{"button":true},"styles":{"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"}}}},"productSet":{"styles":{"products":{"@media (min-width: 601px)":{"margin-left":"-20px"}}}}},
          });
        });
      }
    })();
    /*]]>*/
    </script>

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
228 0 39

Hi, Bryce!
 
Anders from the Shopify Social Care team here. I hope you're doing well!

Thank you for providing the link and embed code. There doesn't look to be anything wrong in the embed code as it's very similar to the one generated by the buy button sales channel.

Without having access to your site's HTML, it looks like the embed code for your buy button has most likely been placed twice within your product page's code. I would head into your product page template and do a search for any of the opening tags in the embed code (for example, <div id='product-component-1540749529612'></div>) to see if the code has been placed twice in the HTML template. If it has, remove the duplicate embed code (it will most likely be lower down in the template) and you should see your product page return to normal.

If you run into any troubles with this change, be sure to let me know! 

Anders3 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
2 0 0

Hey Anders,

I just figured it out, and maybe this is something that Shopify can address for future problems.  When I generate the "Buy Button" code from the backend of the product page, then it creates the link that gives two windows.

However, if I generate the code using the "Buy Button" on the sales channel page, like the one that you showed earlier in this post, then the link works just fine.

Problem solved, thank!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
228 0 39

Hi again, Bryce!

Ah, I'm glad to hear you were able to sort out the buy button code! Hmm, that's odd that the method you used to create the code contained two windows but I'll be sure to pass that feedback along. 

Cheers!

Anders3 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

<div id='collection-component-1587255836577'></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: 'esuperior-online-now.myshopify.com',
storefrontAccessToken: '3f85d9cb92d3292bff61e8df76fad5f3',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '183297277996',
node: document.getElementById('collection-component-1587255836577'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"button": {
"font-weight": "bold",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#d2673f"
},
"background-color": "#e97246",
":focus": {
"background-color": "#d2673f"
},
"border-radius": "37px",
"padding-left": "92px",
"padding-right": "92px"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
}
},
"buttonDestination": "checkout",
"text": {
"button": "Buy now"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#d2673f"
},
"background-color": "#e97246",
":focus": {
"background-color": "#d2673f"
},
"border-radius": "37px",
"padding-left": "92px",
"padding-right": "92px"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#d2673f"
},
"background-color": "#e97246",
":focus": {
"background-color": "#d2673f"
},
"border-radius": "37px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#e97246",
":hover": {
"background-color": "#d2673f"
},
":focus": {
"background-color": "#d2673f"
}
},
"count": {
"font-size": "18px",
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>


Hi again, Bryce!

Ah, I'm glad to hear you were able to sort out the buy button code! Hmm, that's odd that the method you used to create the code contained two windows but I'll be sure to pass that feedback along. 

Cheers!


 

0 Likes
Highlighted
New Member
1 0 0

I am seeing the same problem but with the code generated by the Sales Channel.   Do you know what was different between the working and non-working code?

Here's the code I'm using

<div id="product-component-1590604863584">
 </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: 'smartpoolgauge.myshopify.com',
      storefrontAccessToken: '4495fc1e8c3b50a65fc4896b8ae520af',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '5245769547944',
        node: document.getElementById('product-component-1590604863584'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        ":hover": {
          "background-color": "#149eb3"
        },
        "background-color": "#16afc7",
        ":focus": {
          "background-color": "#149eb3"
        }
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        ":hover": {
          "background-color": "#149eb3"
        },
        "background-color": "#16afc7",
        ":focus": {
          "background-color": "#149eb3"
        }
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        ":hover": {
          "background-color": "#149eb3"
        },
        "background-color": "#16afc7",
        ":focus": {
          "background-color": "#149eb3"
        }
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#16afc7",
        ":hover": {
          "background-color": "#149eb3"
        },
        ":focus": {
          "background-color": "#149eb3"
        }
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
 </script>
0 Likes
Highlighted
New Member
1 0 0

I also have the same problem.. here's the code 

It shows multiple the same collections with buy button. Cant figure out why. Hope you could help me,

 

https://tinypeep-ph.myshopify.com/admin/apps/buy_button/code

<div id='collection-component-1595149000359'></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: 'tinypeep-ph.myshopify.com',
storefrontAccessToken: '5bb6812ecf2a8167b057eafa73a35fef',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '207356264599',
node: document.getElementById('collection-component-1595149000359'),
moneyFormat: '%E2%82%B1%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(33.33333% - 30px)",
"margin-left": "30px",
"margin-bottom": "50px",
"width": "calc(33.33333% - 30px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"title": {
"font-size": "14px",
"color": "#0a0909"
},
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
},
"price": {
"color": "#f10808"
},
"compareAt": {
"color": "#f10808"
},
"unitPrice": {
"color": "#f10808"
}
},
"buttonDestination": "checkout",
"text": {
"button": "Buy now"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-30px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {
"styles": {
"label": {
"font-family": "Candara, sans-serif"
},
"select": {
"font-family": "Candara, sans-serif"
}
}
},
"cart": {
"styles": {
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"count": {
"font-size": "14px"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

0 Likes
Highlighted
New Member
1 0 0

I'm having the same issue, where is the support?

 

Thank you,

0 Likes