how to change variant select option to name box

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"],
      },
    },
  });
});

}
})();

Start with the product options configuration and the DOMEvents handlers shown in the issue, focusing on how the variant select is rendered and observed. Confirm whether the requested name box is supported by the Buy Button UI and define done as displaying and handling the requested name input in place of the variant select.