Streaming live at 10am (PST)

Issue with Shopify Buy Buttons on non CMS site


#1

@cyberdave @PixelGeek @AlexN

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


#2

@AlexN I also have this problem:

Thanks!


#3

Hi @Keejo, I am a little confused as to what you are trying to accomplish, are you trying to open the cart window without providing any products to be shown?

I do not think that it is possible to do that using the embeds from Shopify any longer unless the Buy Button is pointed at a product or product collection.

It sounds like you are trying to create some kind of persistent cart on the site, is that correct?

I found this article, which seems to suggest that Shopify no longer supports this feature: https://ecommerce.shopify.com/c/shopify-discussion/t/persistent-shopping-cart-needed-so-cart-content-is-stored-in-customers-shopify-account-329505

I am checking into it further, to see if there is any alternatives.


#4

Hi @cyberdave -

Sorry for any confusion! Persistent Shopping Cart is not what I mean...

If I have a website with 4 pages and I add Shopify Buy Buttons to page 4 and then add items to the cart - The cart is only on page 4 - If I go to page 1,2,3 there is no cart (with the items I added).

This is why, normally, I guess, you would add the cart code to the Custom Code Head section so it appears on all pages.

Thanks!


New small e-commerce site using Shopify buy button
#5

Hi @Keejo, thanks for getting back to me, so are you just trying to put the cart with 4 items on each page? If so, you can do that, by pasting the code to the head section from site settings in the custom code tab.

I do not think it is possible at the moment to put a cart on a page with no items specified.


#6

Hi @cyberdave , thanks for the reply! I have fixed it with a workaround! :grinning:

To add the cart to every page including pages without Buy Buttons I created a new Embed Widget, copied the code from one of the Buy Buttons into it and then set Display Settings to None. I added this 'hidden' button to all the pages without Buy Buttons. The cart now appears on every page and works perfectly! SORTED!


Is shopify x webflow still possible?
#7

Thats a good solution mate. YOu can also do this!

Add the following code before the body tag and modify the colors to suit your site:

<div data-accent_color="767676" data-background_color="ffffff" data-button_background_color="f3e1dd" data-button_text_color="000000" data-cart_button_text="Cart" data-cart_title="Your cart" data-cart_total_text="Total" data-checkout_button_text="Checkout" data-discount_notice_text="Shipping and discount codes are added at checkout." data-embed_type="cart" data-empty_cart_text="Your cart is empty." data-shop="yourstore.myshopify.com" data-sticky="true" data-text_color="000000"></div>
<div data-background_color="ffffff" data-button_background_color="d9d9d9" data-button_text_color="000000" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-buy_button_text="Add to Cart" data-collection_handle="candles" data-display_size="compact" data-embed_type="collection" data-has_image="true" data-next_page_button_text="Next page" data-product_handle="" data-product_modal="true" data-product_name="" data-product_title_color="000000" data-redirect_to="modal" data-shop="yourstore.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>