CSS personalizado

Guía práctica Todos los planes 2 min de lectura

Usa Hoja de estilo/CSS cuando los ajustes, las fuentes y los colores no sean suficientes: un efecto especial al pasar el cursor, el tamaño de fuente de un elemento o un pequeño arreglo del tema. El CSS se guarda con el menú y se agrega a tu tienda online al publicar.

Nota

El CSS personalizado requiere conocimientos básicos de CSS. Si prefieres no escribir código, contáctanos: te ayudamos gratis con pequeños cambios de estilo.

Agregar CSS personalizado

1. Abre la pestaña Avanzado

   En el editor de menús, haz clic en el icono Avanzado (</>) en la barra lateral izquierda (1).

   

   Abre la pestaña Avanzado (1) y escribe tu CSS en Hoja de estilo/CSS (2).

2. Agrega tu CSS

   Escribe o pega tu CSS en Hoja de estilo/CSS (2), sustituyendo el marcador //enter css custom here.

3. Guarda y publica

   Haz clic en Guardar y luego en Publicar. Recarga tu tienda online forzando la actualización para ver el resultado.

Apuntar a los elementos correctos

El CSS se agrega a la página tal cual y no se limita a este menú, así que acota tus selectores:

• Todos los menús: empieza con .gm-menu.
• Un menú: empieza con .gm-menu-<ID>. Para encontrar el ID, haz clic derecho en el menú de tu tienda online y elige Inspeccionar.
• Un elemento: dale un Nombre de clase adicional en la sección Avanzado de los ajustes del elemento (consulta Editar un elemento de menú) y usa esa clase.

Por ejemplo, para poner en negrita y en rojo un elemento con el nombre de clase adicional sale-item:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

La pestaña Avanzado también incluye Disponibilidad por mercado, que limita el menú a los mercados seleccionados; consulta Mostrar menús por mercado.

Solución de problemas

Mi CSS no tiene efecto

• Comprueba que hiciste clic en Publicar después de guardar.
• Los estilos de la propia app suelen usar !important, así que tu regla puede necesitarlo también.
• Busca errores tipográficos, como una } que falta: un solo error puede impedir que funcionen las reglas que van después.

Páginas relacionadas

• Ajustar los colores del menúDefine los colores de la barra del menú, los submenús, las pestañas, las etiquetas de producto y el botón de agregar al carrito.
• Ajustar las fuentes del menúElige la familia tipográfica, el grosor y el tamaño de cada parte del menú.
• Editar un elemento de menúCambia el título, el enlace, el icono, los colores, la insignia, el submenú y la visibilidad de un elemento, o duplícalo, muévelo y elimínalo.

¿Te ha sido útil?

Informar de un problema