The Categories Widgets let you display a list of categories on your website allowing your visitors to filter the blank products, decorated products, and designs to view.
There are three category widgets you can insert into your website pages:
- Blank Product Categories Widget: provides category links to your store's blank products
- Decorated Product Categories Widget: provides category links to your store's decorated products
- Design Categories Widget: provides category links to your store's designs
In this article, you will learn how...
To add a Categories Widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Categories Widget you want in the LISTS section.
- Click and drag the Categories Widget onto your website page.
Allowable areas a Categories Widget can be inserted into include:
- Within rows
- Within columns
- Above or below existing widgets
- Between existing widgets
The Categories Settings popup will be displayed.
- Configure the Properties for the Categories Widget.
Properties for the Blank Product and Decorated Product Categories Widgets
- Panel title: lets you specify the title that will appear in the header area for the product listing.
- Category: lets you choose the category of products to be displayed. All categories will be displayed if nothing is selected.
Properties for the Design Categories Widget
- Show Designs: lets you choose what designs to display:
- Show Store Designs: displays only a store designs listing. (Store designs are those uploaded at the store level).
- Show Stock Designs: displays only the stock designs listing. (Stock designs are those uploaded at the Fulfillment Center level).
- Show both Store and Stock Designs: displays both a store designs listing and a stock designs listing.
- Store Designs Panel Title: lets you specify the title that will appear in the header area for the Store Designs listing.
- Store Designs Category: lets you choose the category of store designs to be displayed. All categories will be displayed if nothing is selected.
- Stock Designs Panel Title: lets you specify the title that will appear in the header area for the Stock Designs listing.
- Stock Designs Category: lets you choose the category of stock designs to be displayed. All categories will be displayed if nothing is selected.
- Configure the Design settings for the Categories Widget. Click here for instructions.
- Click OK to apply the changes.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To configure the Design settings for the Categories Widgets:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the Categories Widget icon.
- Choose the Categories Settings item from the drop-down menu.
The Categories Settings popup will be displayed.
- Click on the Design tab.
- Set your category list rendering mode preference.
Tick the Render in Collapsed Mode checkbox to display the category list in collapsed mode.
Example of the category list in collapsed mode
Leave the Render in Collapsed Mode checkbox un-ticked to display the category list in expanded mode.
Example of the category list in expanded mode
- Select from one of the pre-configured Categories Layout options.
- Hierarchy: category names are arranged in a hierarchical tree structure. Each category item can be expanded/collapsed to show/hide sub-category items.
- Dropdown: category names are arranged in a list that appears when a graphical box control is clicked, allowing the user to select a category from the list. The category will be displayed in the box after it has been selected.
- List: category names are displayed in a consecutive list that can be set in a vertical or horizontal orientation.
- Grid: category image thumbnails maintain their aspect ratio and are displayed in the center of each cell in a uniform grid arrangement.
- Masonry: category image thumbnails are resized to have the same width while maintaining their aspect ratio and arranged to form equal columns. Images are placed in the optimal position based on available vertical space.
- Collage: category image thumbnails maintain their aspect ratio, but are cropped and are placed in a pre-defined pattern arrangement of a specified number of items per row. You can set a 3,4,5, or 6-image pattern per row. Each row will use one of 4 pattern variations. If the last row has fewer items than necessary then the images will be arranged in a layout to ensure that all space is used on the final row.
- Carousel: rotates the category image thumbnails radially and in a 3D feel by using distance and depth of field. The image thumbnails rotate on an axis where the image is always facing you.
- Stacked: image thumbnails maintain their aspect ratio and are displayed in a single column.
- Configure the design options of the selected layout.
Settings available for all Layouts
- Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the category listing panel.
- Click on the font name to configure the font style using the Font popup. Click here for instructions.
- Click on the color spot to choose a text color using the Color popup. Click here for instructions.
Settings available for Hierarchy, Dropdown, and List Layouts (Blank Product Categories Widget Only)
- Show Dividers: displays a horizontal line between categories when the checkbox is ticked.
Settings available for Hierarchy and List Layouts
- Categories: lets you specify font and the color used for the category names. Click on the font name to choose a font. Click on the color spot to choose a color.
Settings available for the List Layout
- Orientation: lets you choose the orientation in which the categories will be displayed.
- Vertical: displays the category names stacked one below another in a column.
- Horizontal: displays the category names consecutively in a row.
Settings available for Grid, Masonry, Collage, Carousel, and Stacked Layouts
- Thumbnail size: lets you set the dimensions of the category thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
- Thumbnail Width: lets you specify the width of the category image thumbnail in pixels.
- Thumbnail Height: lets you specify the width of the category image thumbnail in pixels.
You can configure the container properties of the category thumbnails by clicking on the brush icon beside the Thumbnail Size field. The Thumbnail Properties popup will be displayed.
- Background Color: lets you specify the background fill color of the category thumbnail.
- Border Width: lets you specify the line thickness of the category thumbnail's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the category thumbnail's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the category thumbnail's border in pixels. Enter a value between 0 and 100.
- Crop Thumbnail: crops the category image thumbnail to square when the checkbox is ticked. Leaves the image in its original shape when the checkbox is unticked.
- Use Higher Resolution on Retina Displays: when checked, will double the pixel density of the images to increase the clarity of the image for retina displays.
- Image Effects: lets you apply filter and transform effects to the category images.
- Hover Image Effects: lets you apply filter effects, transform effects, and hover animation to the category images for the hover state.
Click here for instructions on how to add image effects.
- Panel Design: lets you configure the appearance of each category listing.
Click on the brush icon to configure the panel design. The Panel Design popup will be displayed.
- Background Color: lets you specify the background fill color of the category listing panel. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the line thickness of the category listing panel's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the category listing panel's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the category listing panel's border in pixels. Enter a value between 0 and 100.
- Text Overlay Background: lets you configure the background of any category information (name, number of items) that is displayed on the category image or image rollover.
Click on the brush icon to configure the text overlay background. The Text Overlay Background Properties popup will be displayed.
- Background Color: lets you specify the background fill color of the text overlay. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the border line thickness of the text overlay background in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the border color of the text overlay background. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Width: lets you specify the container width of the text overlay background as a percentage of the product thumbnail width.
- Align: lets you choose an alignment option for the text overlay in reference to the product image:
- Left: aligns the text overlay to the left of the product image.
- Center: centers the text overlay horizontally to the product image.
- Right: aligns the text overlay to the right of the product image.
- Category Name: lets you choose an option for the display and placement of the category's name.
- Number of items: lets you choose an option for the display and placement of the number of items in the category.
- Sub Categories: lets you choose an option for the display and placement of the category's sub-categories.
Settings available for the Carousel Layout
- Carousel Designs Per Row: lets you specify how many categories are visible in the carousel row.
- Carousel Arrow Position: lets you choose the position of scroll arrows displayed on the carousel.
- Carousel Arrow Style: lets you choose and configure the style of scroll arrows displayed on the carousel.
- Carousel Animation: displays the current setting duration setting for the transition from one slide to the next.
Click on the brush icon to display the Animation Settings popup which lets you configure the animation for the transition between slides. Click here for instructions on how to add image effects.
- Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the category listing panel.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.