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
Step 3: Define where you will save your color icon, or create a new folder for this purpose.
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.
*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.
Step 5: Click on “New” button in order to create your new characteristics. Don’t forget to type a name for your characteristics.
Step 6: Click on Add button for each possible value of your characteristic.
Step 7: Add values of characteristics for each color icon needed.
Example the URL of your icon image:
Thus, you have to use the HTML code below in your value name :
<img src=“http://www.yoursite.com/medias/coloricon/black.png”/>
Step 8: Repeat the last operation for each color icon needed. The screenshot below shows your color icon(s).
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.
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.
Step 14: Click on the product for which you want a color selector.
Step 15: In your product settings, find the Characteristics in Specifications part, and click on the Add (+) button.
Step 16: In Characteristic namebox, select new Characteristic, here: “coloricon”.
Step 17: In Default value namebox, select one color, here for example : “Aqua”.
Step 18: Save your Characteristics change.
Step 19: Now see “Variants” in a new tab, that’s will appear after save Characteristics change. Then, click on the Variants tab.
Step 20: Click on the “Add variants” button.
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.
***** 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)
**** The product variant parameters page is just as product parameter page. You will just notice difference in Main Option
Righ now, on the frontend product page, you will see your icon color selector like this:
We're document team, we write document for all products from our company. You can reach our Document Portal. If you have any questions or problem during using our products, feel free drop comment, we will come to help you shortly.
- JS Jobs Data Dictionary: How to Add New Entity? - January 3, 2017
- JS Jobs Categories: How to Add New Categories? - December 30, 2016
- JS Jobs Message System: Front End Messages - December 30, 2016
Recent Comments