Colorful Menu es un menú visual que contiene imágenes y nombres de categorías, que puede activarse en la página de inicio para las categorías principales que seleccione, o en las páginas de categorías en las que desee mostrar el menú de subcategorías.
La posibilidad de elegir entre diferentes formas, formatos, tamaños, colores e imágenes a utilizar hace que Coloful menu sea muy versátil a la hora de crear atractivos menús que mejoren la navegación del sitio.
Colorful menu
Página de inicio
Category selector mode
Type:
Select
Default value:
All main categories except those specified below
- None: desactiva Colorful menu de la home
- All main categories except those specified below: muestra todas las categorías principales menos las indicadas en el campo Selected categories
- Only the Main categories specified below: muestra solo las categorías principales indicadas en el campo Selected categories
Selected categories: enter main categories to include or exclude, separated by commas
Type:
Input
En este campo se puede ingresar, separadas por coma, las categorías a excluir o incluir según se haya definido en el campo Categories selector mode.
Si se deja en blanco o no se incluye ninguna o no se excluye ninguna.
Size
Type:
Select
Default value:
Medium
Indica el tamaño del Colorful menu a mostrar en la home.
Image source
Type:
Select
Default value:
Category
Colorful menu necesita de una imagen asociada a la categoría. O usa la imagen de la categoría o la obtiene del Image Manager de BigCommerce.
Cuando se elige que busque la imagen en Image Manager, buscará una imagen que tenga como nombre:
cat-image-{category_name}.png
siendo {category_name} el nombre de la categoría asociada.
Por ejemplo, a la categoría Notebooks le corresponderá la imagen cat-image-notebooks.png y a Cells & Accessories le corresponderá cat-image-cells-accessories.png.
Nota: Al subir un archivo con Image manager, reemplaza cada caracter o secuencia de caracteres especiales por un "-", en el caso de Cells & Accessories, Image manager encontró " & "entre Cells y Accessories y reemplazó esa secuencia de caracteres no permitidos por un "-".
Páginas de categorías
Show Colorful menu on category pages
Type:
Checkbox
Default value:
On
Habilita o deshabilita Colorful menu en las páginas de categoría.
Para indicar en qué Categorías se quiere mostrar Colorful menu, se debe ir a las categorías deseadas y seleccionar cfm o cfm_no_image en Template layout file :
Ambos templates muestran Colorful menu en la página de categoría, cfm_no_image no muestra la imagen de la categoría que habitualmente se muestra al inicio de la página. Esto es útil para aquellos sitios en que se quiere usar la imagen de la categoría exclusivamente para mostrarse en Colorful menu.
Tips: si se quiere usar Colorful menu en todas o la mayoría de las categorías, se puede cambiar el template por defecto para que use cfm o cfm_no_image y luego cambiar el template solo en las categorías que no se quiere incluir Colorful menu (ver Category default template).
Size
Type:
Select
Default value:
Medium
Tamaño del Colorful menu a mostrar en las páginas de categorías.
Image source
Type:
Select
Indica a Colorful menu de dónde obtener la imagen en las páginas de categoría (ver Image source para Colorful menu de la home page).
Nombres de categoría
Show category name
Type:
Select
Default value:
Over the image, on bottom
Indica si se muestra o no el nombre de la categoría y si se muestra, en dónde se muestra.
Name in uppercase
Type:
Checkbox
Default value:
On
Muestra los nombres de categoría en mayúscula.
Font color
Type:
Color
Default value:
#333333
Color de texto a utilizar para el nombre de la categoría.
Background color
Type:
Color
Default value:
#FFFFFF
Color de fondo con que se muestra el nombre de la categoría.
Estilo
Activate carousel display when it doesn't fit in a row
Type:
Checkbox
Default value:
On
Dependiendo del tamaño elegido y del dispositivo, Colorful menu puede llegar a mostrar hasta 4 categorías en una misma fila en mobile y 7 en desktop antes de pasar a otra fila.
Si se habilita el modo carousel, en caso que no entre en una fila, habilita el modo carousel menteniendo el menú en una sola fila:
Shape
Type:
Select
Default value:
Square
Colorful menu tiene 3 formas de mostrar las imágenes:
- Circle, se muestra un círculo centrado en la imagen
- Square, se muestra cuadrado centrado en la imagen
- Rectangle, las imágenes se muestran apaisadas con una proporción aproximada de 3 veces el ancho frente al alto.
Esta relación produce muy buenos resultados como imagen de categoría tanto en mobile como en desktop, por lo que Rectangle es una buena opción cuando Image source es Category.
En ningún caso Colorful menu deforma las imágenes, es decir, altera la relación ancho:alto, sino que lo que hace es mostrar lo más que pueda de la imagen partiendo del centro de la misma.
