For kids (4)
Sports (2)
Furniture (9)
Basic Categories Layout block example
Intro
The “Category layouts” block shares a lot of controls with the “Product layouts”.
Categories selection
Product categories can be chosen in two ways. One choice is automatic selection, which shows categories based on ordering query settings. The other option is to hand-pick particular categories. In Inspector Control sidebar, open “Categories” section to choose your preferred category selection.
Automatic (query based) categories
Query based product categories selection lets you set up categories based on following criteria – alphabetically or by count of products in category (ascending or descending). The layout will be automatically filled with categories by selected criteria.
Hand-picked categories
The other choice is to hand pick category by category, to create completely customized categories layout. Categories can be selected in Inspector Controls sidebar (after you choose “Hand picked” instead of “Automatic”) , or in each layout item, by clicking on + button:
NOTE: if the category is deleted, it will be missing from the layout. Also, if category ID is changed, it won’t have any fallback category displayed. Use hand-picked category choice for regularly curated layouts.
VIDEO FOR categories SELECTION
Starter layouts
When Categories Layout block is added to a page, it will already have a basic layout. This layout includes 3 items in a row. It also has a default style, as seen in the example from the top of this page.
Starter layouts can be selected in the Inspector Controls in the right sidebar, or in the block controls (images bellow):
These layouts are simply a starting points to kick start your layout creation. Layouts are created with 3 or 4 items in various layout configurations.
NOTE: Any added item or changed layout will be overwritten if you switch starter layouts after the edits.
Starter styles
Like Starter layouts, Starter styles serves as a kick-starter for styling categories. We predefined the styles for the most common visual styling. Use starter styles as starting point, and apply your style changes to fit your desired preference.
NOTE: Like starter layouts control, switching starter styles will overwrite any style changes made in the “Category style settings” section
VIDEO FOR STARTER LAYOUTS AND STYLES
Editing layout
After the starter layout is chosen, items in layout can be rearranged, resized, added, or removed. It’s enough to hover the item, and the resizing or moving handles will show up, enabling handling the item.
Adding or removing layout items
To add items, click on “Add grid item” in block controls. Alternatively, use the Inspector Controls sidebar and navigate to Layout and grid settings, then click on Add item.
Removing items can be done by clicking on red “X” on each item (when hovered):
Move and resize items
Rearranging the layout is straightforward. When a product item is hovered, the handles for resizing the item will show up. Item will resize by dragging the handles.
You can move items to any position. Simply drag and drop item when the cursor is set to the move icon.
Item toolbar
Each item has a small toolbar, appearing on item hover. The toolbar’s content depends on the type of product query, whether automatic or hand-picked. It also depends on the grid settings, like “Allow overlapping items” (more about “Grid settings” section bellow). The toolbar holds z-index control and hand-picking product control. There is also the option to remove the item from the layout. It includes the item id info.
The “Z-index” control will place the item in front or behind other items. This setting appears only if “Allow overlapping items” in “Grid settings” sidebar section.
Edit the category style
In “Category style settings” sidebar section there are controls for changing visual aspects of categories. Font sizes and colors, spacing, alignments, backgrounds, borders, shadows, and elements visibility. There are also a couple of special controls. These include category description number of lines (truncating), title and description shadows, etc.
The best way to start may be to select a starter style, and then use above mentioned controls to customize the categories look:
Text sizes, shadows …
The first tab in “Category style settings” covers text sizes. It includes the category title,, description, and products count.
To adhere to the principles of intrinsic web design, font sizes are fluid. This choice avoids excessive settings for various devices. Font size will adapt and stretch to size between the least and highest size, in rem units.
With the “Truncate description” and “Truncate lines” the short description can be shorten, given the number of lines.
Text shadows are useful for better visuals, and to improve readability.
Layout, alignment, spacing
The second tab in “Category style settings” is related to product layout styles:
“Category layout type” drop-down provides several options. You can place the category image on the left, right, top, or bottom. Alternatively, use it as a category background image.
Horizontal and vertical align buttons will align category elements compared to each category container box.
Padding and elements spacing controls use a fluid size system. This system sets the smallest and the highest values (according to the intrinsic web design principles). Padding applies to category content box, elements spacing applies to category elements (title, description …).
The “Image size” control resizes the category image in percentages, compared to category content box. Category image uses the “srcset” image HTML attribute with responsive image sizes.
Element colors
The third tab in “Category style settings” holds controls for font and background controls. If (category image) overlay color is set, the overlay opacity can be controlled. Additionally, background color controls includes the gradient colors choice. The “Overlay blend mode” can change the overlay blending with the image, giving special visual style to image.
Border and shadows
Fourth tab holds settings for product box container border and shadows. Border settings include width, color, and style, as well as border radius (“Rounded corners” setting).
The box shadow can add shadow to product container box, and it also includes inset shadow.
Visibility and sorting
The last tab in “Category style settings” deals with product element visibility and sorting. Visibility can be toggled per device (desktop, tablet, or mobile). Sorting elements can be done using drag and drop handle with the up/down arrows.
Style settings per item
Each item in the “Categories Layout” block can have its own style, which overrides general style settings.
In the “Style settings per item” click the toggle “Override settings” to activate styling controls for that item. The controls per item are the same as for the category style settings in general (the “Category style settings” section).
NOTE: If many items are added to the grid, it can get complicated. Each item having its own custom styling contributes to this complexity. Thus, we recommend using styling per item sparingly.
When style override for is activated, the default style will apply to that item.
To match the current general style, use the “Apply current global settings“, available in the copy/paste toolbar. More info bellow:
Additionally, item override includes Style switcher. It allows starting with predefined styles. There is also a copy/paste mini-toolbar to copy and paste styles between general and item styles overrides.
Style copy/paste
We have added a small utility tool for copying and pasting styles. You can copy styles from general style settings to item style override or vice-versa. It is also possible to copy styles temporarily to easily switch back to the last satisfying style.
You can find the copy/paste toolbar above the “Category style settings” tabs. It is also available in each item style tab in “Style settings per item“.
As mentioned above, to apply the current general style settings, each item has additional toolbar button “Apply current global settings“.
Saving layout, style sets
A powerful tool for quickly changing the look of your products is the Saving layout and style setups section.
This utility allows you to save as many setups as you want to the database. This means those setups can be reused in any other Mosaic Products Grid block instances.
NOTE: Saved setups can only be used within block instances of the same type. Saved Category Layout Setups can’t be applied to Product Layouts or Single Product Builder blocks.
Layout grid settings
The base for creating Categories Layout is a grid system which controls the placement of product items. Grid enables easy snapping and aligning items, even for more free and creative layouts.
Grid layout settings controls grid row height, grid spacing (affects products spacing), items overlapping toggle, and items compaction type. It also includes a grid helper – a visual aid for easier layout editing.
Compaction type will make items “gravitate” to the top or to the left side. This depends on whether horizontal or vertical compaction type is selected. Compaction will also allow space between the item only for the set margin size.
