JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id='product-component-1635439141053'></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: 'gorilla-fitness-equipment.myshopify.com',
storefrontAccessToken: '2fae533b5bb0c29a895e3394bc8987cf',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4956146244',
node: document.getElementById('product-component-1635439141053'),
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-family": "Roboto, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#4aa04d"
},
"background-color": "#52b256",
":focus": {
"background-color": "#4aa04d"
},
"border-radius": "0px",
"padding-left": "100px",
"padding-right": "100px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom":...
JavaScript
//when page loads
setTimeout(function() {
var iframePreLoad = $("#product-component-1635439141053").children().contents();
iframePreLoad.find(".shopify-buy__option-select__select").ready(function(){
iframePreLoad.find('select[name=Color] option:nth-child(1)').html('Black');
iframePreLoad.find('select[name=Color] option:nth-child(2)').html('Green');
});
//When selection is made
iframePreLoad.find('select').on('change', function() {
setTimeout(function() {
iframePreLoad.find('select[name=Color] option:nth-child(1)').html('Black');
iframePreLoad.find('select[name=Color] option:nth-child(2)').html('Green');
},100)
console.log('selection changed');
});
}, 3000);