Hi @tristantbg,
Do you know if this works with a Shopify Lite plan? Thats a great deal for $9 a month.
Thanks!
Hi, it should work with this plan yes !
1 Like
Great! Thanks 
I am curious if someone can show me a production example of this Shopify integration!
1 Like
Hey All,
I’m wondering if I can create an add to cart button with the $productID given by the blueprints.
So as to make several Add To Cart button on the same page.
Best.
Thanks @jimbobrjames awesome! Really beautiful website, wel done! 
1 Like
I did a few websites using this plugin :
https://dheygere.com
https://visualsociety.ch
http://general-index.eu
https://kamelmennour.com
1 Like
Yes you can do this easily by using the ShopifyBuyButton SDK !
I dind’t get how to make it works with the shop js in your github, it makes me error when I tried to using it
I am no Shopify Pro, but I got the plugin working after some time. It doesn’t not make sense to share my whole template but double check if the following resources are in your template, maybe that helps:
<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"></script>
<script>App('<?= $productID ?>', '<?= $productprice ?>');</script>
<?php echo js('assets/js/shopify.js') ?>Hey Agloeckner,
When you say shopify.js is that the js file from the plugin, or the file upper in the topic ?
Best J
I hostly don’t have a clue where I got that from, probably Shopify or Stackoverflow, it’s about the button basically:
or
shopify.js:
let App = function (productId = null, productPrice = null) {
// Launch the shopify library
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
}
// Initialize the buy button
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: '<shopify-shop-ddomain>',
storefrontAccessToken: 'xxx'
});
// Set up the button
ShopifyBuy.UI.onReady(client).then(function (ui) {
// Configurations
var Config = {
// Product button
product: {
iframe: false,
variantId: 'all',
width: 'auto',
contents: {
img: false,
imgWithCarousel: false,
title: false,
variantTitle: false,
price: false,
description: false,
buttonWithQuantity: false,
quantity: false
},
text: {
button: 'In den Warenkorb',
outOfStock: 'Nicht auf Lager',
unavailable: 'Nicht verfügbar'
}
},
// Cart Config
cart: {
iframe: false,
popup: false,
contents: {
button: true,
img: true
},
text: {
title: 'Warenkorb',
empty: 'Ihr Warenkorn ist leer.',
button: 'Bezahlen',
total: 'Gesamt',
notice: 'Lieferung und Rabatt Gutscheine können bei der Bezahlung hinzugefügt werden.',
noteDescription: 'Special instructions for seller'
}
},
// Cart toggle button
toggle: {
// Don't use iframes
iframe: false,
// What items do we need?
order: ['icon']
},
// Cart Product config
lineItem: {
contents: {
image: true
}
}
};
// set the button price
if (productId != null) {
// Instantiate the components
ui.createComponent('product', {
id: [productId],
node: document.getElementById('buy'),
moneyFormat: '{{amount_with_comma_separator}} €',
// Components Options
options: {
product: Config.product,
cart: Config.cart,
lineItem: Config.lineItem,
toggle: Config.toggle
}
});
}
});
}
};Hi @jimbobrjames, I have used the method you outlined above and it is all working perfectly.
I have a question slightly outside of the Kirby world (which I have asked in the Shopify forum to no avail), but thought you may have some experience with it.
I am currently attempting to add custom styles to the Toggle and Cart components using the method outlined in the github docs, however none of the custom style attributes are working.
Example here: https://lia.w38.site/products/children-winter-cardigans-lilac
This is my whole javascript doc:
let App = function(productId = null, productPrice = null) {
// Launch the shopify library
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
}
// Initialize the buy button
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'domain.myshopify.com',
storefrontAccessToken: 'XXXXXXXXXXXXX',
});
// Set up the button
ShopifyBuy.UI.onReady(client).then(function(ui) {
// Configurations
var Config = {
// Product button
"product": {
"iframe": false,
"variantId": "all",
"width": "auto",
"contents": {
"img": false,
"imgWithCarousel": false,
"title": false,
"variantTitle": false,
"price": true,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
button: 'Add to Cart',
outOfStock: 'Out of stock',
unavailable: 'Unavailable',
},
},
// Cart Config
"cart": {
"iframe": false,
"popup": false,
"contents": {
"button": true,
"img": false
},
"styles": {
"button": {
":hover": {
"background-color": "#a34e4e"
},
"background-color": "#b55757",
":focus": {
"background-color": "#a34e4e"
},
"border-radius": "0px"
}
},
"text": {
"title": 'Carrito',
"empty": 'Your cart is empty.',
"button": 'Checkout',
"total": 'Total',
"notice": 'Shipping and discount codes are added at checkout.',
"noteDescription": 'Special instructions for seller',
}
},
// Cart toggle button
"toggle": {
// Don't use iframes
"iframe": false,
// Icon?
"icon": false,
//Count of items in cart
"count": true,
//Title
"title": false,
// What items do we need?
"order": [
'count',
'title'
],
"text": {
"title": 'shopping cart',
},
"styles": {
"toggle": {
"background-color": "#b55757",
":hover": {
"background-color": "#a34e4e"
},
":focus": {
"background-color": "#a34e4e"
}
}
},
},
// Cart Product config
"lineItem": {
"contents": {
"image": true
},
},
};
// set the button price
if (productId !== null) {
// Instantiate the components
ui.createComponent('product', {
id: [productId],
node: document.getElementById('buy'),
moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
// Components Options
options: {
"product": Config.product,
"cart": Config.cart,
"lineItem": Config.lineItem,
"toggle": Config.toggle
}
});
}
});
}
};
Any guidance would be super appreciated!
Im afraid i havent used that part of the config, so cant really help. I did all visual styles hrough plain CSS.
Hey @jimbobrjames thanks for the quick reply. Styling via CSS would be my 1st option too, however the script seems to append/insert styles into my <head> which I haven’t managed to override at all.
Were you able to just target the Shopify classes for each of the components and override them?
Yes, exactly that :slight_smile its not easy to give an example because mine is in SCSS with a bunch of custom mixins in it, but pretty much everything is prefixed with .shopify-buy so its easy enough to just keep going till you’ve styled it as you want it.
Thank you…
I think there is a known bug/feature(?) that means when iframe: false the script still injects inline css code.
But your comment helped me persist and if I just add some inline css that comes later in the template I can target it. 
Happy days