Color option images swap on the homepage and category page on OpenCart Website

The Purpletree Opencart option image and color swatches extension displays the images for each desired option on the product page. After selecting Option Image Product in the front, the option image will replace the main image. Product Option Image lets you use images to represent the values of product options values and lets you change the main product image.


The Purpletree Opencart color swatch extension lets customers change the main product image on the customer part of the product page to a relevant option image.
There may be multiple options for some of your products. If you sell clothes online, for instance, a sweater might be available in red, blue, and green.


When a customer selects a particular colour, you might want to create an option that shows an image of your sweater in each color.


Now new work has been done to show color options image swap on Homepage and Category page also.

Firstly you need to go to Catalog -> Options after that click on add Option


After that, we will get this page shown below


Select radio option after that you will see the new color swatches option. If you want to add color swatches option then you must select the type radio and you should select the Use colour swatches option “yes” for visible color on the product page as well as all product-related modules(default theme).

After that, you can select colour-by-colour swatches as you wish. If the use color swatches option is set “no” then the option is visible like before. You should have clicked on color swatches box. After that, you will see color picker. You should have to drag the mouse pointer on color picker to select color

More information about Purpletree OpenCart Option Images and Color Swatches.


If you want to edit option then you will have to click on the edit button after that you will see the following page. If you want to add “Option image” then you will have to follow the below steps

You need to go to “catalogue>products>edit”


Now click on the options Tab to add an Option image. You can add option image which is “radio” type only. Click on the image box and select the image as you wish.


Option Image and colour swatches are visible on the product page and home page or all modules(in the default theme), Option color will show on All products in opencart module(default theme) like-feature module etc. there option color swatches will show when you make option from “catalog>option”.

This will work for only the “radio” type option. Which product you have selected for color swatches option that product only shows option color.


You can select color, according to color images will show. This will work for only the “radio” type option.



Now you can select color and then click on add to cart then color will appear on the mini cart page.


Now you can click on the “view cart” link. You can see the checkout cart page. Here you can see color option as well.


Now you can click on the checkout button and after that fill in all information. Now you can see the options color on the following page
After that click “confirm order” now your order has been completed. you will have to log in to your account and you should view “option color” on the order history page.


After completing your order you can see order details on the admin side in order details you can see the colour option on order details.

Purpletree Editor

Purpletree Editor

Author