Hello guys, I am trying to add a custom HTML section on my Shopify dawn but the Javascript does not work but it works fine on codepen and notepad. Any idea why? Please see code below:
<style>
.variant-selector-container {
display: flex;
justify-content: center;
font-family: arial;
}
.classic, .wheat {
position: relative;
display: inline-block;
margin-right: 20px; /* Adjust spacing between product boxes */
}
.product-wrapper {
position: relative;
overflow: hidden;
}
.product-label {
padding-left: 8px;
top: 10px;
width: 100%; /* Ensure the label spans the full width of the product wrapper */
text-align: left; /* Center the text horizontally */
background-color: gray;
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
.variant-selector {
margin-top: 5px;
}
.color-swatch {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0;
cursor: pointer;
border: 2px solid #fff;
}
.product-image {
max-width: 300px;
height: auto;
position: relative;
}
.circle {
position: absolute;
top: 10px; /* Adjust as needed */
right: 10px; /* Adjust as needed */
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div>
<div class="variant-selector-container">
<!-- Classic 1 -->
<div class="classic">
<div class="product-wrapper">
<div class="product-label">Classic</div>
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-image.webp?v=1708504937" alt="Product Image">
</div>
<div class="circle">
<img class="color-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-pattern.webp?v=1708504937" alt="Color Image">
</div>
<div class="variant-selector">
<!-- Color swatch for Product 1 -->
<div class="color-swatch" onclick="updateImage('brown', 'classic')" style="background-color: #3B2A1F;"></div>
<div class="color-swatch" onclick="updateImage('limid_ash', 'classic')" style="background-color: #C5B9B2;"></div>
<div class="color-swatch" onclick="updateImage('hurricane', 'classic')" style="background-color: #6E7D7E;"></div>
<div class="color-swatch" onclick="updateImage('vanilla', 'classic')" style="background-color: #F3E5AB;"></div>
<div class="color-swatch" onclick="updateImage('ming', 'classic')" style="background-color: #6195A0;"></div>
<div class="color-swatch" onclick="updateImage('quill_grey', 'classic')" style="background-color: #B5B7B6;"></div>
<div class="color-swatch" onclick="updateImage('jumbo', 'classic')" style="background-color: #A98B75;"></div>
<div class="color-swatch" onclick="updateImage('wild_rice', 'classic')" style="background-color: #A38A68;"></div>
<div class="color-swatch" onclick="updateImage('tuscany', 'classic')" style="background-color: #D3B9A1;"></div>
</div>
</div>
<!-- Product 2 -->
<div class="wheat"> <!-- Changed class from "classic" to "wheat" -->
<div class="product-wrapper">
<div class="product-label">Wheat</div>
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-image.webp?v=1708504971" alt="Product Image">
</div>
<div class="circle">
<img class="color-image" src="https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-pattern.jpg?v=1708504973" alt="Color Image">
</div>
<div class="variant-selector">
<!-- Color swatch for Product 2 -->
<div class="color-swatch" onclick="updateImage('friar_gray', 'wheat')" style="background-color: #626466;"></div>
<div class="color-swatch" onclick="updateImage('sandrift', 'wheat')" style="background-color: #C2B49B;"></div>
<div class="color-swatch" onclick="updateImage('silver_chalice', 'wheat')" style="background-color: #9D9D9D;"></div>
<div class="color-swatch" onclick="updateImage('sisal', 'wheat')" style="background-color: #D7CEBA;"></div>
<div class="color-swatch" onclick="updateImage('spanish', 'wheat')" style="background-color: #758675;"></div>
<div class="color-swatch" onclick="updateImage('wedgehood', 'wheat')" style="background-color: #7E8AA0;"></div>
</div>
</div>
</div>
<script>
function updateImage(color, productType) {
const image = document.querySelector(`.${productType} .product-image`);
const colorImage = document.querySelector(`.${productType} .color-image`);
switch (color) {
case 'brown':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-brown-pattern.webp?v=1708504937';
break;
case 'limid_ash':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-limid-ash-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-limid-ash-pattern.jpg?v=1708504937';
break;
case 'hurricane':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-hurricane-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-hurricane-pattern.jpg?v=1708504937';
break;
case 'vanilla':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-vanilla-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-vanilla-pattern.webp?v=1708504937';
break;
case 'ming':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-ming-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-ming-pattern.webp?v=1708504937';
break;
case 'quill_grey':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-quill_grey-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-quill_grey-pattern.jpg?v=1708504938';
break;
case 'jumbo':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-jumbo-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-jumbo-pattern.jpg?v=1708504937';
break;
case 'wild_rice':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-wild_rice-image.webp?v=1708504938';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-wild_rice-pattern.webp?v=1708504937';
break;
case 'tuscany':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-tuscany-image.webp?v=1708504937';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/classic-tuscany-pattern.webp?v=1708504937';
break;
case 'friar_gray':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-image.webp?v=1708504971';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-friar_gray-pattern.jpg?v=1708504973';
break;
case 'sandrift':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sandrift-image.webp?v=1708504972';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sandrift-pattern.webp?v=1708504972';
break;
case 'silver_chalice':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-silver_chalice-image.webp?v=1708504971';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-silver_chalice-pattern.jpg?v=1708504972';
break;
case 'sisal':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sisal-image.webp?v=1708504971';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-sisal-pattern.webp?v=1708504972';
break;
case 'spanish':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-spanish_green-image.webp?v=1708504971';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-spanish_green-pattern.webp?v=1708504972';
break;
case 'wedgehood':
image.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-wedgewood-image.webp?v=1708504971';
colorImage.src='https://cdn.shopify.com/s/files/1/0813/6966/1764/files/wheat-wedgewood-pattern.webp?v=1708504972';
break;
default:
break;
}
}
</script>
</div>
