Colorful Menu is a visual menu containing images and category names, which can be activated on the home page for the main categories you select, or on the category pages you want to display the subcategory menu.
The possibility of choosing between different shapes, formats, sizes, colors and images to use makes Coloful menu very versatile when it comes to creating attractive menus that enhance site navigation.
Colorful Menu
Home page
Category selector mode
Type:
Select
Default value:
All main categories except those specified below
- None: disables Colorful menu of the home page
- All main categories except those specified below: displays all main categories except those specified in the Selected categories field
- Only the Main categories specified below: displays only the main categories specified in the Selected categories field
Selected categories: enter main categories to include or exclude, separated by commas
Type:
Input
In this field you can enter, comma separated, the categories to exclude or include as defined in the Categories selector mode field.
If left blank, either none are included or none are excluded.
Size
Type:
Select
Default value:
Medium
Specifies the size of the Colorful menu to display in the home page.
Image source
Type:
Select
Default value:
Category
Colorful menu needs an image associated to the category. Either it uses the category image or it gets it from the BigCommerce Image Manager.
When you choose to look for the image in Image Manager, it will look for an image that has as its name:
cat-image-{category_name}.png
where {category_name} is the name of the associated category.
For example, the Notebooks category will have the image cat-image-notebooks.png and Cells & Accessories will have cat-image-cells-accessories.png.
Note: When uploading a file with Image manager, it replaces each character or sequence of special characters with a "-", in the case of Cells & Accessories, Image manager found " & "between Cells and Accessories and replaced that sequence of not allowed characters with a "-".
Category pages
Show Colorful menu on category pages
Type:
Checkbox
Default value:
On
Enables or disables Colorful menu on category pages.
To indicate in which Categories you want to show Colorful menu, go to the desired categories and select cfm or cfm_no_image in Template layout file :
Both templates show Colorful menu on the category page, cfm_no_image does not show the category image that is usually shown at the top of the page. This is useful for those sites where you want to use the category image exclusively to be displayed in Colorful menu.
Tips: if you want to use Colorful menu in all or most of the categories, you can change the default template to use cfm or cfm_no_image and then change the template only in the categories that you do not want to include Colorful menu(see Category default template).
Size
Type:
Select
Default value:
Medium
Colorful menu size to display on category pages.
Image source
Type:
Select
Tell Colorful menu where to get the image from on the category pages(see Image source for Colorful menu of the home page).
Category names
Show category name
Type:
Select
Default value:
Over the image, on bottom
Indicates whether or not the category name is displayed and if so, where it is displayed.
Name in uppercase
Type:
Checkbox
Default value:
On
Displays category names in capital letters.
Font color
Type:
Color
Default value:
#333333
Text color to be used for the category name.
Background color
Type:
Color
Default value:
#FFFFFF
Background color with which the category name is displayed.
Style
Activate carousel display when it doesn't fit in a row
Type:
Checkbox
Default value:
On
Depending on the chosen size and device, Colorful menu can display up to 4 categories in the same row on mobile and 7 on desktop before moving to another row.
If carousel mode is enabled, in case it does not fit in a row, it enables carousel mode keeping the menu in a single row:
Shape
Type:
Select
Default value:
Square
Colorful menu has 3 ways to display images:
- Circle, a circle centered on the image is displayed
- Square, a square is displayed centered on the image
- Rectangle, images are displayed in landscape with a ratio of approximately 3 times the width vs. height.
This ratio produces very good results as a category image on both mobile and desktop, so Rectangle is a good choice when Image source is Category.
In any case Colorful menu deforms the images, that is to say, it alters the width:height ratio, but what it does is to show as much as possible of the image starting from the center of it.
