Un usuario busca personalizar el menú de su tienda Shopify para destacar visualmente la sección “REBAJAS” con un fondo de color y texto contrastante, tanto en la versión de escritorio como en móvil.
Solución proporcionada:
Implementación:
Advertencias importantes:
Caso adicional: Otro usuario con tema Prestige reporta que el código no funciona. Se le proporciona una versión adaptada cambiando el número de posición del elemento (item-1) y usando color naranja (#ffcd82) como ejemplo.
Buenas tardes,
Estoy preparando mis rebajas de julio y me gustaría saber como cambio la palabra REBAJAS con el fondo negro u otro color que resalte en mi menú, tanto en el menú principal como en el desplegable.
Mi página web es romanjoyero.com
Adjunto foto
Muchisimas gracias
Hola @Carmenroman
¿Podrías darnos más detalles? No veo la imagen adjunta que mencionas y tampoco encuentro la palabra “Rebajas” en el menú.
Quedo atento, saludos.
Si perdón, sería donde aparece los SPECIAL PRICES. Te mando cómo me gustaría que apareciera.
Hola, @Carmenroman :
Muchas gracias por la respuesta con la captura de pantalla. Entiendo por tu mensaje que te gustaría modificar uno de los elementos del menú de tu tienda para que resalte en comparación con el resto, ¿cierto? Será un placer poder ayudar y arrojar algo de luz sobre esta cuestión que nos propones.
A modo de contexto, la función de destacar elementos específicos del menú de un tema no está disponible de forma nativa en las plantillas de Shopify. Esto es, si estás usando un tema desarrollado por Shopify, solo será posible implementar esta opción con un cambio o modificación del código. Si estás usando un tema desarrollado por un proveedor externo, te recomendaría contactar con ellos para que puedan confirmarme sobre si es posible llevar a cabo esta modificación del menú principal de manera nativa.
Para ofrecerte algo más de información al respecto, te dejo una guía sobre dónde encontrar ayuda para tu tema. Dicho todo esto, si estás usando un tema de Shopify, me alegra informarte de que recientemente hemos añadido una función de CSS personalizado a la propia configuración del tema. Esta herramienta permite definir diseños y personalizaciones específicas al aspecto de tu plantilla y página web.
Tras analizar con detenimiento la estructura de la página web de tu tienda, he podido crear un tipo de código CSS que funcionaría para conseguir este objetivo de diseño que deseas. Te dejo el código y los pasos a seguir para implementarlo en el tema de tu tienda de Shopify:
#Details-HeaderMenu-4 .header__menu-item,> #HeaderMenu-MenuList-4 {> background-color: black;> color: white;> }
Ten en cuenta que este código CSS es específico para el cuarto elemento de tu menú, si cambias la posición o editas la estructura del menú, este no funcionará correctamente. Si en un futuro decides editar la estructura del menú, podrá eliminar este código siguiendo los mismos pasos.
Dime, ¿podrías confirmarme si este ha funcionado para tu tienda? Si no estás cómoda haciendo este tipo de cambios y estás usando un tema de Shopify, recuerda que puedes escribirnos a través de este enlace. Si cumples con los requisitos de diseño, nuestros especialistas podrán implementar esto por ti. Alternativamente, también puedes contratar a un experto de Shopify. Este es un portal de especialistas y desarrolladores que pueden darte un presupuesto para cualquier personalización que necesites. Entretanto, ¿cómo va el resto de cuestiones con tu negocio y tu tienda de Shopify?
Muchísimas gracias, justo si funciona en pantalla completa pero en móvil y computadora de escritorio no, ¿habría alguna opción de ponerlo en esas?
Gracias por la respuesta, @Carmenroman :
El código CSS que te compartía es para aplicar el estilo de fondo negro y letra en blanco al ítem del menú dentro del propio menú estático superior cuando la página se ve desde una pantalla amplia. El comportamiento esperado es no aplicar dichos estilos cuando el menú es desplegable. En este caso, para aplicar también este estilo al menú desplegable de tu tienda, puedes copiar el siguiente código:
#Details-menu-drawer-menu-item-4 .menu-drawer__menu-item,> #Details-menu-drawer-menu-item-4> .menu-drawer__inner-submenu> .menu-drawer__menu-item {> background-color: black;> color: white;> }
Para ello, puedes seguir los mismos pasos que te compartía en la respuesta anterior. Con este código y el código de mi otro mensaje; el menú de la tienda se mostrará con un fondo negro y letra en blanco para destacar sobre el resto. Dime, ¿podrías confirmarme si esta personalización se ajusta de mejor manera? Tras pegar el código, ¿el menú se visualiza como deseas en todas las versiones de la tienda?
Si perfecto, lo acabo de probar y me aparece en ambos sitios muchas gracias. En el caso de querer cambiar solo el color de la letra ¿qué valor tendría que darle al fondo?.
Hola, @Carmenroman :
Muchas gracias por la respuesta. Me alegra escuchar que el código CSS que te he compartido ha funcionado para cambiar el elemento específico de ambas versiones del menú. Tanto la versión de pantalla completa, como la versión del menú desplegable cuando el tamaño de la pantalla de algo más reducido.
Como habrás podido comprobar, ambos extractos de código CSS contienen los elementos “background-color” y “color” seguidos del nombre de un color específico. En este caso, me alegra informarte que puedes determinar el color que tú desees. Por una parte, “background-color” hace referencia al color de fondo y “color” hace referencia al color propia de la tipografía.
Como te comento, puedes cambiar los valores de los colores para que sean como quieras. Dicho esto, te dejo un artículo externo en el que se explica como expresar colores en CSS. Ahora bien, conviene no editar la estructura actual del código. De lo contrario, lo más probable es que no funcione. Si necesitas algún tipo de asistencia más especializada, te recuerdo que puedes contratar a un experto de Shopify para implementar cualquier tipo de personalización a tu tienda directamente desde el código.
Mientras, ¿cómo va todo lo demás? ¿Has podido comenzar a trabajar para mejorar la optimización para motores de búsqueda (SEO)? ¿Has podido hacer uso de la herramienta de informes y estadísticas de Shopify? Si es así, ¿Cómo van las estadísticas de sesiones, conversiones, adquisición, ventas, etc. con tu negocio?
Muchísimas gracias por tu ayuda, ¿Y si lo quisiera poner en negrita solo el primero se podría? ¿O sería otro código más especifico?
Hola, @Carmenroman :
Gracias por la respuesta. Me alegra informarte que con código CSS también puedes poner en negrita esta sección del menú de tu tienda. Si deseas poner todos los elementos del menú en negrita, solamente tendrás que modificar el contenido que aparece entre los corchetes de los códigos que te compartía.
En lugar de:
… {> background-color: black;> color: white;> }
Tendrás que poner:
… {> font-weight: bold;> }
Si lo que deseas es modificar únicamente el elemento principal del menú para que aparezca en negrita y seguir mostrando el resto de elementos del submenú de forma normal y corriente, puedes pegar el siguiente código en la sección de CSS personalizado que te comentaba:
.header__inline-menu li:nth-child(4),> #Details-menu-drawer-menu-item-4 .menu-drawer__menu-item {> font-weight: bold;> }> > #HeaderMenu-MenuList-4,> #Details-menu-drawer-menu-item-4> .menu-drawer__inner-submenu> .menu-drawer__menu-item {> font-weight: normal;> }
Dime, ¿podrías confirmarme si este código CSS sirve para la configuración específica que deseas implementar? ¿Has considerado contactar a nuestros especialistas o contratar a un experto de Shopify para que puedan implementar esta personalización por ti?
Perfecto, muchísimas gracias
Buenas Tardes,
Estoy usando el tema de shopify Prestige, y no me funciona ese código. He probado a introducirlo con el tema Dawn pero tampoco obtengo resultados. Podría decirme como hacerlo porfavor? gracias?
y yo no entiendo mucho pero estuve variando, normalmente se suele poner el de primera posición pero si quieres otro del menu tienes que cambiar el numero según la posición que tenga (1,2,3,etc). En el caso del color tienes que cambiar el color #, dependiendo de cual quieras yo he puesto uno Naranjito porque era para las rebajas.
.dla_dm_timer {
text-align: “center”;
}
#Details-HeaderMenu-1 .header__menu-item,
#HeaderMenu-MenuList-1 {
background-color: #ffcd82;
color: ;
}
#Details-menu-drawer-menu-item-1 .menu-drawer__menu-item,
#Details-menu-drawer-menu-item-1
.menu-drawer__inner-submenu
.menu-drawer__menu-item {
background-color: #ffcd82;
color: ;
}
Espero que te sirva 
