{"id":7807,"date":"2018-02-16T09:15:22","date_gmt":"2018-02-16T09:15:22","guid":{"rendered":"https:\/\/www.mconnectmedia.com\/blog\/?p=7807"},"modified":"2025-07-31T16:14:38","modified_gmt":"2025-07-31T10:44:38","slug":"mconnect-product-icon-logo-gallery-m2-associate-unlimited-icons-every-product-store","status":"publish","type":"post","link":"https:\/\/www.mconnectmedia.com\/blog\/2018\/02\/16\/mconnect-product-icon-logo-gallery-m2-associate-unlimited-icons-every-product-store\/","title":{"rendered":"Product Icon\/Logo Gallery Magento 2 &#8211; Associate Unlimited Icons to any Product of your Store"},"content":{"rendered":"<p>It is believed that \u201cA Picture is Worth a Thousand Words\u201d. So, you as an e-store merchant will definitely give it a shot to add promotional\/brand images for the products you sell. But, the default Magento 2 only allows adding images for Swatch, Base, Small and Thumbnail on the product page. To add other images, you need to perform changes in the code.<\/p>\n<p>Do you seek help from your developer each and every time for adding promotional\/brand images on the product page? Are you looking for a solution with the help of which you can add such images for all the products of your store by yourself?<\/p>\n<p>If your answer to the above mentioned questions is \u201cYes\u201d, then M-Connect Media has recently launched a solution in the form of Magento 2 extension. The <a href=\"https:\/\/www.mconnectmedia.com\/product-icon-logo-gallery-m2.html\"><em><strong>Mconnect Product Icon\/ Logo Gallery Mageto<em> 2 extension<\/em><\/strong><\/em><\/a> allows the admin to upload unlimited icons\/images to every product of your catalog.<\/p>\n<p>For the front end result, a separate tab called \u201cProduct Icons\u201d is added which will reflect your uploaded images. Apart from uploading images, you can also style them by adding a border, defining its width and height.<\/p>\n<h2>Key Aspects of Mconnect Product Icon \/ Logo Gallery Extension<\/h2>\n<ul>\n<li>Add any number of icons to each and every product of your catalog.<\/li>\n<li>Set a limit on the number of icons to be displayed at the front end.<\/li>\n<li>Icons can be styled with the help of border, setting height and width of the image.<\/li>\n<li>You can either choose the display the icons randomly or in descending order of their ids at the front end.<\/li>\n<li>Upload icons in any format from .jpg, .jpeg, .gif and .png.<\/li>\n<li>Each icon can be enabled or disabled for display at front end.<\/li>\n<li>One icon can be associated with multiple products simultaneously.<\/li>\n<li>A new tab called \u201cProduct Icons\u201d is added to the product page at the front end which displays icons associated with the respective product as per configurations.<\/li>\n<\/ul>\n<h3>Installation<\/h3>\n<p>Installation of the Product Icon extension allows the merchant to upload various icons for display at the front end. It also set up modules in the backend of Magento 2 store during the installation to facilitate configuration and management of the extension features and functionality.<\/p>\n<p>The installation process is manual and requires file transfer so merchant has to be familiar with FTP\/SSH access methods and unzipping of the WinZip file downloaded as a source of the extension.<\/p>\n<blockquote><p><a href=\"https:\/\/support.mconnectmedia.com\/hc\/en-us\/articles\/115001693312-How-to-Install-Mconnect-Magento-2-Extension\"><strong>Detailed Information about How to Install Mconnect Magento 2 Extension <\/strong><\/a><\/p><\/blockquote>\n<h3>Configuration<\/h3>\n<p>Post installation, the configuration of Mconnect Product Icon\/Logo Gallery Extension for Magento 2 goes as follows:<\/p>\n<p><strong>Step 1: Navigate to Stores \u2192 Configuration \u2192 M-Connect \u2192 Image Icon Library.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7809\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/mconnect-icon-gallery.png\" alt=\"Icon Gallery\" width=\"387\" height=\"452\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/mconnect-icon-gallery.png 387w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/mconnect-icon-gallery-257x300.png 257w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 2:\u00a0 Enable\/Disable the extension and set icon display limit for the front end.<br \/>\n<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7810\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/enable-disable.png\" alt=\"Enable-Disable\" width=\"723\" height=\"126\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/enable-disable.png 723w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/enable-disable-300x52.png 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/p>\n<p><strong>Step 3: Icon Image Display Setting:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7811\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-image-settings.png\" alt=\"Icon Image Settings\" width=\"917\" height=\"406\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-image-settings.png 917w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-image-settings-300x133.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-image-settings-768x340.png 768w\" sizes=\"auto, (max-width: 917px) 100vw, 917px\" \/><\/p>\n<ul>\n<li>Select \u201cYes\u201d to set the style for icon\u2019s display at the front end.<\/li>\n<li>The border, width and height options will be available only when style option is enabled.<\/li>\n<li>Select \u201cYes\u201d to display border around the icons. You can provide the width and height of the icon to be displayed at front end.<\/li>\n<li>You can either choose to display the icons randomly or in descending order of their ids.<\/li>\n<\/ul>\n<p><strong>Step 4:<\/strong> <strong>Navigate to M-Connect Media \u2192 Icon Library to add new icons and manage them. Click on \u201cAdd Icon\u201d button at the top right corner of the screen to proceed.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7815\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-gallery-settings.png\" alt=\"Icon Settings\" width=\"349\" height=\"449\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-gallery-settings.png 349w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/icon-gallery-settings-233x300.png 233w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/p>\n<ul>\n<li>Give a suitable name for the image label.<\/li>\n<li>Upload image for the icon.<\/li>\n<li>Set the status as \u201cEnabled\u201d to be displayed at front end.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7816\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/save-icon-1024x352.png\" alt=\"Save Icon\" width=\"780\" height=\"268\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/save-icon-1024x352.png 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/save-icon-300x103.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/save-icon-768x264.png 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/save-icon.png 1235w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<ul>\n<li>Go the products tab and associate one or more products to the uploaded icon. Save the configuration.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7817\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/product-1024x422.png\" alt=\"Product Icon\" width=\"780\" height=\"321\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/product-1024x422.png 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/product-300x124.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/product-768x317.png 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/product.png 1201w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<p><strong>Step 5:<\/strong>\u00a0 You can also link icons to product using the Catalog module. Navigate to Catalog \u2192 Products. Open any product in \u201cEdit\u201d view. Look for newly added tab called \u201cIcon Lib\u201d.<\/p>\n<ul>\n<li>Click on \u201cAdd Icon\u201d button to associate icon\/s with this product.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7813\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/add-new-icon-1024x447.png\" alt=\"Add new icon\" width=\"780\" height=\"340\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/add-new-icon-1024x447.png 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/add-new-icon-300x131.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/add-new-icon-768x336.png 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/add-new-icon.png 1254w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<ul>\n<li>Select the icons to be linked and click on \u201cAdd Selected Icons\u201d button. You will the icons will be added in the grid. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7814\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/Add-selected-icons-1024x498.png\" alt=\"Add selected icons\" width=\"780\" height=\"379\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/Add-selected-icons-1024x498.png 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/Add-selected-icons-300x146.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/Add-selected-icons-768x373.png 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/Add-selected-icons.png 1181w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/li>\n<li>Save the product configuration.<\/li>\n<\/ul>\n<h3>Front-end:<\/h3>\n<p>At the front end, product icons are displayed as per configurations under a separate tab named \u201cProduct Icons\u201d.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7812\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/5_3.png\" alt=\"Icon gallery At frontend\" width=\"770\" height=\"303\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/5_3.png 770w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/5_3-300x118.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2018\/02\/5_3-768x302.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/p>\n<h3>In a nut shell<\/h3>\n<p>Attract shopper\u2019s attention with unlimited icons\/promotional images or brand logo associated with every product of your catalog. This will convey the clear idea about what a product is pursue the customer to click \u201cBuy Now\u201d button.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is believed that \u201cA Picture is Worth a Thousand Words\u201d. So, you as an e-store merchant will definitely give it a shot to add<\/p>\n","protected":false},"author":1,"featured_media":8555,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[2177,2172,2171,1038,2168,639,2176,2175,2169,2173],"class_list":["post-7807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","tag-ecommerce-products","tag-icons-and-product-images-in-product-page","tag-logo","tag-magento-2-extensions","tag-magento-product-icon","tag-magento-products","tag-make-product-page-attractive","tag-mconnect-product-icon-magento-2-extensions","tag-product-icon-logo-gallery-magento-2","tag-product-modules"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=7807"}],"version-history":[{"count":4,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7807\/revisions"}],"predecessor-version":[{"id":14629,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7807\/revisions\/14629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/media\/8555"}],"wp:attachment":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=7807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=7807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=7807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}