Categoría 1: Navegación y menús
21 indicaciones de Claude.AI creadas por expertos para crear elementos de navegación de Shopify
Mega Menú con Colecciones Dinámicas
Crea una sección de Shopify para un mega menú que:
- Muestra hasta 3 columnas
- Extrae dinámicamente enlaces de colecciones del 'Catálogo'
- Admite imágenes destacadas para cada colección.
- Es totalmente responsivo y accesible mediante teclado.
Encabezado fijo con barra de anuncios
Cree una sección de encabezado fija que:
- Permanece en la parte superior del desplazamiento.
- Incluye una barra de anuncios descartable
- Muestra el logotipo de la tienda y los enlaces de navegación principales.
- Se convierte en un menú de hamburguesa en el móvil.
Menú desplegable de varios niveles
Genere una sección de menú de navegación para Shopify que:
- Admite hasta 3 niveles de menú (padre, hijo, nieto)
- Se expande o contrae al pasar el cursor (escritorio) y al tocar (móvil)
- Incluye etiquetas ARIA para accesibilidad.
- Permite a los comerciantes personalizar los elementos del menú en el editor de temas.
Navegación habilitada con insignias
Crea un menú de encabezado donde:
- Los elementos del menú pueden mostrar insignias personalizadas (por ejemplo, "Nuevo", "Oferta")
- Las insignias se pueden configurar a través de metacampos o configuraciones de tema.
- El color y el texto de la insignia son personalizables.
Menú desplegable del selector de idioma
Cree un selector de idioma desplegable para el encabezado que:
- Enumera automáticamente los idiomas disponibles en la tienda
- Muestra banderas de países o códigos de idiomas.
- Resalta el idioma actual
- Cambia de idioma sin recargar la página si es posible
Menú de hamburguesas para dispositivos móviles
Diseñe un menú de navegación móvil que:
- Utiliza un icono de hamburguesa para alternar entre abrir y cerrar.
- Se desliza desde la izquierda o la derecha.
- Admite elementos de menú anidados
- Incluye transiciones CSS suaves
Icono del carrito con recuento de artículos en tiempo real
Cree una sección de navegación de encabezado que:
- Muestra un ícono de carrito con una insignia de recuento de artículos en vivo
- Se actualiza automáticamente a medida que se agregan o eliminan elementos.
- Es accesible y compatible con dispositivos móviles.
Barra de búsqueda integrada en el encabezado
Generar una sección de encabezado con:
- Una barra de búsqueda integrada que se expande al hacer clic o enfocar
- Sugerencias de búsqueda predictiva mediante la API de búsqueda de Shopify
- Soporte de navegación con teclado
Elementos de navegación condicional
Construya un menú de navegación donde:
- Ciertos elementos del menú solo aparecen para clientes registrados o en función de las etiquetas de los clientes.
- Los comerciantes pueden establecer reglas de visibilidad en la configuración del tema
Barra de anuncios con temporizador de cuenta regresiva
Cree una barra de anuncio en la parte superior de la página que:
- Incluye un temporizador de cuenta regresiva personalizable para ventas o eventos.
- Permite a los comerciantes editar el mensaje y el temporizador en el editor de temas.
- Es descartable y está optimizado para dispositivos móviles.
Navegación centrada en la accesibilidad
Diseñe una sección de menú de navegación que:
- Es totalmente navegable mediante teclado.
- Utiliza roles y etiquetas ARIA para todos los elementos interactivos
- Incluye un enlace "saltar al contenido" para lectores de pantalla.
Botón de navegación flotante
Crea un botón de navegación flotante que:
- Permanece visible en la esquina inferior de la pantalla.
- Abre un menú con acciones rápidas (por ejemplo, Inicio, Tienda, Carrito)
- Es táctil y personalizable.
Estilo de navegación estacional
Diseñe un menú de navegación que:
- Cambia el esquema de colores o agrega elementos decorativos según la temporada o festividad actual.
- Los comerciantes pueden programar estilos en el editor de temas
Navegación de ruta de navegación
Generar una sección de navegación con ruta de navegación que:
- Se actualiza dinámicamente según la página/colección/producto actual
- Admite fragmentos enriquecidos para SEO
- Es accesible y receptivo
Iconos de redes sociales en el encabezado
Agregue una fila de íconos de redes sociales a la navegación del encabezado que:
- Enlaces a los perfiles sociales de la tienda
- Permite a los comerciantes elegir qué plataformas mostrar
- Admite cargas de iconos personalizados
Enlace promocional en la navegación
Cree un elemento del menú de navegación que:
- Destaca una promoción o venta específica (por ejemplo, "¡Venta de primavera!")
- Utiliza un color o animación diferente para atraer la atención.
- Se puede editar a través de la configuración del tema.
Menú desplegable de cuenta de usuario
Diseñe un menú de cuenta de usuario en el encabezado que:
- Muestra enlaces de inicio de sesión/registro para invitados
- Muestra la cuenta, los pedidos y el cierre de sesión de los usuarios conectados.
- Incluye un avatar o iniciales.
Conmutador de múltiples tiendas
Cree un selector de tiendas en la navegación que:
- Permite a los usuarios cambiar entre diferentes tiendas o marcas regionales.
- Muestra la tienda actual y las opciones disponibles.
- Actualiza los enlaces y la moneda según corresponda
Navegación con subrayado animado
Cree un menú de navegación con efectos de subrayado animados al pasar el mouse sobre el elemento y al estar activo.
- Los comerciantes pueden personalizar el color y el grosor del subrayado.
- Funciona tanto en computadoras de escritorio como en dispositivos móviles.
Enlace a la Declaración de Accesibilidad
Agregue un enlace persistente de “Declaración de accesibilidad” a la navegación o al pie de página, garantizando el cumplimiento de las pautas de accesibilidad.
- Los comerciantes pueden editar la página vinculada en la configuración del tema.
Botón de contacto con un clic
Cree un botón de contacto de un solo clic en la navegación que:
- Abre un formulario de contacto modal o enlaces a la página de contacto
- Siempre está visible en el móvil
Modo de empleo:
- Copia cualquier mensaje en Claude.AI 3.7
- Añade tu marca o requisitos especiales
- Pegue el código generado en su editor de temas de Shopify
- Personalice utilizando los campos de esquema proporcionados en el Editor de temas de Shopify
¡Mensaje copiado al portapapeles!