eCommerce Variant Visuals Manager
by Odoo DevHouse https://apps.odoo.com/apps/modules/browse?author=Odoo%20DevHouse$ 118.81
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
eCommerce (website_sale)
• Discuss (mail) • Invoicing (account) • Website (website) |
| Lines of code | 523 |
| Technical Name |
ecom_smart_variant_visuals |
| License | OPL-1 |
| Website | https://apps.odoo.com/apps/modules/browse?author=Odoo%20DevHouse |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
eCommerce (website_sale)
• Discuss (mail) • Invoicing (account) • Website (website) |
| Lines of code | 523 |
| Technical Name |
ecom_smart_variant_visuals |
| License | OPL-1 |
| Website | https://apps.odoo.com/apps/modules/browse?author=Odoo%20DevHouse |
Ecommerce Smart Variant Visuals Control
Manage attribute visuals and per-variant images directly from the product form - no navigation away required
- "Variant Visuals" tab directly on the product form - auto-hidden for products without visual attributes
- Attribute Visual Wizard - set HTML color and/or image per attribute value (e.g. color chips, texture swatches)
- Auto-generate color swatch - creates a solid-color PNG from a hex code automatically (requires Pillow)
- Variant Image Wizard - assign a unique main image to every variant combination
- Live visual previews inside both wizards - see existing image or color before editing
- Enhanced frontend swatches - polished hover & selected states for color and image selectors on the website
- Zero extra navigation - everything is reachable without leaving the product form
The module adds a Variant Visuals tab to the Odoo product form and introduces two popup wizards for visual management:
Step 1 - Attribute Selector Thumbnails
Open any product whose attributes have Display Type set to Color or Image.
The new tab appears automatically. Click Edit Visuals next to an attribute line to open the
Attribute Visual Wizard. For each attribute value you can set an HTML hex color, upload an image,
or check Auto-generate to create a solid-color PNG from the hex code with one click.
These visuals drive the selection buttons (swatches) shown on the product page.
Step 2 - Per-Variant Main Image
Click Assign Images to Variants in Section 2 of the same tab.
The Variant Image Wizard lists every combination (e.g. Color: Blue | Size: L)
with its current image thumbnail. Upload a new image per row, or tick Delete to clear one.
When a customer selects that exact combination on the website, Odoo automatically swaps the main product
photo to the matching variant image.
Step 3 - Enhanced Website Swatches (automatic)
No configuration needed. The module ships custom SCSS that upgrades color and image swatches on the
eCommerce frontend: larger hit areas, smooth hover scaling, and a clear blue border/glow for the
selected state.
With Variant Images & Colors
Variant Visuals tab, inline wizards, and enhanced website swatches - all in one place
Fashion & Apparel
Assign a unique photo to each size/colour combination so shoppers see exactly what they'll receive
Color-Driven Products
Generate solid-color swatches automatically from hex codes - no image editing required
Pool & Spa Equipment
Show the correct spa photo (cabinet + tub colour combo) the moment a customer makes their selection
Texture & Material Selection
Upload texture thumbnails for wood finishes, fabrics, or tile patterns directly on the product
Configurable Products
Every attribute combination gets its own hero image, reducing customer uncertainty at selection
Faster Checkout
Visual confirmation at selection time reduces hesitation and returns
- Copy the
ecom_smart_variant_visualsfolder into your Odoo addons directory. - In Odoo go to Settings â Apps â Update Apps List.
- Search for "eCommerce Smart Variant Visuals - Variant Images & Colors" and click Install.
- (Optional) Install Pillow for auto-generate color swatches:
pip install Pillow
No additional configuration is needed - the module activates automatically on installation.
Go to Sales â Configuration â Attributes. For each attribute you want to show visually, set Display Type to Color or Image.
The tab appears automatically on any product that has at least one visual attribute. It is hidden otherwise.
Click Edit Visuals on an attribute row. In the wizard, set an HTML hex color (e.g.
#3D85C8), upload an image/texture, or check Auto-generate to create a PNG from the color automatically. Click Apply.
Click Assign Images to Variants. Upload a photo for each combination row. Tick Delete to clear an existing image. Click Apply Images.
Visit the product page. Color and image swatches now display the visuals you configured. Selecting a combination swaps the main product photo to the matching variant image in real time.
Q: Does the module work without Pillow installed?
Yes. All features work normally. The only limitation is that the Auto-generate checkbox in the Attribute Visual Wizard will have no effect - a warning is logged on startup.
Q: The "Variant Visuals" tab is not visible on my product. Why?
The tab is intentionally hidden when no attribute has its Display Type set to Color or Image. Check your attribute configuration first.
Do You Need Assistance or Have a Feature Request?
Odoo Proprietary License v1.0 This software and associated files (the "Software") may only be used (executed, modified, executed after modifications) if you have purchased a valid license from the authors, typically via Odoo Apps, or if you have received a written agreement from the authors of the Software (see the COPYRIGHT file). You may develop Odoo modules that use the Software as a library (typically by depending on it, importing it and using its resources), but without copying any source code or material from the Software. You may distribute those modules under the license of your choice, provided that this license is compatible with the terms of the Odoo Proprietary License (For example: LGPL, MIT, or proprietary licenses similar to this one). It is forbidden to publish, distribute, sublicense, or sell copies of the Software or modified copies of the Software. The above copyright notice and this permission notice must be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Please log in to comment on this module