Really incredible support from the team at MANAdev. I was having some issues getting the Layered Navigation SEO Plus set up as my theme was causing a ... Read more

Jan 10, 2017 Chanette Kennedy

Certified Magento Enterprise developer Certified Magento developer Certified Magento theme developer Certified Magento specialist

Manadev is certified extension and theme
developer for Magento

How To Create Color Picker

Color Picker Example in Layered Navigation

After extension is installed, usually color filter will be presented in store frontend as a list of named checkboxes:

Color Filter Default Display

MANAdev give a powerful tool set to modify visualization of selecting colors, as well as setting up other types of pickers. Here is a guide for customizing color and image swatches.

In Magento Admin Panel go to menu MANAdev-> Layered Navigation, find attribute and open it for editing. For color swatches, filter Color can be selected.

In General tab Display parameter one of Colors and Images options should be selected :

Color Filter Display Settings

  • Colors and Images (Horizontal) will show all swatches, placed horizontally:

    Colors and Images (Horizontal)

  • Colors and Images (Vertical) will place all color or images in a vertical order:

    Colors and Images (Vertical)

  • Colors and Images (with Labels) will show all swatches in a vertical line with names:

    Colors and Images (with Labels)

  • Colors and Images (One Item Can Be Selected At A Time) will show all colors in a vertical line with color names, but only one color can be selected at at time

    Colors and Images (One Item Can Be Selected At A Time)

Hint: If you cannot see any change in frontend, after you change the parameters, try to refresh your browser cache by pressing Ctrl + F5.

There are two different sections in layered navigation, that can be configured: Picker and State. Picker is a palette of all possible colors or options, while State contains information about selected elements: Color Picker Sections)

When Display parameter is set to one of above option, additional tab Colors and Images will appears. Here you can finalize your color picker visualization.

Color Picker Settings)

Colors and Images (Picker) group of settings define default visualization and behavior of every swatch:

  • Width and Height will define size of color swatch.
  • Border Radius allows to add rounder borders to an element
  • Image, Selected, Mouse Over and Selected Mouse Over This section allows to add additional top layer over all swatches which might be used as a mask to give specific shape for a swatch (for example heart shape swatches) or additional border.

Graphical file for the mask can be uploaded using buttons Add or Change, or can be removed, if you do not need it anymore.

Colors and Images (State) settings are used for visualization of selected filter options: Color Picker State Settings)

  • Width andHeight will define size of state element.
  • Border Radius allows to round corners to an element, where 0 means square.
  • Image is a mask for element, which will be applied to on top of selected element image.Graphical file for the mask can be uploaded using buttons Add or Change, or can be removed, if you do not need it anymore.

Option settings are used for visualization of every swatch element: Color Picker Option Settings)

For every swatch element (in our case - color) you can set:

  • Position is relative position of the option in the whole palette.
  • Name is a swatch name. Can be visible in a a label, if filter display type is "Colors and Images (with Labels)", or in tooltip, when mouse is over the element.
  • Color - swatch color, which will be shown, if image is not provided.. Using color selecting control you can set a Hex value of the color of a swatch.
  • Image - is a graphical image, uploaded from a file. Will be used to show the swatch element.
  • Selected Image - is a graphical image, which will be shown when option is selected. If not provided, picture from Image parameter will be used.
  • Mouse Over is a graphical image, which will be used when mouse is over the option. If not provided, picture from Image parameter will be used.
  • Selected Mouse Over is a graphical image, which will be shown when mouse is over the selected element. If not provided, picture from Image parameter will be used.
  • In State is a graphical image, which will be shown in "State" section for the selected element

In case you want to have image picker, you can upload images for different states: ordinal image, image when item is selected, ordinal image when mouse is over the item and selected item when mouse is over it.

Hint: In case image picker should look the same in spite of the state of the filter - normal, selected, mouse over it or selected with mouse over it - it is recommended to set the image only for one Image column. It will help to avoid image flicker.

Here is the example of Length filter configuration.

Image Picker Option Settings)

We Accept: PayPal Visa MasterCard American Express Discover