{"id":152162,"date":"2018-11-24T05:41:53","date_gmt":"2018-11-24T05:41:53","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=152162"},"modified":"2024-02-29T11:36:50","modified_gmt":"2024-02-29T11:36:50","slug":"product-wise-swatch-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/","title":{"rendered":"Product-wise swatches in Magento 2"},"content":{"rendered":"\n<p>In this blog, I&#8217;ll show you how to display swatches product wise that means different images for same attribute option for different products. In Magento 2, the swatches are common for all products. That means the swatch of the attribute option will be common across all the products which are using it.<\/p>\n\n\n\n<p>Let&#8217;s say we create a configurable product&nbsp;<em>Shirt<\/em>&nbsp;which has two variations <em>Blue&nbsp;<\/em>and <em>B<\/em><em>lack&nbsp;<\/em>and added the swatches according to the <em>shirt<\/em>,<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"882\" height=\"291\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\" alt=\"swatch management\" class=\"wp-image-152163\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png 882w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499-250x82.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499-300x99.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499-768x253.png 768w\" sizes=\"(max-width: 882px) 100vw, 882px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now this will look great for the&nbsp;<em>shirt<\/em>&nbsp;on product page,<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"569\" height=\"507\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_500.png\" alt=\"product page swatches\" class=\"wp-image-152165\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_500.png 569w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_500-250x223.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_500-300x267.png 300w\" sizes=\"(max-width: 569px) 100vw, 569px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>But what if we create another product, let&#8217;s say&nbsp;<em>Jeans<\/em>. In that case these won&#8217;t be a good image swatch because these are shirts.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"549\" height=\"501\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_501.png\" alt=\"product page swatches\" class=\"wp-image-152166\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_501.png 549w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_501-250x228.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_501-300x274.png 300w\" sizes=\"(max-width: 549px) 100vw, 549px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Magento 2 does not have any easy way deal with this. However we can <a href=\"https:\/\/webkul.com\/blog\/overriding-rewriting-classes-magento2\/\">override<\/a> some classes and show our own images.<\/p>\n\n\n\n<p>First create <strong>di.xml\u00a0<\/strong>under\u00a0app\/code\/Webkul\/CustomSwatch\/etc\/ folder,<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;config xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:ObjectManager\/etc\/config.xsd&quot;&gt;\n    &lt;preference for=&quot;Magento\\Swatches\\Block\\Product\\Renderer\\Configurable&quot; type=&quot;Webkul\\CustomSwatch\\Block\\Product\\Render\\Configurable&quot; \/&gt;\n&lt;\/config&gt;<\/pre>\n\n\n\n<p>Then create\u00a0<strong>Configurable.php\u00a0<\/strong>under\u00a0app\/code\/Webkul\/CustomSwatch\/Block\/Product\/Render\/ folder,<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nnamespace Webkul\\CustomSwatch\\Block\\Product\\Render;\n\nclass Configurable extends \\Magento\\Swatches\\Block\\Product\\Renderer\\Configurable\n{\n   public function getJsonSwatchConfig()\n    {\n        $attributesData = $this-&gt;getSwatchAttributesData();\n        $allOptionIds = $this-&gt;getConfigurableOptionsIds($attributesData);\n        $swatchesData = $this-&gt;swatchHelper-&gt;getSwatchesByOptionsId($allOptionIds);\n\n        $config = &#091;];\n        foreach ($attributesData as $attributeId =&gt; $attributeDataArray) {\n            if (isset($attributeDataArray&#091;&#039;options&#039;])) {\n                $config&#091;$attributeId] = $this-&gt;addSwatchDataForAttribute(\n                    $attributeDataArray&#091;&#039;options&#039;],\n                    $swatchesData,\n                    $attributeDataArray,\n                    $attributeId\n                );\n            }\n        }\n\n        return $this-&gt;jsonEncoder-&gt;encode($config);\n    }\n    protected function addSwatchDataForAttribute(\n        array $options,\n        array $swatchesCollectionArray,\n        array $attributeDataArray,\n        $attributeId=null\n    ) {\n        $_objectManager = \\Magento\\Framework\\App\\ObjectManager::getInstance();\n        $storeManager = $_objectManager-&gt;get(&#039;Magento\\Store\\Model\\StoreManagerInterface&#039;); \n        $currentStore = $storeManager-&gt;getStore();\n        $mediaUrl = $currentStore-&gt;getBaseUrl(\\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA).&#039;\/customswatch\/&#039;;\n\n        $result = &#091;];\n        foreach ($options as $optionId =&gt; $label) {\n            if (isset($swatchesCollectionArray&#091;$optionId])) {\n                $result&#091;$optionId] = $this-&gt;extractNecessarySwatchData($swatchesCollectionArray&#091;$optionId]);\n                $result&#091;$optionId] = $this-&gt;addAdditionalMediaData($result&#091;$optionId], $optionId, $attributeDataArray);\n                $result&#091;$optionId]&#091;&#039;label&#039;] = $label;\n                if ($attributeId) {\n                    if($this-&gt;getProduct()-&gt;getId()==19 &amp;&amp; $attributeId == 93) {\n                        if($optionId == 7) {\n                            $result&#091;$optionId]&#091;&#039;type&#039;] = 2;\n                            $result&#091;$optionId]&#091;&#039;value&#039;] = $mediaUrl.&#039;30x20\/blue-jeans.jpg&#039;;\n                            $result&#091;$optionId]&#091;&#039;thumb&#039;] = $mediaUrl.&#039;110x90\/blue-jeans.jpg&#039;;\n                        } elseif ($optionId == 8) {\n                            $result&#091;$optionId]&#091;&#039;type&#039;] = 2;\n                            $result&#091;$optionId]&#091;&#039;value&#039;] = $mediaUrl.&#039;30x20\/black-jeans.jpg&#039;;\n                            $result&#091;$optionId]&#091;&#039;thumb&#039;] = $mediaUrl.&#039;110x90\/black-jeans.jpg&#039;;\n                        }\n                    }\n                }\n            }\n        }\n\n        return $result;\n    }\n}<\/pre>\n\n\n\n<p>In this we have changed the swatches only for product&nbsp;with id 19 (which is&nbsp;<em>jeans<\/em>) and attribute id 93 (which is <em>color<\/em>) but you get the idea. Here we have replaced swatch thumbnails and swatch images&nbsp;with our own.<\/p>\n\n\n\n<p>Now we will see our own images as swatch for jeans,<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"550\" height=\"495\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_502.png\" alt=\"\" class=\"wp-image-152169\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_502.png 550w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_502-250x225.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_502-300x270.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Note:- Do not use Object Manager instead use <a href=\"https:\/\/webkul.com\/blog\/dependency-injection\/\">Dependency Injection<\/a><\/p>\n\n\n\n<p>You can find the code on <a href=\"https:\/\/github.com\/sanjaychouhan-webkul\/customswatch\">GitHub<\/a>.<\/p>\n\n\n\n<p>Thank you for reading. Feel free to comment if you face any issue.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, I&#8217;ll show you how to display swatches product wise that means different images for same attribute option for different products. In Magento 2, the swatches are common for all products. That means the swatch of the attribute option will be common across all the products which are using it. Let&#8217;s say we <a href=\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[2677,2460,7834,7833,7835],"class_list":["post-152162","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-configurable-product","tag-magento-2","tag-product-wise-swatch","tag-swatch","tag-swatches-per-product"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Product-wise swatches in Magento 2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product-wise swatches in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, I&#8217;ll show you how to display swatches product wise that means different images for same attribute option for different products. In Magento 2, the swatches are common for all products. That means the swatch of the attribute option will be common across all the products which are using it. Let&#8217;s say we [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-24T05:41:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T11:36:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"Product-wise swatches in Magento 2\",\"datePublished\":\"2018-11-24T05:41:53+00:00\",\"dateModified\":\"2024-02-29T11:36:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\"},\"wordCount\":249,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\",\"keywords\":[\"Configurable Product\",\"Magento 2\",\"product-wise swatch\",\"swatch\",\"swatches per product\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\",\"name\":\"Product-wise swatches in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\",\"datePublished\":\"2018-11-24T05:41:53+00:00\",\"dateModified\":\"2024-02-29T11:36:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png\",\"width\":882,\"height\":291},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product-wise swatches in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product-wise swatches in Magento 2 - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Product-wise swatches in Magento 2 - Webkul Blog","og_description":"In this blog, I&#8217;ll show you how to display swatches product wise that means different images for same attribute option for different products. In Magento 2, the swatches are common for all products. That means the swatch of the attribute option will be common across all the products which are using it. Let&#8217;s say we [...]","og_url":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-11-24T05:41:53+00:00","article_modified_time":"2024-02-29T11:36:50+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"Product-wise swatches in Magento 2","datePublished":"2018-11-24T05:41:53+00:00","dateModified":"2024-02-29T11:36:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/"},"wordCount":249,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png","keywords":["Configurable Product","Magento 2","product-wise swatch","swatch","swatches per product"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/","name":"Product-wise swatches in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png","datePublished":"2018-11-24T05:41:53+00:00","dateModified":"2024-02-29T11:36:50+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/11\/Screenshot_499.png","width":882,"height":291},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/product-wise-swatch-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Product-wise swatches in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/152162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=152162"}],"version-history":[{"count":5,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/152162\/revisions"}],"predecessor-version":[{"id":425376,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/152162\/revisions\/425376"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=152162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=152162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=152162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}