{"id":8860,"date":"2020-11-30T10:31:57","date_gmt":"2020-11-30T10:31:57","guid":{"rendered":"https:\/\/blog.mageworx.com\/?p=8860"},"modified":"2021-10-25T10:04:59","modified_gmt":"2021-10-25T10:04:59","slug":"more-ways-images-can-boost-sales-in-your-magento2-store","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/how-images-boost-sales-in-magento-2","title":{"rendered":"How Images Can Boost Sales in Your Magento 2 Store"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p>Images in eCommerce are not almighty, but still indispensable.<\/p>\n<p>They grab the customers\u2019 attention and shape their decision-making behaviors.<\/p>\n<p>Taking that <a href=\"https:\/\/www.websitebuilderexpert.com\/ecommerce-product-page-design-part-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">92% of consumers<\/a> say visuals are the top influential factor affecting a purchase decision, the shoppers can be quite sensitive to how a product looks in different variations, from various angles.<\/p>\n<p>Let\u2019s learn more about Magento image optimization and how to make it an instant crush using image, color, and text swatches in Magento 2.<\/p>\n<h2>What are Swatches and their Basic Types?<\/h2>\n<p><strong>Swatches<\/strong> are the feature that allows for presenting product options by displaying the corresponding visual representation when selected.<\/p>\n<p>Three types of swatches are as follows:<\/p>\n<p><!--more--><\/p>\n<h3>Color Swatch<\/h3>\n<p>It enables merchants to display such product options as color\/texture\/patterns. Unavailable options get crossed when they are out-of-stock.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8862\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Color-swatches-1200x678.jpg\" alt=\"Advanced Product Options -Color Swatches\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Color-swatches-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Color-swatches-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Color-swatches-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Color-swatches.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3>Image Swatch (aka Visual Swatch)<\/h3>\n<p>It brings product presentation to a whole new level and allows showing product variations as close as possible to their real-life look.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8863\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Image-swaches-1200x678.jpg\" alt=\"Advanced Product Options - Visual Swatch\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Image-swaches-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Image-swaches-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Image-swaches-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Image-swaches.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3>Text Swatch<\/h3>\n<p>When there are no particular Magento product images to be displayed, you can use \u2018buttons\u2019 with text values for product attributes. This swatch works just the same way as the color one.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8865\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/screenshots_branding-1200x678.jpg\" alt=\"APO for magento 2 - text swatches\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/screenshots_branding-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/screenshots_branding-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/screenshots_branding-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/screenshots_branding.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>How Can You Expand Default Magento 2 Functionality?<\/h2>\n<p>Magento 2, by default, enables the users to<a href=\"https:\/\/docs.magento.com\/m2\/ce\/user_guide\/catalog\/swatches.html\" target=\"_blank\" rel=\"noopener noreferrer\"> set up swatches<\/a> solely for the configurable products:<\/p>\n<ul>\n<li>on the product page<\/li>\n<li>in product listings, and<\/li>\n<li>layered navigation.<\/li>\n<\/ul>\n<p>The Magento configurable product image switcher includes visual and text swatches, as well as drop-down input control.<\/p>\n<p><em>Please, consult <a href=\"https:\/\/www.mageworx.com\/wiki\/magento2-color-swatches-config\/\" target=\"_blank\" rel=\"noopener noreferrer\">this post<\/a> to learn how to use the default Magento 2 functionality to configure the swatches.<\/em><\/p>\n<p><a href=\"https:\/\/www.mageworx.com\/magento-2-advanced-product-options-suite.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-8866\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/05-Advanced-Product-Options2.png\" alt=\"Advanced Product Options for Magento 2\" width=\"231\" height=\"231\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/05-Advanced-Product-Options2.png 650w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/05-Advanced-Product-Options2-600x600.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/05-Advanced-Product-Options2-65x65.png 65w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/><\/a>The<a href=\"https:\/\/www.mageworx.com\/magento-2-advanced-product-options-suite.html\"> Advanced Product Options extension<\/a> drastically expands the default possibilities. It lets adding image, text, and color-based swatches for any product type*, thus presenting any product variant to the best advantage.<\/p>\n<p><strong>Let\u2019s learn how to configure the extension in order to:<\/strong><\/p>\n<ul>\n<li>Add image swatch<\/li>\n<li>Add text swatch<\/li>\n<li>Replace the standard product images with the one of an option<\/li>\n<li>Use multiple images for a single option<\/li>\n<li>Display option images in the preview tooltip<\/li>\n<li>Create an image overlay effect<\/li>\n<\/ul>\n<h2>Example 1. Text &amp; Image Swatches. Preview Tooltip.<\/h2>\n<p>In the following example, we\u2019ll show you how to implement such actions as<\/p>\n<ul>\n<li>adding text and image swatches<\/li>\n<li>displaying option images in the preview tooltip<\/li>\n<\/ul>\n<p>Let\u2019s learn how to configure a simple product.<\/p>\n<p>In fact:<\/p>\n<p>With the extension, there\u2019s no need to create configurable products to offer product variations any longer.<\/p>\n<p>The following result you\u2019ll achieve on the frontend:<\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-8860-1\" width=\"696\" height=\"391\" loop preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/vid-swatches-example.mp4?_=1\" \/><a href=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/vid-swatches-example.mp4\">https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/vid-swatches-example.mp4<\/a><\/video><\/div>\n<p>To reach the functionality and set up the swatches for the product options in your Magento 2 store,<\/p>\n<p>go to <em><strong>Products \u2013 Inventory \u2013 Catalog.<\/strong><\/em><\/p>\n<p>Then,<\/p>\n<p>select a product you wish to add swatches to.<\/p>\n<p>The basic configurations are stored under the <strong>Customizable Options<\/strong> tab.<\/p>\n<p>That\u2019s how the configurations for the above example look like from the backend:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8868\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend-1200x678.jpg\" alt=\"Advanced Product Options - text swatches (backend)\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>As you can see:<\/p>\n<p>The drop-down menu has been chosen as an option type.<\/p>\n<p>However, to make the variants look like regular text swatches, you\u2019ll need to select the <strong>Is Swatch<\/strong> check box.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8870\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/is-swatch-1200x135.png\" alt=\"APO -swatches\" width=\"1200\" height=\"135\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/is-swatch-1200x135.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/is-swatch-600x68.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/is-swatch-768x86.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/is-swatch.png 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>Additionally:<\/p>\n<p>You may want to use images as a tooltip for your options.<\/p>\n<p>To do that, upload the corresponding pictures for each option separately (that\u2019s where you can upload multiple images to show your offerings in full), and choose the <strong>tooltip<\/strong> value after the image(s) that has been uploaded.<\/p>\n<p>To do that:<\/p>\n<p>Click the option image, and select one out of the available options\u2015which is <strong>Tooltip<\/strong> in our case.<\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-8860-2\" width=\"696\" height=\"391\" loop preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend.mp4?_=2\" \/><a href=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend.mp4\">https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/text-swatches-backend.mp4<\/a><\/video><\/div>\n<p>In order to create image swatches, you\u2019ll need to select <strong>Base<\/strong> when configuring image roles.<\/p>\n<p>As for our example:<\/p>\n<p>Images for <strong>SSD type<\/strong> are displayed both as <strong>Base<\/strong> and <strong>Tooltip<\/strong>\u00a0when moused over.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8871\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/base-_-tolltip-backend-1200x678.jpg\" alt=\"Advanced Product Options fro Magento 2 - Base + Tooltip\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/base-_-tolltip-backend-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/base-_-tolltip-backend-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/base-_-tolltip-backend-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/base-_-tolltip-backend.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><br \/>\nAs you can see:<\/p>\n<p>The configuration logic is plain and simple.<\/p>\n<h2>Example 2. Standard Product Image Replacement with Option Image<\/h2>\n<p>Let\u2019s consider one more example.<\/p>\n<p>Here:<\/p>\n<p>The standard product image gets replaced with the one of a product variant:<\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-8860-3\" width=\"696\" height=\"391\" loop autoplay preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image-replacement.mp4?_=3\" \/><a href=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image-replacement.mp4\">https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image-replacement.mp4<\/a><\/video><\/div>\n<p>The basic configurations are within the <strong>Customizable Options<\/strong> tab.<\/p>\n<p>Here:<\/p>\n<p>Make sure <strong>Image Mode<\/strong> is set to <strong>Replace<\/strong>\u2019 .<strong>Replace Main Gallery Image <\/strong>should be selected within the image roles.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8877\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/replace-image-backend-1200x678.jpg\" alt=\"Advanced Product Options - Image Replacement\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/replace-image-backend-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/replace-image-backend-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/replace-image-backend-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/replace-image-backend.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>Example 3: Image Overlay<\/h2>\n<p>You can also enjoy the possibility to create an overlay effect for your product images.<\/p>\n<p>Thus, the option image will cover the main product image.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12902\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891.png\" alt=\"Product Options Magento 2 Images | Mageworx Blog\" width=\"1095\" height=\"528\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891.png 1095w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-600x289.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-768x370.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-250x121.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-696x336.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-1068x515.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1891-871x420.png 871w\" sizes=\"auto, (max-width: 1095px) 100vw, 1095px\" \/><\/h2>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12903\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892.png\" alt=\"\" width=\"1091\" height=\"520\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892.png 1091w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-600x286.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-768x366.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-250x119.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-696x332.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-1068x509.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/image1892-881x420.png 881w\" sizes=\"auto, (max-width: 1091px) 100vw, 1091px\" \/><\/h2>\n<p>The basic configurations are within the <strong>Customizable Options<\/strong> tab.<\/p>\n<p>Here:<\/p>\n<p>Proceed to the option Magento image gallery you&#8217;ve just uploaded, and then click the one you wish to use as an overlay.<\/p>\n<p>In the\u00a0<strong>Image Detail\u00a0<\/strong>window, select the required option.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12920\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-1200x566.jpg\" alt=\"Product Options Magento 2 Images | Mageworx Blog\" width=\"1200\" height=\"566\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-1200x566.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-600x283.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-768x362.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-250x118.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-696x328.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-1068x504.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22-890x420.jpg 890w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot_22.jpg 1818w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>Option Gallery Mode and its Benefits<\/h2>\n<p><span style=\"font-weight: 400;\">The <\/span><em>Option Gallery Mode<\/em> <span style=\"font-weight: 400;\">regulates the way the images are shown in product options. It gives you the benefit of displaying products in a way that suits your target audience the most.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When disabled, no images will be naturally shown. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a closer look at the available display options:<\/span><\/p>\n<h3>Beside Option<\/h3>\n<p><span style=\"font-weight: 400;\">When this <\/span><b>Gallery Display Mode <\/b><span style=\"font-weight: 400;\">is selected, images get displayed as thumbnails near\/below product options:<\/span><\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-8860-4\" width=\"696\" height=\"392\" loop autoplay preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Beside-Optiomn.mp4?_=4\" \/><a href=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Beside-Optiomn.mp4\">https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Beside-Optiomn.mp4<\/a><\/video><\/div>\n<h3><\/h3>\n<h3>Once Selected<\/h3>\n<p><span style=\"font-weight: 400;\">This option hides all the product variants images, and allows displaying them right after they get selected:<\/span><\/p>\n<div style=\"width: 696px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-8860-5\" width=\"696\" height=\"392\" autoplay preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Once-Selected.mp4?_=5\" \/><a href=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Once-Selected.mp4\">https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/Once-Selected.mp4<\/a><\/video><\/div>\n<p><span style=\"font-weight: 400;\">The configurations are hidden within the <strong>Customizable Options ta<\/strong><strong>b<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s how they look like in the backend:<\/span><\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-8891\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/option-1200x678.jpg\" alt=\"Advanced Product Options addon for Magento 2- option gallery\" width=\"1200\" height=\"678\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/option-1200x678.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/option-600x339.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/option-768x434.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/07\/option.jpg 1288w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/h2>\n<h2>Wrap Up<\/h2>\n<p>It\u2019s often insufficient to display the pure colors for product variations as their look can be more complex, composite and unique for a specific option.<\/p>\n<p>The way you display your offerings online is positively associated with the revenue level and can cost you clients.<\/p>\n<p>*Note that Magento doesn\u2019t allow product <a href=\"https:\/\/docs.magento.com\/m2\/ce\/user_guide\/catalog\/product-create-bundle.html\" target=\"_blank\" rel=\"noopener noreferrer\">custom options for bundled products<\/a>.<\/p>\n<p style=\"text-align: center;\"><em><strong><a href=\"https:\/\/calendly.com\/kate-volchock\/demo\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15059 size-full\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1.png\" alt=\"Book a Live Demo with Mageworx\" width=\"690\" height=\"260\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1.png 690w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1-600x226.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1-250x94.png 250w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/a>Need more help with product swatches? Feel free to leave a comment below, we will be happy to assist!<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Images in eCommerce are not almighty, but still indispensable. They grab the customers\u2019 attention and shape their decision-making behaviors. Taking that 92% of consumers say visuals are the top influential factor affecting a purchase decision, the shoppers can be quite sensitive to how a product looks in different variations, from various angles. Let\u2019s learn more [&hellip;]<\/p>\n","protected":false},"author":27,"featured_media":12772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,425,291],"tags":[379],"class_list":{"0":"post-8860","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento-2","8":"category-magento-how-tos","9":"category-e-marketing","10":"tag-apo"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=8860"}],"version-history":[{"count":44,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8860\/revisions"}],"predecessor-version":[{"id":15636,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8860\/revisions\/15636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/12772"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=8860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=8860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=8860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}