Having an issue with displaying color swatches in dropdown

[austinperry018]

Trying to render my swatches next to the product title. The Impact theme doesn't have swatches in the dropdown option out of the box so I'm trying to add them in rather than using the only method of block with swatch that's setup. I've updated the liquid a bit but having issues with the value displaying and the swatch generating on the selected variant. Right now, the issues are the selected variant doesn't update the swatch and also adds in the extra value for product title so it's duplicating the selected variant option name. If anyone can give some insight it would be greatly appreciated.

[Small_Task_Help]

Hi,

Hope this will help

At product-loop.liquid add new div to wrap the swatch and title
Code example

<div class="product-wrapper">
  <div class="swatch-container">
    </div>
  <a href="{{ product.url }}" class="product-link">
    <h3 class="product-title">{{ product.title }}</h3>
  </a>
</div>

Modify the variant selector dropdown
Swatch Rendering Logic
Add JavaScript to update the swatch and title when the variant is selected
Code example

document.getElementById('product-select').addEventListener('change', function() {
  var selectedVariant = this.value;
  // Update the swatch based on the selected variant's options
  // Update the product title if necessary
});