how to change variant select option to name box

[shahraim-Xeve]

how to change variant select option to name box

(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: "quickstart-0f8a6e44.myshopify.com", storefrontAccessToken: "f9fa62de206649b411bb97b1274e51cd", }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent("product", { id: "7875952476313", node: document.getElementById("product-component-1708959600518"), moneyFormat: "%24%7B%7Bamount%7D%7D", options: { product: { // iframe: false, styles: { product: { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0", "margin-bottom": "50px", }, "text-align": "left", }, title: { "font-family": "Avant Garde, sans-serif", "font-weight": "bold", "font-size": "30px", // margin: "0 !important", }, button: { "font-family": "Barlow", "font-weight": "normal", "border-radius": "6px", width: "100%", }, // prices: { float: "left", margin: "0 !important" }, price: { "font-family": "Barlow", "font-weight": "600", "font-size": "20px", color: "#4ace4a", }, compareAt: { "font-family": "Droid Sans, sans-serif", "font-weight": "bold", "font-size": "15.299999999999999px", color: "#4ace4a", }, unitPrice: { "font-family": "Droid Sans, sans-serif", "font-weight": "bold", "font-size": "15.299999999999999px", color: "#4ace4a", }, description: { "font-family": "Droid Sans, sans-serif", "font-size": "13px", }, // wrapper: { // display: "none", // }, // buttonWrapper: { // margin: "0 !important", // display: "flex", // "justify-content": "center", // "align-items": "center", // width: "50%", // }, // options: { // margin: "0 200px 0 0px !important", // }, carousel: { width: "100%", }, img: { "object-fit": "contain", }, imgWrapper: { height: "100%", "@media (max-width: 501px)": { height: "auto !important", }, display: "flex", "justify-content": "space-around", "align-items": "center", "flex-direction": "column", // position: "absolute", // bottom: "0", // float: "inherit", }, carouselItem: { border: "3px solid #4ACE4A !important", }, carouselNext: { display: "none", }, carouselPrevious: { display: "none", }, }, layout: "horizontal", contents: { img: false, imgWithCarousel: true, description: true, // options: false, }, width: "100%", text: { button: "Add to cart", }, googleFonts: ["Droid Sans", "Lato", "Barlow"],

        // order: [
        //   "img",
        //   "title",
        //   "price",
        //   "options",
        //   "quantity",
        //   "description",
        //   "button",
        // ],

        // events here
        DOMEvents: {
          "click .shopify-buy__carousel a": function (evt, target) {
            console.log("Child anchor clicked:", target);
          },
          "click .shopify-buy__option-select__select": function (
            evt,
            target
          ) {
            var children = target.children;
            for (const all of children) {
              console.log(all);
            }
          },
        },
      },
      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-family": "Lato, sans-serif",
            "font-weight": "bold",
            "border-radius": "6px",
            "padding-left": "100px",
            "padding-right": "100px",
          },
          title: {
            "font-family": "Helvetica Neue, sans-serif",
            "font-weight": "bold",
            "font-size": "26px",
            color: "#4c4c4c",
          },
          price: {
            "font-family": "Helvetica Neue, sans-serif",
            "font-weight": "normal",
            "font-size": "18px",
            color: "#4c4c4c",
          },
          compareAt: {
            "font-family": "Helvetica Neue, sans-serif",
            "font-weight": "normal",
            "font-size": "15.299999999999999px",
            color: "#4c4c4c",
          },
          unitPrice: {
            "font-family": "Helvetica Neue, sans-serif",
            "font-weight": "normal",
            "font-size": "15.299999999999999px",
            color: "#4c4c4c",
          },
        },
        googleFonts: ["Lato"],
        text: {
          button: "Add to cart",
        },
      },
      // option: {},
      cart: {
        styles: {
          button: {
            "font-family": "Lato, sans-serif",
            "font-weight": "normal",
            "border-radius": "6px",
          },
        },
        text: {
          total: "Subtotal",
          button: "Checkout",
        },
        googleFonts: ["Lato"],
      },
      toggle: {
        styles: {
          toggle: {
            "font-family": "Lato, sans-serif",
            "font-weight": "normal",
            // display: "flex",
            // "justify-content": "center",
            // "align-items": "center",
            // gap: "1px",
            // float: "left",
          },
        },
        googleFonts: ["Lato"],
      },
    },
  });
});

} })();