{"id":1158,"date":"2020-08-04T09:47:38","date_gmt":"2020-08-04T09:47:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/08\/04\/magento-2-change-swatch-image-size\/"},"modified":"2025-05-22T12:05:36","modified_gmt":"2025-05-22T06:35:36","slug":"magento-2-change-swatch-image-size","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/magento-2-change-swatch-image-size\/","title":{"rendered":"How to Change Swatch Image Size in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A swatch in Magento 2 is a feature to offer product variations to the customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/magento-2-create-configurable-product\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 configurable product<\/a>&nbsp;displayed on the frontend with swatches allows the customers to choose easily from the options available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default Magento 2 swatch types are text, color, and image swatches that make the product description more insightful and boosts the conversion process. Read more about&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/configure-color-swatches-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Swatches in Magento 2<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now if you want to&nbsp;<em><strong>change swatch image size in Magento 2<\/strong><\/em>&nbsp;store as per the theme, you can do so with the below code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust the image swatch size in such a way that gives the visitors a better visualization of the product variation and encourages sales!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s how the default swatch image looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/08\/default-swatch-image-size-in-Magento-2.jpg\" alt=\"default-swatch-image-size-in-Magento-2\" class=\"wp-image-9981\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Change Swatch Image Size in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you have Magento 2 installed in your local with the Luma theme and change the size of swatch:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open&nbsp;<em><strong><em><strong>vendor\\magento\\module-swatches\\etc\\view.xml<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Replace the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;image id=\"swatch_image\" type=\"swatch_image\">\n    &lt;width>30&lt;\/width>\n    &lt;height>20&lt;\/height>\n&lt;\/image><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">with<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;image id=\"swatch_image\" type=\"swatch_image\">\n    &lt;width>210&lt;\/width>\n    &lt;height>210&lt;\/height>\n&lt;\/image><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you have a theme installed, open&nbsp;<em><strong><em><strong>app\/design\/frontend\/[theme]\/etc\/view.xml<\/strong><\/em><\/strong><\/em>&nbsp;file and search for \u201cswatch_image\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If it is available then change code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;image id=\"swatch_image\" type=\"swatch_image\">\n    &lt;width>210&lt;\/width>\n    &lt;height>210&lt;\/height>\n&lt;\/image><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">if not,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">place the below line into media tag<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;images module=\"Magento_Catalog\">\n    &lt;image id=\"swatch_image\" type=\"swatch_image\">\n        &lt;width>210&lt;\/width>\n        &lt;height>210&lt;\/height>\n    &lt;\/image>\n&lt;\/images><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it. You can also&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/resize-specific-product-image-in-magento-2-using-command\/\">resize specific product image in Magento 2 using command<\/a>&nbsp;that will help you optimize website performance by ensuring that product images are of the right size, reducing load times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once done, you can check the updated image swatches as shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/08\/changed-image-swatch-size-in-Magento-2.jpg\" alt=\"changed-image-swatch-size-in-Magento-2\" class=\"wp-image-9980\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Also, please share the solution with the Magento community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A swatch in Magento 2 is a feature to offer product variations to the customers. A&nbsp;Magento 2 configurable product&nbsp;displayed on the frontend with swatches allows&#8230;<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1158","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":14759,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1158\/revisions\/14759"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}