The Category Hero Slider is a sophisticated, interactive interface designed for modern e-commerce and interior design websites. It serves as a high-impact visual gateway to your products, blending cinematic imagery with an organic, ergonomic navigation experience. Unlike traditional carousels that hide content behind arrows, this widget utilizes a persistent side navigation menu that remains visible, encouraging users to explore multiple product categories through a tactile and fluid interface.

The Organic Design Philosophy

The core of the design is defined by its unique inward-scoop geometry. The main display area features a large, high-definition hero image that is dynamically clipped with an elegant curve. This architectural silhouette creates a physical "nest" for the sidebar buttons, making the entire section feel like a single, cohesive unit. As users scroll through the category list, the navigation buttons utilize a custom sine-wave mathematical calculation to dynamically adjust their width. This allows the buttons to physically wrap around the curve of the hero image, expanding as they reach the center of the viewport and tapering as they move toward the edges.

Deep Customization & Functional Control

From a functional perspective, the widget is built for deep customization within the Redesignee framework. Every element—including the large hero headings, subtle subtitles, specific sidebar button labels, and short category descriptions—is fully editable. This decoupling of text allows marketers to use bold, punchy headlines for the main visual while keeping the navigation buttons clear and descriptive. The "Shop Now" call-to-action is integrated into both the main display and the individual sidebar cards, ensuring that the path to purchase is always accessible.

Performance & User Experience

This widget is optimized for high-performance user engagement and SEO. By utilizing native CSS variables and lightweight JavaScript for the wave animation, the slider maintains fast loading times and smooth 60fps performance, which are critical metrics for search engine rankings and user retention. The mobile experience is equally considered; on smaller screens, the complex sidebar transforms into a clean, horizontal pagination system, ensuring the hand-crafted aesthetic remains functional for touchscreen users.

Ideal Use Cases

• Home Decor Catalogs: Perfect for showcasing premium fabrics and window treatments.
• Luxury Galleries: Creating a high-end feel for furniture or lighting retailers.
• Boutique Fashion: Navigating through seasonal collections or style categories.
• Architectural Portfolios: Presenting project phases through an interactive curve.

By replacing a static image with this dynamic, category-focused hero section, businesses can significantly increase their click-through rates (CTR) and average session duration. It is more than just a decorative element; it is a conversion-focused tool designed to showcase product diversity while providing a memorable, premium browsing experience.

How to install Category Hero Slider to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.