[Skip to main content](#vessel-content) # Display Color Swatch ## - **[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")** - [![MahonyTech's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4346-mahonytech "View MahonyTech's Profile") Topic Author - [ Offline](/forum/user/4346-mahonytech) Less More - Posts: 47 - Thank you received: 0 - - 14 years 10 months ago [\#31456](#31456) by [MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile") *[Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31456 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* was created by *[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")* My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color swatch that let's the customer's know what colors that item comes in. Thus, if an item comes in Black, White and Blue they want to display a small black rectangle, a small white rectangle and a small black rectangle on all versions of the product. Is there a way to do that? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86316 - Thank you received: 14276 - - 14 years 10 months ago [\#31476](#31476) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31476 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* There is always a way. But that will require custom coding as there is no such options in HikaShop. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")** - [![MahonyTech's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4346-mahonytech "View MahonyTech's Profile") Topic Author - [ Offline](/forum/user/4346-mahonytech) Less More - Posts: 47 - Thank you received: 0 - - 14 years 10 months ago [\#31481](#31481) by [MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile") Replied by *[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31481 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* I figured as much. Can you give me some advice on how to approach this? One thing I was thinking was to name the graphics the same name as the variant itself, but in looking at it, I don't think that will work. Any thoughts on what would be a good approach for doing this? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86316 - Thank you received: 14276 - - 14 years 10 months ago [\#31484](#31484) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31484 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* You should edit the file "show" of the view "product" via the menu Display>Views and loop through the $this->element->main->characteristics array to display all the images of the values of the characteristics. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")** - [![MahonyTech's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4346-mahonytech "View MahonyTech's Profile") Topic Author - [ Offline](/forum/user/4346-mahonytech) Less More - Posts: 47 - Thank you received: 0 - - 14 years 10 months ago [\#31488](#31488) by [MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile") Replied by *[MahonyTech](/forum/user/4346-mahonytech "View MahonyTech's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31488 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* However, won't that also show the large pictures that are shown when we select "white" as a color? Or is there another place to add these pics? Have a look at [ cma.mtsidevspace.com/index.php](http://cma.mtsidevspace.com/index.php) Select Men's Apparel Select Graphic Tees Select CM Bars Now you see it is black. Now select Heather Gray and X-Large and see it change to gray. Won't that feature change if I change the code as you suggest? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86316 - Thank you received: 14276 - - 14 years 10 months ago [\#31513](#31513) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#31513 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* We're talking about having color images somewhere and displaying them with additional custom code on the product page based on the characteristics of the product. That is not linked to the display of the images of the product/variants done by HikaShop by default. So that feature should not be impacted by the code you will add. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile")** - [![ranwaldo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1351-ranwaldo "View ranwaldo's Profile") - [ Offline](/forum/user/1351-ranwaldo) Less More - Posts: 8 - Thank you received: 1 - - 14 years 6 months ago - 14 years 6 months ago [\#47239](#47239) by [ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile") Replied by *[ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#47239 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* FYI: The following CSS will add a small color swatch to the dropdown select box. Code: select#hikashop_product_characteristic_9 option { background-repeat:no-repeat; background-position:bottom left; padding-left:30px; } select#hikashop_product_characteristic_9 option[value="7"] { background-image:url(/images/colors/SwatchWhite.jpg); } select#hikashop_product_characteristic_9 option[value="8"] { background-image:url(/images/colors/SwatchKhaki.jpg); } Modify the characteristic number, option value number, and image names to match your configuration. The images are 28 x 14. A word of warning: This works fine for Firefox 11, but not IE 9, Chrome 18, or Safari 5. Last edit: 14 years 6 months ago by [ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile"). Reason: Add warning Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile")** - [![ranwaldo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1351-ranwaldo "View ranwaldo's Profile") - [ Offline](/forum/user/1351-ranwaldo) Less More - Posts: 8 - Thank you received: 1 - - 14 years 6 months ago - 14 years 6 months ago [\#47287](#47287) by [ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile") Replied by *[ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile")* on topic *[Re: Display Color Swatch](/forum/4-how-to/31456-display-color-swatch#47287 "My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color...")* Here is another approach which works with Firefox, IE, Chrome, and Safari. Rather than using a swatch image, it just sets the background of the select option. Code: select#hikashop_product_characteristic_9 option[value="7"] { background-color: #FFFFFF; color: #000000; } select#hikashop_product_characteristic_9 option[value="8"] { background-color: #D4D487; color: #FFFFFF; } Last edit: 14 years 6 months ago by [ranwaldo](/forum/user/1351-ranwaldo "View ranwaldo's Profile"). Reason: Fix spelling The following user(s) said Thank You: [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxNDU2LWRpc3BsYXktY29sb3Itc3dhdGNoP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.240 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)