|
|
Description
Thanks to this tutorial, you will be able to configure your products details page with a color selector.
The customer will be able to easily select his favorite color thanks to a preview of each color.
Then, we will see how to link each selectable color with the corresponding picture of your products. The aim is to see the products in different colors just by selecting a color.
Color setup
First of all, you need one small picture per color. Open the Joomla media manager (Content > Media), create a folder for them (here "colour-icons" inside the "images" folder) and use the Upload button of the toolbar to send your color icons. You can upload several files at once.
NOTE: You can find here, a link to an archive containing several color icons in png that you can use for this tutorial.
Here is a little tip, in order to make the next step easier: select an icon in the media manager and copy its URL (or its path) somewhere for later.
Display configuration
It's time to create your new characteristic. In the HikaShop menu, open the Products menu and select Characteristics.
Click on the "New" button of the toolbar in order to create your new characteristic. The existing characteristics are listed like this:
Type a name for your characteristic ("Colour swatch" here) and set its Characteristics selection method to "Radio Button", so that the customer sees all the colors at once instead of a dropdown. Then click on the Add button for each possible value of your characteristic.
The aim here is to have your color icons added as values of your characteristic, so the value is a small piece of HTML code which displays the icon. Use the URL of the icon you copied sooner:
<img src="http://www.yoursite.com/images/colour-icons/cornflower.png" alt="Cornflower" title="Cornflower" width="32" height="32"/>
Repeat the last operation for each color icon needed. The screenshot below shows your color icon(s) in the list of values.
NOTE: You must create only ONE "color characteristic" but with all colors needed on your website (like the picture below). Later in each product settings, you will be able to select the needed color(s) for that product.
You have now finished to create your characteristic. Its display is set by its own Characteristics selection method field. When this field is left on "Inherit", the global option is used instead: in the HikaShop Configuration, Display tab, Product options block, the Characteristics selection method option can be set to "Radio Button" for all your characteristics. Don't forget to save these settings after the change.
Time to configure the characteristic from your product settings. Go back to the HikaShop Products listing and click on the product for which you want a color selector.
In the Specifications block of the product, find the Characteristics field and click on the Add (+) button, then select your new characteristic, here: "Colour swatch". Save the product.
A "Variants" tab now appears in the product form. Click on the Variants tab, then on the "Add variants" button. Select one value of the characteristic for each variant you want to create (here one variant per color) and save. The variants are listed with their code, their color icon, price, quantity, and whether they are published or the default one.
Note : The Default column tells which variant is selected by default when customers reach the product page. Click on its icon to change the default variant. In the same way, click on the Published icon to unpublish a variant. To delete or duplicate variants, tick them in the list and use the buttons which appear above it.
Click on the pencil of a variant to edit it. The variant form is just like the product form: you will mainly notice the color icon of the variant in the Main options block, where you can also set the quantity of this color.
Right now, on the frontend product page, you will see your icon color selector like this:
Link icons and pictures
Now, onto the second step. You have your color icons selector displayed, and you want to show different product pictures linked with the color selector. Edit again your product, go to the Variants tab and click on the pencil of the variant you want to illustrate.
In the Images and files block of the variant, click on the first button to upload a picture from your computer, OR on the "+" button to pick a picture which is already on your website. The third button links a picture by its address.
NOTE : You can have several pictures for one variant, and remove a picture with the cross which appears on it. Don't forget to save!
Repeat these last actions for each variant so that all the variants of the product get their image.
That's it, on the product front end page, when you click on a color icon, the picture of the product will change to display the relevant one:
Create a filter thanks to characteristics
The filters are available from the Display menu of HikaShop, Filters entry. There, you have to create a new filter, so click on New.
Here, you have to do several things:
- Give a name to your new filter.
- Choose your type of filter. Here, you want to choose "Checkbox" (or "Radio Button" if the customer should pick one color at a time).
- In the Options block, choose to apply your filter on "Characteristics".
- And select your characteristic, here for example: "Colour swatch".
- Finally, in "Extra information", switch on "yes" the "Submit on click" option.
- And Save.
- To display the filter on your products listing, publish a HikaShop Filter Module (Joomla Content > Site Modules) in a position of your template. With its "Filters" option left on "All", it displays all your published filters. Later, you will be able to edit the filter, unpublish it or delete it.
Right now, on the products listing pages, customers will see all the characteristic color icons, like this :
And when they will pick a color, the product(s) available with this color (or variants) will be listed. Here, only one product matches with this color :
- Of course, the example is working with color icon characteristics, but all sort of characteristics can be set like size, type of product etc...So it's very usefull!
Maybe the look of this page disappoints you, especially if there are lots of different variants...Good way to speak about CSS customization !
How to customize the display
All starts with the HikaShop Configuration page. Click on the Display tab (be careful not to go on the Display menu), and select the CSS options block.
Here, you can edit the CSS just by clicking on the little pen button next to the "Front-end CSS File" dropdown. A window opens where you can read and customize the CSS. If you do some modifications, don't forget, as usual, to save them !
You will see that your custom CSS will then be selected automatically in the Front-end CSS File dropdown. Save the main configuration too.
Example of custom CSS
Now that we saw how to customize the CSS, we will see some examples of useful CSS modifications to optimize for example, your new color icons characteristic selector !
First, the display color in the product page. Before, the selector looks like this:
In order to change this add at the end of the Css file :
.hikashop_product_characteristics_table input {display: none;}
.hikashop_product_characteristics_table .form-check {padding-left: 0;}
.hikashop_product_characteristics_table label img {border: 2px groove black; padding: 2px; margin: 2px;}
.hikashop_product_characteristics_table input:checked + label img {border: 2px solid red;}
Edit and Save the Custom CSS and...
Result:
And now for the products listing page, the filter display. Before:
Just add this at the end of the Css file:
.hikashop_filter_checkbox + br {display: none;}
.hikashop_filter_checkbox {display: inline-block;}
.hikashop_filter_checkbox label img {border: 2px solid black; display: inline-block !important; margin: 4px;}
.hikashop_filter_checkbox input {display: none;}
.hikashop_filter_checkbox input:checked + label img {border: 2px solid red;}
Note : you can replace the "red" command for your required color, green, blue or rgb(40, 244, 244) by example.
Result :
