Logos en lugar de texto en menu (categorias)

Español Debates Discusión general

Topic summary

Un usuario busca reemplazar el texto de una categoría del menú (“DEKA”) con un logo en el encabezado de su sitio web.

Solución propuesta:

Se ofrecen dos métodos:

  1. Menú dinámico con bloques: Verificar si el tema permite cargar imágenes directamente en las opciones del menú.

  2. CSS personalizado: Usar reglas CSS para ocultar el texto y mostrar una imagen de fondo:

    • Acceder a “Tienda online - personalizar” → sección header
    • Agregar código CSS en “CSS personalizado” que aplica color: transparent y background-image al elemento del menú
    • Ajustar dimensiones (width, height) según necesidad
    • Cargar la imagen en la sección Contenido de Shopify para obtener la URL

Resultado: El usuario confirma que la solución CSS funcionó correctamente, requiriendo solo ajustes menores de posicionamiento.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

En el encabezado de mi web (www.xhen.es) se muestran las categrias, en una de ellas (DEKA) me gustaría que en lugar de aparecer el texto, apareciera un logo.

Como se puede hacer?

2

Hola @Pau_2 espero te encuentres bien.

Agregar una imagen al menú se puede conseguir, existen 2 formas de poder hacerlo. Sería cuestión de revisar las funciones de tu tema. Pero te aconsejo revisar esto:

  1. Menú dinámico con bloques del tema
    1. Si tu tema te permite construir el menú usando bloques de sección revisa si te puedes cargar alguna imagen para cada opción del menú, si te lo permite entonces sería cuestión de solo agregar la imagen y revisar como se comporta.
  2. Usar reglas CSS para mostrar la imagen
    1. Si tu tema es de los que solo puedes seleccionar el menú a mostrar y el menú se crea en la sección Menús, entonces podrías usar una regla CSS para mostrar la imagen. Sigue estos pasos
      1. Ve a Tienda online - personalizar
      2. Ve a la sección header o encabezado donde está tu menú
      3. En el panel de configuración de esa sección deberías de ver una opción llamada CSS personalizado (se encuentra hasta el final de las configuraciones)
      4. Coloca el siguiente código CSS en el espacio de texto. Solo recuerda colocar la url de tu imagen dentro de url(‘’)
a#HeaderMenu-deka span {
    color: transparent;
    background-image: url('aquí va la url de tu imagen, encerrada entre la comillas simples');
    width: 50px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}​

De ahí es solo cuestión de jugar con las opciones width y height para darle las medidas correctas para adaptarlo al menú.

  • Guarda los cambios.

Nota: La url del icono o imagen de deka la puedes obtener si lo cargas en la sección Contenido (la encuentras debajo de la opción Clientes desde el panel principal de Shopify).

Espero te sirva, saludos.

1 Like
3

Muchas gracias, me ha funcionado perfectamente, solo he tenido que moverlo un poco