Hi all, I’ve recently been trying to add Shopify Buy Buttons to a clients site. I’m not using the CMS for this. I have the product titles, descriptions and prices already designed on the pages. I just want to add the Buy Buttons. Adding the Shopify code is easy enough (using Embed Widgets) on individual pages but how do I get the cart to appear on every page?
Since the changes in how Shopify generate their code, I can’t figure out how to add the cart code to the ‘Custom Code’ Head section of the site (if this is in fact what I need to do!) The new code that’s generated by Shopify is now ALL IN ONE, with the Product code and the Cart code together, as follows:
> <div id='product-component-14a99bbb7dc'></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: 'plastic-solutions-aldridge-limited.myshopify.com',
> apiKey: '9cac6fc4c8c82aa074b11e8bc6b6eebc',
> appId: '6',
> });
> ShopifyBuy.UI.onReady(client).then(function (ui) {
> ui.createComponent('product', {
> id: [9327875142],
> node: document.getElementById('product-component-14a99bbb7dc'),
> moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
> options: {
> "product": {
> "variantId": "all",
> "width": "240px",
> "contents": {
> "img": false,
> "title": false,
> "variantTitle": false,
> "price": false,
> "description": false,
> "buttonWithQuantity": false,
> "quantity": false
> },
> "styles": {
> "product": {
> "text-align": "left",
> "@media (min-width: 601px)": {
> "max-width": "100%",
> "margin-left": "0",
> "margin-bottom": "50px"
> }
> },
> "button": {
> "background-color": "#30ab3a",
> "font-family": "Roboto, sans-serif",
> "font-size": "14px",
> "padding-top": "7px",
> "padding-bottom": "5px",
> "padding-left": "10px",
> "padding-right": "10px",
> ":hover": {
> "background-color": "#3b3b3b"
> },
> ":focus": {
> "background-color": "#2b9a34"
> },
> "font-weight": "normal"
> },
> "variantTitle": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "title": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "normal"
> },
> "description": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "price": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "quantityInput": {
> "font-size": "14px",
> "padding-top": "15px",
> "padding-bottom": "15px"
> },
> "compareAt": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold",
> "font-size": "12px"
> }
> },
> "googleFonts": [
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto"
> ]
> },
> "cart": {
> "contents": {
> "button": true
> },
> "text": {
> "title": "Your Cart"
> },
> "styles": {
> "cart": {
> "background-color": "#3b3b3b"
> },
> "button": {
> "background-color": "#30ab3a",
> "font-family": "Roboto, sans-serif",
> "font-size": "14px",
> "padding-top": "15px",
> "padding-bottom": "15px",
> ":hover": {
> "background-color": "#2b9a34"
> },
> ":focus": {
> "background-color": "#2b9a34"
> },
> "font-weight": "normal"
> },
> "title": {
> "color": "#ffffff"
> },
> "footer": {
> "background-color": "#3b3b3b"
> },
> "header": {
> "color": "#ffffff"
> },
> "lineItems": {
> "color": "#ffffff"
> },
> "subtotalText": {
> "color": "#ffffff"
> },
> "subtotal": {
> "color": "#ffffff"
> },
> "notice": {
> "color": "#ffffff"
> },
> "currency": {
> "color": "#ffffff"
> },
> "close": {
> ":hover": {
> "color": "#ffffff"
> },
> "color": "#ffffff"
> },
> "emptyCart": {
> "color": "#ffffff"
> }
> },
> "googleFonts": [
> "Roboto"
> ]
> },
> "modalProduct": {
> "contents": {
> "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": "#30ab3a",
> "font-family": "Roboto, sans-serif",
> "font-size": "14px",
> "padding-top": "15px",
> "padding-bottom": "15px",
> "padding-left": "20px",
> "padding-right": "20px",
> ":hover": {
> "background-color": "#2b9a34"
> },
> ":focus": {
> "background-color": "#2b9a34"
> },
> "font-weight": "normal"
> },
> "variantTitle": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "title": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "normal"
> },
> "description": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "price": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "quantityInput": {
> "font-size": "14px",
> "padding-top": "15px",
> "padding-bottom": "15px"
> },
> "compareAt": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> }
> },
> "googleFonts": [
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto",
> "Roboto"
> ]
> },
> "toggle": {
> "styles": {
> "toggle": {
> "font-family": "Roboto, sans-serif",
> "background-color": "#30ab3a",
> ":hover": {
> "background-color": "#2b9a34"
> },
> ":focus": {
> "background-color": "#2b9a34"
> },
> "font-weight": "normal"
> },
> "count": {
> "font-size": "14px"
> }
> },
> "googleFonts": [
> "Roboto"
> ]
> },
> "option": {
> "styles": {
> "label": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> },
> "select": {
> "font-family": "Roboto, sans-serif",
> "font-weight": "bold"
> }
> },
> "googleFonts": [
> "Roboto",
> "Roboto"
> ]
> },
> "productSet": {
> "styles": {
> "products": {
> "@media (min-width: 601px)": {
> "margin-left": "-20px"
> }
> }
> }
> },
> "lineItem": {
> "styles": {
> "variantTitle": {
> "color": "#ffffff"
> },
> "title": {
> "color": "#ffffff"
> },
> "price": {
> "color": "#ffffff"
> },
> "quantity": {
> "color": "#ffffff"
> },
> "quantityIncrement": {
> "color": "#ffffff",
> "border-color": "#ffffff"
> },
> "quantityDecrement": {
> "color": "#ffffff",
> "border-color": "#ffffff"
> },
> "quantityInput": {
> "color": "#ffffff",
> "border-color": "#ffffff"
> }
> }
> }
> }
> });
> });
> }
> })();
> /*]]>*/
> </script>
I was told by a Shopify ‘Guru’ to copy and paste everything below the first line into the Head section. However, this does not work because it also includes the code for that particular product! (So that particular ‘Add to Cart’ button appears at the bottom of every page). NOT GOOD!
Also, if I have 20-30 Buy Buttons on one page and the Shopify code now includes the Cart code every time I generate code for a new product, I have the same Cart code 20-30 times on the same page. Is that right or is the Cart code different for every product code generated? This is not the main issue though!
The main problem is, how do I get the Cart to appear on every page?
I’ve looked at other Forum posts and the Webflow/Shopify Tutorials but there is nothing about adding the cart to every page - specifically, using the NEW Shopify code above.
Share Link:
https://preview.webflow.com/preview/plastic-solutions?preview=1594d4e23cb5b38f4d43da0142b3a6e2
The Shopify codes (embed Widgets) are on all the ‘Spares’ pages. i.e. Tuff Tank Spares, Tuff Tank 2 Spares, etc.
The Prices and Shopify Buy Buttons are not published on the live site. (because of this issue!)
Any assistance would be gratefully received! I hope I’ve explained this issue ok? Because of the changes to the Shopify code, is it even possible to have the Cart on every page?
In simple terms:
BEFORE SHOPIFY CODE CHANGES:
- Generate Shopify Product code - add to page using Embed Widget
- Generate Shopify Cart Code - add to main Head section for whole site
i.e. Steps 4-5 here - http://shopify-webflow.webflow.io/
NOW:
- Generate Shopify Product and Cart code ALL IN ONE - add to page using Embed Widget
- No separate code for Cart - how do we now add the Cart to all pages?
THANKS!
Kai
