Streaming live at 10am (PST)

Shopify buy button doesn't hold cart items in mobile version


#1

https://preview.webflow.com/preview/snatest?preview=da6db2537fd37c75f8303d565ae54595

http://snatest.webflow.io/

My site is using a custom buy button on the owl page for a product. On desktop the cart icon loads on other pages such as the FAQ and the home page but on mobile the cart doesnt save the information. How do I fix this?

Help!!!


#2

bump guys. Really need some help with this!


#4

Hi @Hamzster

Everything works fine for me here. Tested on mobile and desktop.

On mobile the cart correctly save the information.

I indeed see the cart in the FAQ page on both desktop and mobile, but I think this is a normal behaviour as long as you add an item in the bag, you will see the bag on every pages, don't you think?

Hope this helps.

Take care


#5

Yes I want the cart to appear on mobile too. But it doesn't for me. Even reloading the website deletes the cart. Which browser did you use on mobile?


#6

Tested on Firefox, Chrome and Safari. Works fine for me.


#7

I figured it out. I was using 'private browsing' in safari on my iphone that's why it wasn't working. Does anyone know why that is?


#8

I would say the browser cant save any information regarding your actions with the shopify button as long as you are in the private mode, but I might be wrong :wink:

Anyway happy to read you found your issue.

Take care


#9

Hey,

I have another question. When I click checkout on my page a small tiny window opens. How can I force it to open a larger window? Is there any javascript for this?

> <div id='product-component-a223c0a3627'></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: 'x-ssx-xxs.myshopify.com',
>       apiKey: 'xxx',
>       appId: '6',
>     });

>     ShopifyBuy.UI.onReady(client).then(function (ui) {
>       ui.createComponent('product', {
>         id: [9299300867],
>         node: document.getElementById('product-component-a223c0a3627'),
>         moneyFormat: '%24%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": {
>         "@media (min-width: 601px)": {
>           "max-width": "calc(25% - 20px)",
>           "margin-left": "20px",
>           "margin-bottom": "50px"
>         }
>       },
>       "button": {
>         "background-color": "#000000",
>         "font-family": "Roboto, sans-serif",
>         "font-size": "14px",
>         "padding-top": "15px",
>         "padding-bottom": "15px",
>         "padding-left": "24px",
>         "padding-right": "24px",
>         ":hover": {
>           "background-color": "#000000"
>         },
>         "border-radius": "0px",
>         ":focus": {
>           "background-color": "#000000"
>         },
>         "font-weight": "normal"
>       },
>       "variantTitle": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "title": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "description": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "price": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "quantityInput": {
>         "font-size": "14px",
>         "padding-top": "15px",
>         "padding-bottom": "15px"
>       },
>       "compareAt": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       }
>     },
>     "googleFonts": [
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto"
>     ]
>   },
>   "cart": {
>     "contents": {
>       "button": true
>     },
>     "styles": {
>       "button": {
>         "background-color": "#000000",
>         "font-family": "Roboto, sans-serif",
>         "font-size": "14px",
>         "padding-top": "15px",
>         "padding-bottom": "15px",
>         ":hover": {
>           "background-color": "#000000"
>         },
>         "border-radius": "0px",
>         ":focus": {
>           "background-color": "#000000"
>         },
>         "font-weight": "normal"
>       },
>       "footer": {
>         "background-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": "#000000",
>         "font-family": "Roboto, sans-serif",
>         "font-size": "14px",
>         "padding-top": "15px",
>         "padding-bottom": "15px",
>         "padding-left": "24px",
>         "padding-right": "24px",
>         ":hover": {
>           "background-color": "#000000"
>         },
>         "border-radius": "0px",
>         ":focus": {
>           "background-color": "#000000"
>         },
>         "font-weight": "normal"
>       },
>       "variantTitle": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "title": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "description": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "price": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       },
>       "quantityInput": {
>         "font-size": "14px",
>         "padding-top": "15px",
>         "padding-bottom": "15px"
>       },
>       "compareAt": {
>         "font-family": "Roboto, sans-serif",
>         "font-weight": "normal"
>       }
>     },
>     "googleFonts": [
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto",
>       "Roboto"
>     ]
>   },
>   "toggle": {
>     "styles": {
>       "toggle": {
>         "font-family": "Roboto, sans-serif",
>         "background-color": "#000000",
>         ":hover": {
>           "background-color": "#000000"
>         },
>         ":focus": {
>           "background-color": "#000000"
>         },
>         "font-weight": "normal"
>       },
>       "count": {
>         "font-size": "14px"
>       }
>     },
>     "googleFonts": [
>       "Roboto"
>     ]
>   },
>   "option": {
>     "styles": {
>       "label": {
>         "font-family": "Roboto, sans-serif"
>       },
>       "select": {
>         "font-family": "Roboto, sans-serif"
>       }
>     },
>     "googleFonts": [
>       "Roboto",
>       "Roboto"
>     ]
>   },
>   "productSet": {
>     "styles": {
>       "products": {
>         "@media (min-width: 601px)": {
>           "margin-left": "-20px"
>         }
>       }
>     }
>   }
> }
>       });
>     });
>   }
> })();
> /*]]>*/
> </script>

#10

https://ecommerce.shopify.com/c/ecommerce-design/t/how-can-i-open-my-responsive-checkout-from-embedded-buy-now-button-cart-at-larger-size-306594
Didn't use shopify with webflow yet but you can take a look at this external thread :