title: Modify the width, height and position of product variant drop-down for a Shopify Buy Button without disabling the iFrame
body: <p>I need to alter the height of the product variant dropdown to exactly 42px (the same height as the buy button) and the width to exactly 80px. Additionally, instead of the product variant dropdown being positioned above the buy button, I need to be positioned directly beside the buy button to the left. </p>
  
  <p>I've tried to find articles on how to do this within Shopify forums, but have yet to find one and I'm unsure where within the embedded code these elements are to change. Shopify doesn't offer customization support for their buy buttons either. I do not want to disable the iFrame.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/johnsmithh/eo4rzLwc/2/" rel="nofollow noreferrer">https://jsfiddle.net/johnsmithh/eo4rzLwc/2/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="product-component-1580935128063"&gt;
  &lt;script type="text/javascript"&gt;
  /*&lt;![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: 'missingnewyork.myshopify.com',
        storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
      });
      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: '4448713736258',
          node: document.getElementById('product-component-1580935128063'),
          moneyFormat: '%24%7B%7Bamount%7D%7D',
          options: {
    "product": {
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "calc(25% - 20px)",
            "margin-left": "20px",
            "margin-bottom": "50px"
          }
        },
        "button": {
          "font-weight": "bold",
          "color": "#000000",
          ":hover": {
            "color": "#000000",
            "background-color": "#e6e6e6"
          },
          "background-color": "#ffffff",
          ":focus": {
            "background-color": "#e6e6e6"
          },
          "border-radius": "5px"
        },
      },
        "option": {
            "display": "inline-block",
            "width": "20px",
        },  
      "contents": {
        "img": false,
        "title": false,
        "price": false
      },
      "text": {
      "outOfStock": "SOLD OUT"
      },    
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    },
    "modalProduct": {
      "contents": {
        "img": false,
        "imgWithCarousel": true,
        "button": false,
        "buttonWithQuantity": true
      },
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "100%",
            "margin-left": "0px",
            "margin-bottom": "0px"
          }
        },
        "button": {
          "font-weight": "bold",
          "color": "#000000",
          ":hover": {
            "color": "#000000",
            "background-color": "#e6e6e6"
          },
          "background-color": "#ffffff",
          ":focus": {
            "background-color": "#e6e6e6"
          },
          "border-radius": "5px"
        }
      },
      "text": {
        "button": "ADD TO CART"
      }
    },
    "cart": {
      "styles": {
        "button": {
          "font-weight": "bold",
          "color": "#000000",
          ":hover": {
            "color": "#000000",
            "background-color": "#e6e6e6"
          },
          "background-color": "#ffffff",
          ":focus": {
            "background-color": "#e6e6e6"
          },
          "border-radius": "5px"
        },
        "title": {
          "color": "#ffffff"
        },
        "header": {
          "color": "#ffffff"
        },
        "lineItems": {
          "color": "#ffffff"
        },
        "subtotalText": {
          "color": "#ffffff"
        },
        "subtotal": {
          "color": "#ffffff"
        },
        "notice": {
          "color": "#ffffff"
        },
        "currency": {
          "color": "#ffffff"
        },
        "close": {
          "color": "#ffffff",
          ":hover": {
            "color": "#ffffff"
          }
        },
        "empty": {
          "color": "#ffffff"
        },
        "noteDescription": {
          "color": "#ffffff"
        },
        "discountText": {
          "color": "#ffffff"
        },
        "discountIcon": {
          "fill": "#ffffff"
        },
        "discountAmount": {
          "color": "#ffffff"
        },
        "cart": {
          "background-color": "#000000"
        },
        "footer": {
          "background-color": "#000000"
        }
      },
      "text": {
        "title": "CART",
        "empty": "YOUR CART IS EMPTY.",
        "notice": "Shipping and taxes are added at checkout.",    
      }
    },
    "toggle": {
      "styles": {
        "toggle": {
          "font-weight": "bold",
          "background-color": "#ffffff",
          ":hover": {
            "background-color": "#e6e6e6"
          },
          ":focus": {
            "background-color": "#e6e6e6"
          }
        },
        "count": {
          "color": "#000000",
          ":hover": {
            "color": "#000000"
          }
        },
        "iconPath": {
          "fill": "#000000"
        }
      }
    },
    "lineItem": {
      "styles": {
        "variantTitle": {
          "color": "#ffffff"
        },
        "title": {
          "color": "#ffffff"
        },
        "price": {
          "color": "#ffffff"
        },
        "fullPrice": {
          "color": "#ffffff"
        },
        "discount": {
          "color": "#ffffff"
        },
        "discountIcon": {
          "fill": "#ffffff"
        },
        "quantity": {
          "color": "#ffffff"
        },
        "quantityIncrement": {
          "color": "#ffffff",
          "border-color": "#ffffff"
        },
        "quantityDecrement": {
          "color": "#ffffff",
          "border-color": "#ffffff"
        },
        "quantityInput": {
          "color": "#ffffff",
          "border-color": "#ffffff"
        }
      }
    }
  },
        });
      });
    }
  })();
  /*]]&gt;*/
  &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>