Category navigation section with image preview on hover or click.
Category Showcase
The Category Showcase section displays an interactive category browser. The visitor hovers over or clicks on a category in the menu, and a preview image appears alongside it. Ideal for guiding visitors to your main collections in a visual and engaging way.
How It Works
The component is divided into two zones: a category list (links) and a preview area (image). When the visitor interacts with a category, the image changes with a smooth transition.
3 Styles
| Style | Description | Ideal for |
|---|---|---|
| Minimal | Simple text, no borders | Clean design, luxury |
| Bordered | Separators between items | Readability, clear structure |
| Filled | Colored background on the active item | Visual impact, obvious interactivity |
Main Settings
| Setting | Description | Options |
|---|---|---|
| Style | Appearance of the items | Minimal / Bordered / Filled |
| Interaction | Activation mode | Hover / Click |
| Image position | Side of the image | Left / Right |
| Image ratio | Image proportions | Square / Portrait / Landscape / 16:9 |
| Transition | Image change animation | Fade / Slide / Zoom |
| Text size | Size of category links | Small / Medium / Large / Extra Large |
| Numbering | Show a number before each category | On / Off |
| Product counter | Show the number of products | On / Off |
Category Item Block
Each category is a block with the following fields:
| Field | Description |
|---|---|
| Collection | Linked Shopify collection |
| Custom title | Custom title (replaces the collection name) |
| Image | Preview image (replaces the collection image) |
| Description | Short description below the title (optional) |
Use Cases
Main Collection Navigation
- Filled style with Hover interaction
- 4-6 main collections
- Lifestyle images for each collection
- Extra Large text size for impact
- Product counter enabled
Catalog by Category
- Minimal style with Click interaction
- Image on the right in Portrait
- Numbering enabled
- Short descriptions below each category
- Fade transition
Gift Guide by Occasion
- Bordered style
- Categories: "Birthday", "Wedding", "Christmas", etc.
- Themed images per occasion
- Large text size
- Image position on the left
💡Use images with the same ratio and style for all categories. The transition will be smoother and the result more professional than with inconsistent images.
ℹ️On mobile, the image area moves above the category list. The interaction automatically switches to Click mode (since hover does not exist on mobile).