Product Navigation Grid - Overlapping
A navigation grid to display "product type" links that overlap the section above it.
View a live demo of this module.
Modules
How to Use This Section
The Product Navigation Grid - Overlapping section creates a visually striking navigation element that appears to “float” above your hero section or banner, making it perfect for directing visitors to key product categories without interrupting your page flow. This overlapping design technique adds depth to your layout while maintaining clean, professional aesthetics ideal for e-commerce sites and product-focused businesses.
You’ll find this section most effective when placed immediately below a hero banner, large image, or video section on your homepage or main category pages. The overlapping effect works by using negative margin positioning to pull the grid upward, creating the illusion that it sits on top of the previous section. This design pattern is particularly popular in modern web design as it breaks up traditional stacked layouts.
When adding this section through the page editor, drag it from your available sections into position below your hero content. The overlap will automatically adjust based on your theme settings, but you can fine-tune the positioning through the section’s styling options. Consider the color contrast between your background content and the navigation grid cards to ensure optimal readability.
For best results, limit your product navigation links to 3-6 categories to avoid overwhelming visitors with choices. Each grid item supports custom imagery, making it easy to create visual associations with your product types. The responsive design ensures your navigation remains functional and attractive across all devices.
This section works exceptionally well on homepage layouts, product landing pages, and category overview pages where you want to guide users deeper into your product hierarchy while maintaining visual engagement.