https://preview.webflow.com/preview/snatest?preview=da6db2537fd37c75f8303d565ae54595
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!!!
bump guys. Really need some help with this!
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
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?
Tested on Firefox, Chrome and Safari. Works fine for me.
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?
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 
Anyway happy to read you found your issue.
Take care
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>
Didn’t use shopify with webflow yet but you can take a look at this external thread :