JavaScript – Customize the purchase button.

(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: 'seldom-seen-uk.myshopify.com',
                        storefrontAccessToken: 'e29c6816fb91b0517a2a18404a3cd749',
                    });
                    ShopifyBuy.UI.onReady(client).then(function (ui) {
                        ui.createComponent('product', {
                            id: '6972943925416',
                            node: document.getElementById('product-component-1628777247408'),
                            moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
                            options: {
                                "product": {
                                    "styles": {
                                        "product": {
                                            "@media (min-width: 601px)": {
                                                "max-width": "calc(25% - 20px)",
                                                "margin-left": "50px",
                                                "margin-bottom": "50px"
                                            }
                                        },
                                        "button": {
                                            "font-family": "Times New Roman, serif",
                                            "font-weight": "bold",
                                            "font-size": "16px",
                                            "padding-top": "16px",
                                            "padding-bottom": "16px",
                                            "color": "#000000",
                                            ":hover": {
                                                "color": "#000000",
                                                "background-color": "#cdcdcd"
                                            },
                                            "background-color": "#e4e4e4",
                                            ":focus": {
                                                "background-color": "#cdcdcd"
                                            }
                                        },
                                        "quantityInput": {
                                            "font-size": "30px",
                                            "padding-top": "16px",
                                            "padding-bottom": "16px"
                                        }
                                    },
                                    "contents": {
                                        "img": false,
                                        "title": false,
                                        "price": false
                                    },
                                    "text": {
                                        "button": "Add to cart"
                                    },
                                    "googleFonts": [
                                        "Times New Roman"
                                    ]
                                },
                                "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-family": "Playfair Display, serif",
                                            "font-weight": "bold",
                                            "font-size": "16px",
                                            "padding-top": "16px",
                                            "padding-bottom": "16px",
                                            "color": "#000000",
                                            ":hover": {
                                                "color": "#000000",
                                                "background-color": "#cdcdcd"
                                            },
                                            "background-color": "#e4e4e4",
                                            ":focus": {
                                                "background-color": "#cdcdcd"
                                            }
                                        },
                                        "quantityInput": {
                                            "font-size": "16px",
                                            "padding-top": "16px",
                                            "padding-bottom": "16px"
                                        }
                                    },
                                    "googleFonts": [
                                        "Times New Roman"
                                    ],
                                    "text": {
                                        "button": "Add to cart"
                                    }
                                },
                                "option": {},
                                "cart": {
                                    "styles": {
                                        "button": {
                                            "font-family": "Playfair Display, serif",
                                            "font-weight": "bold",
                                            "font-size": "16px",
                                            "padding-top": "16px",
                                            "padding-bottom": "16px",
                                            "color": "#000000",
                                            ":hover": {
                                                "color": "#000000",
                                                "background-color": "#cdcdcd"
                                            },
                                            "background-color": "#e4e4e4",
                                            ":focus": {
                                                "background-color": "#cdcdcd"
                                            }
                                        }
                                    },
                                    "text": {
                                        "title": "Basket",
                                        "total": "Subtotal",
                                        "button": "Checkout"
                                    },
                                    "googleFonts": [
                                        "Playfair Display"
                                    ]
                                },
                                "toggle": {
                                    "styles": {
                                        "display": "none"
                                    },
                                    "googleFonts": [
                                        "Playfair Display"
                                    ]
                                }
                            },
                        });
                    });
                }
            })();

Leave a Reply

Your email address will not be published.