Cambiar Estilo de item en menu

[Dianagc]

Hola Comunidad, cómo puedo cambiar el estilo (fondo y texto) de un item del menu principal?

Para resaltar por ejemplo promociones

[Ann]

Hola @Dianagc,

Gracias por escribir en los foros de la comunidad. Entiendo que quieres saber cómo puedes modificar el color y texto de uno de los elementos del menú principal de tu tienda, ¿verdad?

Antes que nada quisiera confirmar, ¿qué tema estás usando?

A modo de contexto, debes saber que no es posible realizar esta personalización de manera nativa. Aunque desde la sección de configuración del tema en el editor de temas puedes modificar el color del texto del menú principal de la tienda, para modificar el estilo de un solo elemento del menú es necesario hacer modificaciones en el código del tema. Para que lo tengas en cuenta, en el equipo de soporte no somos especialistas en codificar. Sin embargo, hay algunos requerimientos como este en los que podemos prestar ayuda.

Dicho esto, puedes seguir estos pasos para personalizar el color y letra de uno de los elementos del menú, en tu caso "Promociones":

1. Dirígete a Tienda online > Temas > Tema actual.
2. Haz clic en los tres puntos al lado del nombre del tema y luego en Editar código.
3. Haz clic en la carpeta Recursos y luego en el archivo base.css (dependiendo del tema, también puedes encontrarlo con el nombre main.css o theme.css).
4. Copia el siguiente fragmento de código en la parte de abajo del archivo y guarda los cambios:
   
   

   #HeaderMenu-promociones > span {
    color: red;
    font-family: "Monaco";
   }​

Te comparto un ejemplo desde una tienda de prueba para mostrarte cómo se vería:

Nota: el color y tipo de letra puedes modificarlo según tus preferencias. 

Es importante que antes de realizar cambios en el código del tema, hagas una copia de seguridad del mismo. De esta forma, si los cambios no salen como lo esperabas o si afectan el comportamiento de otras áreas de tu tienda, puedes volver a usar la versión anterior del tema sin problema.

Alternativamente, si no te sientes cómoda codificando, puedes contratar a uno de los partners de Shopify para que te ayude con esta personalización. Ellos son un grupo de desarrolladores expertos que ayudan a nuestros comerciantes a diseñar y adaptar distintas funcionalidades en sus tiendas.  

Por el momento, ¿qué tipo de tienda tienes? ¿Ya se encuentra abierta al público o todavía la estás diseñando?

[Dianagc]

Gracias Ann, estoy usando impact en la última versión.

[Javier]

Hola @Dianagc,

Gracias por tu respuesta.

Aparte de los consejos que Ann te pasó, otra cosa que puedes intentar es ponerte en contacto con el equipo de soporte de tu tema aquí para ver si tu solicitud de cambio que dentro de su alcance de soporte. 

Si te queda otra duda en relación con tu tienda, abre otro hilo en estos foros y estaremos más que felices de ayudar.

Saludos, 

[laurasingular]

Hola Ann, 

Me ha parecido muy interesante esta entrada. Estoy intentando cambiar el color de un elemento del menú de mi theme, pero no lo consigo. He probado tus recomendaciones, pero algo hago mal. Quisiera poner REBAJAS en rojo. Además de la edición del código, he probado con el css de Personalización del tema, pero por alguna razón, se ve en rojo en todas las páginas interiores de la web, pero no en la home y solo en versión desktop. Me gustaría, claro está, ponerlo en rojo también en el menú móvil.

Sería genial que me pudieras ayudar con esto.

Muchas gracias.

[laurasingular]

Perdón, mi tienda es https://moutt.com

[Javier]

Hola @laurasingular,

Gracias por ponerte en contacto. 

Si los pasos que Ann indicó arriba no funcionaron, es posible que tendrás que hacer uno de estas cosas:

• Contratar a tu propio desarrollador para ayudarte a corregir el error en tu tema.
   
• Ponerte en contacto con uno de los partners de nuestra Lista de Partners para arreglar el error y llevar a cabo el cambio que quieres.

Acuérdate de que siempre recomendamos que uno duplique su propio tema para que pueda revertir los cambios si aparece algún error. 

Otra cosa que debes tener en cuenta es que el cambio de código por cuenta propia y sin la orientación del equipo de soporte de tu tema anula la garantía de soporte para ese caso en específico.

Por curiosidad, ¿Cómo se llama el tema que estás usando?