Displaying available sizes of a product as a swatch can often provide a better user experience than if it were displayed as a drop-down menu.


Below is an example of a product using a text-swatch for the Size attribute:



Drop-down menu for comparison:




To change the display type to Text Swatch, navigate to Dashboard > Stores > Attributes > Product then find the 'size' attribute from the table.




Change the "Catalog Input Type for Store Owner" to Text Swatch



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 dropdown menu.


TIP: You will need to flush the cache to see the changes reflected on the front end of the site.