"Buy Button" toggle cart: edit location

IFT_Shop
New Member
1 0 0

Hello! 

I am fairly new to Shopify and am using it as a platform to get an e-commerce store up on a WIX website. The objective from the company is to get the e-commerce site working on the WIX platform. I have successfully gotta the buy button to work on WIX however the cart toggle is in a weird place, middle right of the screen. I have done an extensive amount of research online trying to find the answer to this issue with zero luck on how to move it. I am a designer, not a coder by any stretch. I can edit code when it's obvious where to edit but I am far from someone who can generate code. Can someone please help me understand what I can do to move the cart up to the top right of the screen? Screen Shot 2021-02-11 at 9.13.21 PM.pngScreen Shot 2021-02-11 at 9.13.29 PM.png

 

<div id='collection-component-1613093561389'></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: 'iftna.myshopify.com',
      storefrontAccessToken: '10cc698b8dceb9d8ac82d7c2728f19ab',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('collection', {
        id: '244285833397',
        node: document.getElementById('collection-component-1613093561389'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(50% - 40px)",
          "margin-left": "40px",
          "margin-bottom": "50px",
          "width": "calc(50% - 40px)"
        },
        "img": {
          "height": "calc(90% - 15px)",
          "position": "absolute",
          "left": "0",
          "right": "0",
          "top": "0"
        },
        "imgWrapper": {
          "padding-top": "calc(75% + 15px)",
          "position": "relative",
          "height": "0"
        }
      },
      "title": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px"
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#000000"
        },
        "background-color": "#000000",
        ":focus": {
          "background-color": "#000000"
        },
        "border-radius": "40px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "options": false
    },
    "text": {
      "button": "Pre-Order Now"
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-40px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 100px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#000000"
        },
        "background-color": "#000000",
        ":focus": {
          "background-color": "#000000"
        },
        "border-radius": "40px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      },
      "title": {
        "font-family": "Lato, sans-serif"
      },
      "description": {
        "font-family": "Lato, sans-serif"
      }
    },
    "googleFonts": [
      "Lato"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#000000"
        },
        "background-color": "#000000",
        ":focus": {
          "background-color": "#000000"
        },
        "border-radius": "40px"
      }
    },
    "text": {
      "title": "Shopping Cart",
      "total": "Subtotal",
      "notice": "This is a pre-order sale. Products will be shipped mid to end of March. Your card will be charged at checkout. You will receive an email confirmation when your items ship.\nShipping will be added at checkout.",
      "button": "Checkout",
      "noteDescription": ""
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "background-color": "#000000",
        ":hover":  {
          "background-color": "#000000"
        },
        ":focus": {
          "background-color": "#000000"
        }
      },
      "count": {
        "font-size": "14px"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

0 Likes