Magento 2 Color Attribute: How to make the size of uploaded swatches match the default ones?

For our site’s color attribute, we would like to use both the default color options and a few uploaded swatches. However, the uploaded swatches are showing up much smaller, with a white border around them that the default colors don’t have. I have tried using different sized images but it didn’t help.

The attribute is just for search results navigation on the sidebar, it is not part of a configurable product or anything complex. I’m hoping this can be solved without coding because I’m not the programmer.


Swatches inclusion on custom related product template file in Magento 2.3

I am using inclusion on swatches for custom related product template file using the method mentioned on : But i am not able to pass related products, parent configurable products selected swatch options (in post array) when trying to add to wishlist and that’s why its not allowing me to add to wishlist because of missing selected option values. Can you please help further?

With many thanks & regards

Magento 2 – Override Swatches renderer.phtml

I would like to override file :


In my own theme :


It does not work. Is it a path problem? Do I copy it in the right place?

I followed this instruction but I think something is wrong for file I want to override : Magento 2 – Override base view file

Thank you in advance for your support.

I’m on Magento 2.3.1

Best regards, Florian

Can Virtual Products Have Swatches?

So we have created a configurable product which was two variants for different colours. These two colours have been created a virtual products. In the frontend, if I go to the configurable product I can see my 2 swatches for colour and can select which variant I want which is great!

We want the virtual products to appear in the catalog as we want our customers to see the different colours without having to go in to the configurable product as choose a variant. If we navigate straight to the one of the two virtual products from the catalog page we get taken to the virtual product page but it doesn’t have the the swatch options.

In short, can two or more variants have swatches to each other?

Thanks in advance!

Magento version 2.3

How to add Swatches options to Recently viewed UI component

How to add swatches options for product item to a Recently viewed UI component?

I use the following code to show recently viewed block on the page

<block class="Magento\Catalog\Block\Widget\RecentlyViewed" name="recently_viewed" template="Magento_Catalog::product/widget/viewed/grid.phtml" after="-">    <arguments>        <argument name="uiComponent" xsi:type="string">widget_recently_viewed</argument>        <argument name="page_size" xsi:type="number">4</argument>        <argument name="show_attributes" xsi:type="string">name,image,price</argument>        <argument name="show_buttons" xsi:type="string">add_to_cart,add_to_compare,add_to_wishlist</argument>    </arguments> </block> 

Swatches in magento2

I want to create a swatches instead of dropdown in custom option (Product view page).

So, i refer

In catalog_product_view.xml:

<?xml version="1.0"?> <page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head>     <css src="XXX_YYY::css/swatches.css" media="all and (min-width: 1px)" /> </head> <body>     <referenceContainer name="">                <referenceBlock name="">             <block class="XXX\YYY\Block\OptionSwatches\Index" name="" template="XXX_YYY::optionswatches/option_js.phtml"/>         </referenceBlock>     </referenceContainer> </body> </page> 

In option_js.phtml :

$  swat = [{"key":"Color","value":"Red","img":"red.png"}];  <script type="text/javascript">     require(["jquery"], function($  ) {     $  (document).ready(function(){ console.log("ready");          try {             var swatches = <?php echo $  swat?>;              function find_swatch(key, value) { console.log(key);console.log("dasd");console.log(value);                 for (var i in swatches) {                     if (swatches[i].key == key && swatches[i].value == value)                         return swatches[i];                 }                 return null;             }              function has_swatch_key(key) {                 for (var i in swatches) {                     if (swatches[i].key == key)                         return true;                 }                 return false;             }              function create_swatches(label, select) { console.log(label);console.log("sadsfsdf");console.log(select);                 var sw = new Element('div', {'class': 'swatches-container'});                 if(select){ select.up().appendChild(sw);}                  select.swatchLabel = label;                 select.swatchElement = sw;                  select.setStyle({position: 'absolute', top: '-9999px'})                  $  (select.options).each(function(opt, i) {                     if (opt.getAttribute('value')) {                         var elm;                         var key = trim(opt.innerHTML);                          if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$  /, ''));                          var item = find_swatch(label, key);                         if (item)                             elm = new Element('img', {                                 src: '<?php echo $  block->getMediaUrl() ?>hk_option_swatches/'+item.img,                                 alt: opt.innerHTML,                                  title: opt.innerHTML,                                  'class': 'swatch-img'});                         else {                             console.debug(label, key, swatches);                             elm = new Element('a', {'class': 'swatch-span'});                             elm.update(opt.innerHTML);                         }                         elm.observe('click', function(event) {                             select.selectedIndex = i;                             fireEvent(select, 'change');                             var cur = sw.down('.current');                             if (cur) cur.removeClassName('current');                             elm.addClassName('current');                         });                         sw.appendChild(elm);                     }                 });             }              function recreate_swatches_recursive(select) {                 if (select.swatchElement) {                     select.up().removeChild(select.swatchElement);                     select.swatchElement = null;                 }                  if (!select.disabled){                                     create_swatches(select.swatchLabel, select);                                 }                  if (select.nextSetting){                                     recreate_swatches_recursive(select.nextSetting);                                 }             }              function fireEvent(element,event){                 if (document.createEventObject){                     var evt = document.createEventObject();                     return element.fireEvent('on'+event,evt)                 }                 else{                     var evt = document.createEvent("HTMLEvents");                     evt.initEvent(event, true, true );                     return !element.dispatchEvent(evt);                 }             }              function trim(str) {                 return str.replace(/^\s\s*/, '').replace(/\s\s*$  /, '');             }               $  ('#product-options-wrapper dt').each(function(dt) { console.log("entry");                 var label = '';                 $  (dt.down('label').childNodes).each(function(node) {                     if (node.nodeType == 3) label += node.nodeValue;                 });                 label = trim(label);                  var dd =;                 var select = dd.down('select');                  if (select && has_swatch_key(label)) {                     create_swatches(label, select);                      if (select.hasClassName('super-attribute-select')) {                         select.observe('change', function() {                             setTimeout(function() {                                 recreate_swatches_recursive(select.nextSetting);                             }, 100);                         });                     }                 }             });         }         catch(e) {             alert("Option Swatches javascript error.);         }      }); }); </script> 

But not working.

If anything i want to change it.