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

}
})();