Categoría 1: Navegación y menús

21 indicaciones de Claude.AI creadas por expertos para crear elementos de navegación de Shopify

Volver a todas las categorías
Navegación y menús Cuadrículas y listados de productos Banners y medios de hero Formularios y registros Controles deslizantes y carruseles Bloques de contenido y acordeones Localización e idioma Rendimiento y SEO Accesibilidad y cumplimiento Automatización e integración de API

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.
Salida Liquid, esquema JSON-T y CSS.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Salida Liquid, esquema JSON-T, CSS y JavaScript si es necesario.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcione Liquid, esquema JSON-T, CSS y JavaScript si es necesario.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporciona Liquid, esquema JSON-T, CSS y JavaScript.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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.
Proporcionar Liquid, esquema JSON-T y CSS.

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
Proporcionar Liquid, esquema JSON-T y CSS.

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

Categorías relacionadas

Accesibilidad y cumplimiento Localización e idioma Rendimiento y SEO
¡Mensaje copiado al portapapeles!