I am trying to create basic text swatches for an attribute (instead of dropdowns). I created an attribute (for example, "size"), set the "Catalog Input Type for Store Owner" to "Text Swatch" and entered all the swatch values. I then created a configurable product with this attribute but the frontend is still showing the options in a dropdown and not in text swatches.

I have tried changing the attribute to "visual swatch" and it still shows as a dropdown.

I have reindexed and flushed the cache but it the attribute choices still show as a dropdown.

Interestingly, the text swatches are showing up in the category page but the product page is still showing the dropdown (see images below).

I am using Magento 2.2.3 and I am not running any extensions and the code has not been changed. It is almost a fresh install.

How can I get the text swatches to show up instead of a dropdown?

Please help

Product Page - options **incorrectly** showing as dropdown

Category Page - options **correctly** showing as text swatches

4 Answers 4


To change the display type to Text Swatch, navigate to

Dashboard > Stores > Attributes > Product

then find the 'size' attribute from the table. enter image description here enter image description here

Change the "Catalog Input Type for Store Owner" to Text Swatch enter image description here

You should now see a new column appear in the Manage Swatch section.

Add the values that you would like to show inside the swatches, then click Save.

All items that use the size attribute will now display a text swatch instead of a drop-down menu.

  • thank you for responding. Yes, I have done all of those steps to a new attribute I had made and the product page is still showing the options of this attribute in a dropdown instead of in text swatches
    – YWSW
    Commented Jun 15, 2018 at 5:02
  • rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ Commented Jun 15, 2018 at 5:04
  • rm -rf pub/static/frontend/ pub/static/adminhtml/ pub/static/_requirejs/ Commented Jun 15, 2018 at 5:07
  • and let me if after running this command, it still doesn't work Commented Jun 15, 2018 at 5:08
  • I tried both commands and flushed the cache again and it still shows as a dropdown and not text swatches... this is very peculiar... what else can the issues be?
    – YWSW
    Commented Jun 15, 2018 at 5:20

Success! I disabled a certain "Pre Order" extension I had been using and now the swatches show up. The extension must have been interfering with the magento swatch rendered.

I am posting this just in case someone else runs into this issue so that they do not have to waste as much time as I did.


I solved this issue with changing "Storefront Properties" in Attribute Settings. Set "Visible on Catalog Pages on Storefront" to "Yes" and "Used in Product Listing" to "Yes". After that reindex product data again.


I had the same problem. Text swatch showed in the filter column of a category page, but didn't show in product page.

For me the answer was the right cache flush. Note: On the chache management page, there are several flush options. The one that worked was "Flush Cache Storage". (The grey option) It gives a warning, but worked fine for me.

Now, i can toggle between input type (Dropdown / Visual swatch / text swatch) whith direct result, without a cache flush.

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.