Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
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
});
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025