The customer will be able to easily select his favorite color thanks to a preview of each color.

*Color setup:

Step 1: Log into your Joomla Dashboard

Step 2: In the top menu, hover over Content and click Media Manager 

Configure Products Details Page

Step 3: Define where you will save your color icon, or create a new folder for this purpose.
Configure Products Details Page

Step 4: Upload your color icons. Click on the upload button. Then, click on the “browse” button which will open the classic select window of your computer in order to pick your files (you can select several files). Once the files are selected, just click on the “start upload” button.

Configure Products Details Page

*NOTE : Right click on the needed icon to get its URL, copy it and paste it somewhere for later. The aim here is to have your color icons added as values of your characteristics.

*Display configuration

Step 1: Log into your Joomla Dashboard

Step 2: In the top menu, hover over Components and click HikaShop to access the HikaShop Dashboard.

Step 3: Go on the Hikashop products screen.

Step 4: Select the Characteristics menu.

Configure Products Details Page

Step 5: Click on “New” button in order to create your new characteristics. Don’t forget to type a name for your characteristics.

Configure Products Details Page

Step 6: Click on Add button for each possible value of your characteristic.

Configure Products Details Page

Step 7: Add values of characteristics for each color icon needed.

Example the URL of your icon image:

Configure Products Details Page

Thus, you have to use the HTML code below in your value name :

<img src=“http://www.yoursite.com/medias/coloricon/black.png”/>

Configure Products Details Page

Step 8: Repeat the last operation for each color icon needed. The screenshot below shows your color icon(s).

Configure Products Details Page

Step 9: Repeat the last operation for each color icon needed. The screenshot below shows your color icon(s).

Step 10: Finished to create your characteristic, and it’s time to configure its display.

Step 11: In the top menu, hover over Components and click HikaShop then go to the Configuration page.

Step 12: Go to the Product section, find the “characteristics selection method” option and select “Radio Button”. Don’t forget to save these settings after the change.

Configure Products Details Page

Step 13: Configure your characteristics from your product settings, so go back to in the top menu, hover over Components and click HikaShop then go to the Products.

Configure Products Details Page

Step 14: Click on the product for which you want a color selector.

Configure Products Details Page

Step 15: In your product settings, find the Characteristics in Specifications part, and click on the Add (+) button.

Configure Products Details Page

Step 16: In Characteristic namebox, select new Characteristic, here: “coloricon”.

Configure Products Details Page

Step 17: In Default value namebox, select one color, here for example : “Aqua”.

Configure Products Details Page

Step 18Save your Characteristics change.

Configure Products Details Page

Step 19: Now see “Variants” in a new tab, that’s will appear after save Characteristics change. Then, click on the Variants tab.

Configure Products Details Page

Step 20: Click on the “Add variants” button.

Configure Products Details Page

Step 21: In the coloricon input, you will see ALL color icon that you had added sooner, select required variant. And save!

***** Now see “1 Variant” in the “Variants” tab. Repeat this action for each required color for your product.

Configure Products Details Page

***** Here, we add an other variant and so, for this example we have “2 Variants” in the “Variants” tab (1).

You can define the Default value, just here (2), you can click on the little icon to change default value

We will check the default value, and so click here (3)

Configure Products Details Page

**** The product variant parameters page is just as product parameter page. You will just notice difference in Main Option

Configure Products Details Page

Righ now, on the frontend product page, you will see your icon color selector like this:

Configure Products Details Page

Rate for post
Document Team

Flash Sale Grab 25% Off for everything on today, don't miss it. Coupon code: FLASHSALE25 Redeem Now
Flash Sale Grab 25% Off for everything on today, don't miss it. Coupon code: FLASHSALE25 Redeem Now