I'm attempting to move the swatches of each product on the category page directly under the product images versus under the price box. So far not having much luck. I have tried altering selectorProduct within Magento_Swatches::product/listing/renderer.phtml as well as changing settings inside swatch-renderer.js to get them to load where i choose. No luck. Any help is appreciated.

1 Answer 1


The file you're after is vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, specifically line 74

<?php echo $block->getProductDetailsHtml($_product); ?>

That's the line that calls the swatches renderer and places the swatches on the page for each item. So just copy list.phtml into app/design/frontend/YOURVENDOR/YOURTHEME/Magento_Catalog/templates/product/ and then move that line of code up to just under

<div class="product details product-item-details">

and you're good to go.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.