Síntoma

En un teléfono móvil, el menú hamburguesa (las tres líneas que abren el menú) y el icono del carrito no aparecen en la parte superior de su tienda. Los iconos siguen ahí y siguen funcionando, pero tienen el mismo color que la barra que hay detrás, por lo que no se ven.

Causa

Suele ocurrir después de cambiar los colores de su plantilla. Un cambio puede dejar el fondo de la barra de cabecera móvil casi del mismo color que los iconos del carrito y del menú hamburguesa, y los iconos se funden con la barra. No hay nada roto ni falta nada: los iconos siguen presentes y funcionan, sencillamente no se ven.

Solución

Dé a la barra de cabecera móvil su propio color de fondo mediante un pequeño contenido personalizado del sitio.

1. Abra su tienda en ShopFactory.
2. Haga clic en el menú desplegable "Central" -> Custom Website contents (contenidos personalizados del sitio).
3. Haga clic en el botón + (Añadir) para añadir un NUEVO bloque html personalizado en el área 1 del sitio.
4. Arrastre el bloque de texto a la sección de descripción.
5. En la parte superior derecha de su nuevo bloque de texto (HC1 o HC2, según cuántos bloques tenga ya), haga clic en el icono EDIT (lápiz).
6. Cambie el nombre de identificación HTML a: Mobile header background
7. Copie y pegue este código en la ventana de contenido:

<style>
.ThemeVersion-11 .header.mobile .utils {
background: #747570;
}
</style>

8. Sustituya #747570 por el código hexadecimal del color que quiera para la barra. Elija un color distinto al de los iconos, por ejemplo el que usa en el resto de su cabecera.
9. Haga clic en OK y después en Finalizar.
10. Guarde su tienda y visualícela en un navegador externo, en un teléfono o en la vista de teléfono de su navegador.
11. Publique su tienda de nuevo para que el cambio esté en línea.

Notas

• Si su teléfono sigue mostrando el color anterior, actualice la página o borre la caché del navegador. Un cambio publicado puede tardar unos minutos en aparecer.
• El mismo bloque define el color de la barra de cabecera móvil en general, de modo que también puede usarlo para dar a la cabecera móvil exactamente el mismo color que la versión de escritorio de su sitio.

Artículos relacionados

• Cambiar el color del texto blanco sobre blanco o negro sobre negro (el apartado E trata de la barra del logotipo móvil)
• Añadir código HTML personalizado a una página o a todo el sitio