Category 1: Navigation & Menus
21 Expert-crafted Claude.AI prompts for creating Shopify navigation elements
Mega Menu with Dynamic Collections
Create a Shopify section for a mega menu that:
- Displays up to 3 columns
- Dynamically pulls collection links from the 'Catalog'
- Supports featured images for each collection
- Is fully responsive and keyboard accessible
Sticky Header with Announcement Bar
Build a sticky header section that:
- Remains at the top on scroll
- Includes a dismissible announcement bar
- Shows the store logo and main navigation links
- Collapses into a hamburger menu on mobile
Multi-Level Dropdown Menu
Generate a navigation menu section for Shopify that:
- Supports up to 3 menu levels (parent, child, grandchild)
- Expands/collapses on hover (desktop) and tap (mobile)
- Includes ARIA labels for accessibility
- Allows merchants to customize menu items in the theme editor
Badge-Enabled Navigation
Create a header menu where:
- Menu items can display custom badges (e.g., "New", "Sale")
- Badges are configurable via metafields or theme settings
- Badge color and text are customizable
Language Selector Dropdown
Build a language selector dropdown for the header that:
- Automatically lists available store languages
- Displays country flags or language codes
- Highlights the current language
- Switches language without page reload if possible
Mobile-First Hamburger Menu
Design a mobile navigation menu that:
- Uses a hamburger icon to toggle open/close
- Slides in from the left or right
- Supports nested menu items
- Includes smooth CSS transitions
Cart Icon with Live Item Count
Create a header navigation section that:
- Shows a cart icon with a live item count badge
- Updates automatically as items are added/removed
- Is accessible and mobile-friendly
Search Bar Integrated in Header
Generate a header section with:
- An integrated search bar that expands on click or focus
- Predictive search suggestions using Shopify's search API
- Keyboard navigation support
Conditional Navigation Items
Build a navigation menu where:
- Certain menu items only appear for logged-in customers or based on customer tags
- Merchants can set visibility rules in theme settings
Announcement Bar with Countdown Timer
Create a top-of-page announcement bar that:
- Includes a customizable countdown timer for sales or events
- Allows merchants to edit the message and timer in the theme editor
- Is dismissible and mobile-optimized
Accessibility-First Navigation
Design a navigation menu section that:
- Is fully navigable by keyboard
- Uses ARIA roles and labels for all interactive elements
- Includes a "skip to content" link for screen readers
Floating Navigation Button
Create a floating navigation button that:
- Stays visible in the bottom corner of the screen
- Opens a menu with quick actions (e.g., Home, Shop, Cart)
- Is touch-friendly and customizable
Seasonal Navigation Styling
Design a navigation menu that:
- Changes color scheme or adds decorative elements based on the current season or holiday
- Merchants can schedule styles in the theme editor
Breadcrumb Navigation
Generate a breadcrumb navigation section that:
- Dynamically updates based on the current page/collection/product
- Supports rich snippets for SEO
- Is accessible and responsive
Social Media Icons in Header
Add a row of social media icons to the header navigation that:
- Links to the store's social profiles
- Allows merchants to choose which platforms to display
- Supports custom icon uploads
Promo Link in Navigation
Create a navigation menu item that:
- Highlights a specific promotion or sale (e.g., "Spring Sale!")
- Uses a different color or animation to attract attention
- Is editable via theme settings
User Account Dropdown
Design a user account menu in the header that:
- Shows login/register links for guests
- Shows account, orders, and logout for logged-in users
- Includes an avatar or initials
Multi-Store Switcher
Build a store switcher in the navigation that:
- Lets users switch between different regional stores or brands
- Displays current store and available options
- Updates links and currency accordingly
Animated Underline Navigation
Create a navigation menu with animated underline effects on hover and active states.
- Merchants can customize underline color and thickness
- Works on both desktop and mobile
Accessibility Statement Link
Add a persistent "Accessibility Statement" link to the navigation or footer, ensuring compliance with accessibility guidelines.
- Merchants can edit the linked page in theme settings
One-Click Contact Button
Create a one-click contact button in the navigation that:
- Opens a contact form modal or links to the contact page
- Is always visible on mobile
How to Use:
- Copy any prompt into Claude.AI 3.7
- Add your branding or special requirements
- Paste the generated code into your Shopify theme editor
- Customize using the provided schema fields in Shopify's Theme Editor
Prompt copied to clipboard!