Hey guys,
Our company has been selling products on Shopify for the past 6 months, but we just made the move to Wordpress (using Pro theme) because we wanted more customization on our site. So far, things have been awesome!
With that said, I ran into a weird issue today and I’m hoping to get some help. We want Wordpress for our main website needs, but we still want to use Shopify for the checkout process. Shopify has a feature called the “Buy Button” made for this exact scenario. It’s basically a long piece of code that you embed on your Wordpress site and it generates an “Add to Cart” button. When users click this button, they are directed to our Shopify store to checkout. Win-win situation, right? Wordpress for the front-end, Shopify for the checkout!
I followed Shopify’s instructions for generating the “Buy Button” code, and it seemed to work perfect. However, I’m now encountering two issues:
1.) I tried to paste their code in two spots on my page - one at the top of the page, and one towards the bottom. The top one seemingly works as intended, but the bottom one will not show up.
2.) The buttons do not display on mobile.
I tried contacting Shopify directly to address these issues, but after their review, they concluded it was likely a conflict with my theme. They tested the code out on their own test site, and things worked fine.
Could you guys please check out my page and let me know if something is conflicting with Pro? I’ve listed the link to my site below, and I’m also going to copy and paste the code. (sorry in advance, it’s long!)
My page: http://pukupals.com.routing.yourhost.co/bunny-backpack-2-go/
Shopify’s code:
<div id='product-component-d1a87b6b23d'></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: 'pukupals.myshopify.com',
apiKey: '0c5b8facce2538932a4401964aa341d9',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [10605691855],
node: document.getElementById('product-component-d1a87b6b23d'),
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": {
"text-align": "left",
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#e576a2",
"font-family": "Lato, sans-serif",
"font-size": "1.05em",
"padding-top": "0.8em",
"padding-bottom": "0.8em",
"padding-left": "1.25em",
"padding-right": "1.25em",
"width": "100%",
"max-width": "225px",
":hover": {
"background-color": "#ce6a92"
},
"border-radius": "5px",
":focus": {
"background-color": "#ce6a92"
},
"font-weight": "bold"
},
"variantTitle": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"quantityInput": {
"font-size": "15px",
"padding-top": "15.5px",
"padding-bottom": "15.5px"
},
"compareAt": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Lato",
"Lato",
"Lato",
"Lato",
"Lato",
"Lato"
]
},
"cart": {
"contents": {
"button": true
},
"text": {
"title": "Your shopping cart"
},
"styles": {
"button": {
"background-color": "#e576a2",
"font-family": "Lato, sans-serif",
"font-size": "15px",
"padding-top": "15.5px",
"padding-bottom": "15.5px",
":hover": {
"background-color": "#ce6a92"
},
"border-radius": "5px",
":focus": {
"background-color": "#ce6a92"
},
"font-weight": "bold"
},
"title": {
"color": "#000000"
},
"footer": {
"background-color": "#ffffff"
},
"header": {
"color": "#000000"
},
"lineItems": {
"color": "#000000"
},
"subtotalText": {
"color": "#000000"
},
"subtotal": {
"color": "#000000"
},
"notice": {
"color": "#000000"
},
"currency": {
"color": "#000000"
},
"close": {
":hover": {
"color": "#000000"
},
"color": "#000000"
},
"emptyCart": {
"color": "#000000"
}
},
"googleFonts": [
"Lato"
]
},
"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": "#e576a2",
"font-family": "Lato, sans-serif",
"font-size": "15px",
"padding-top": "15.5px",
"padding-bottom": "15.5px",
"padding-left": "25px",
"padding-right": "25px",
":hover": {
"background-color": "#ce6a92"
},
"border-radius": "5px",
":focus": {
"background-color": "#ce6a92"
},
"font-weight": "bold"
},
"variantTitle": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"quantityInput": {
"font-size": "15px",
"padding-top": "15.5px",
"padding-bottom": "15.5px"
},
"compareAt": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Lato",
"Lato",
"Lato",
"Lato",
"Lato",
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"background-color": "#e576a2",
":hover": {
"background-color": "#ce6a92"
},
":focus": {
"background-color": "#ce6a92"
},
"font-weight": "bold"
},
"count": {
"font-size": "15px"
}
},
"googleFonts": [
"Lato"
]
},
"option": {
"styles": {
"label": {
"font-family": "Lato, sans-serif"
},
"select": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato",
"Lato"
]
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#000000"
},
"title": {
"color": "#000000"
},
"price": {
"color": "#000000"
},
"quantity": {
"color": "#000000"
},
"quantityIncrement": {
"color": "#000000",
"border-color": "#000000"
},
"quantityDecrement": {
"color": "#000000",
"border-color": "#000000"
},
"quantityInput": {
"color": "#000000",
"border-color": "#000000"
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
Redirecting to Shopify is crucial for us, so please let me know what you guys find out! Thanks!
