Shopify Question posted in
The Shopify help center can be found here.

Shopify Toggle Cart Button location

I’m currently using the Shopify Buy Button.

For the most part, I just copy and pasted the embed code and didn’t change much. If you scroll all the way down to "toggle":{, you’ll notice I made it so iframe and sticky is set to false.

The Issue

When a product is added to a cart, a button that toggle’s the shopping cart appears in the body. .shopify-buy-frame.shopify-buy-frame--toggle

It normally appears as a fixed div on the middle right hand corner of the screen but since my sticky option is set to false, it is placed at the bottom of the body.

I’d like to be able to assign a parent container that this toggle button ends up in. Ideally, I want to put it in my header somewhere and not have it be generated at the bottom of the body of my page.

For example:

<body>

    <header>
        <div id="cart-toggle">
            <!-- THIS IS WHERE I WANT IT TO APPEAR -->
        </div>
    <header>

<!-- THIS IS WHERE IT APPEARS -->
</body>

Bonus Points if I can figure out how to generate a second toggle button for my mobile navigation area.

I’ve searched the default compenents and the developer section for the toggle options and can’t seem to figure it out.

If anyone could help it would be greatly appreciated.

My Embed Code

<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();}f
  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: 'domain.myshopify.com',apiKey: 'apikey',appId: '0'});
    ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{moneyFormat:'%24%7B%7Bamount%7D%7D',
        
  options:{
    "product":{
      "variantId":"all",
      "width":"240px",
      "contents":{
        "img":false,
        "imgWithCarousel":false,
        "title":false,
        "variantTitle":false,
        "price":false,
        "description":false,
        "buttonWithQuantity":false,
        "quantity":false
      },
      "text":{
        "button":"ADD TO BAG"
      },
      "styles":{
        "product":{
          "text-align":"left",
          "@media(min-width:601px)":{
            "max-width":"100%",
            "margin-left":"0",
            "margin-bottom":"50px"
          }
        },
        "button":{
          "background-color":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          "padding-left":"35px",
          "padding-right":"35px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "title":{
          "font-size":"26px"
        },
        "price":{
          "font-size":"18px"
        },
        "quantityInput":{
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px"
        },
        "compareAt":{
          "font-size":"15px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "cart":{

      "contents":{
        "button":true
      },
      "text":{
        "title":"Bag"
      },
      "styles":{
        "button":{
          "background-color":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "footer":{
          "background-color":"#ffffff"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "modalProduct":{
      "contents":{
        "img":false,
        "imgWithCarousel":true,
        "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":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          "padding-left":"35px",
          "padding-right":"35px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "quantityInput":{
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "toggle": {
      "iframe":false,
      "sticky":false,
      "contents":{
        "icon":true,
        "title":false
      },
      "styles":{
        "toggle":{
          "font-family":"Lato,sans-serif",
          "background-color":"#393a39",
          ":hover":{
            "background-color":"#333433"
          },
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "count":{
          "font-size":"13px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "productSet":{
      "styles":{
        "products":{
          "@media(min-width:601px)":{
            "margin-left":"-20px"
          }
        }
      }
    }
  }
}
);});}
})();
/*]]>*/
</script>
Tags:

3

Answers


  1. 0

    You can use events option inside toggle config to define events you need. Use afterInit event to move toggle node in another place after initialization:

    toggle: {
    events: {
        afterInit: function (component) {
            document.getElementById('cart-toggle').appendChild(component.node);
        },
    }
}

    I assume that you can`t create two toggle components within a single Shopify embed. But you may operate on existing one using media queries in JS (i.e. enquire.js), so when your media query matches/unmatches, you move toggle button wherever you like in the DOM (i.e. inside mobile navigation area)

    Login or Signup to reply.
  2. 0

    Read this on GitHub: insert toggle in the dom #569

    I needed to do this very same thing. Verified, it worked for me.
    You can place a DIV anywhere and use your own CSS to style it.
    Yes, remember to set iframe and sticky to false.

    Login or Signup to reply.
  3. 0

    Surprisingly what @radioSPARKS posted works, still in 2021.
    Below a cleaner code in full and more details:

    HTML:

    <div id="shopify-toggle"></div>
<div id="shopify-product-component"></div>

    Javascript:

    ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    ...
    node: document.getElementById('shopify-product-component'),
    toggles: [{node: document.getElementById('shopify-toggle')}], // <== This is it: it replaces this element with the toggle
    options: {
      ...
      toggle: {
        iframe: false,
        sticky: false,
        ...
       }
       ...
     }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search