Cómo configurar el estilo global de tu tienda

 Hoy cubriremos una poderosa herramienta para el diseño de tu aplicación: el menú de estilo global. El estilo global te permite administrar el diseño general de tu aplicación desde un solo menú. Los colores, fuentes y efectos seleccionados en este menú se aplican a cada sección de tu aplicación. Pero ten cuidado, cada modificación realizada desde este menú se aplicará a todas las secciones de tu aplicación. En el menú Contenido y diseño> Diseño> Diseño general, haz clic en Estilo global.

Lo primero es seleccionar un tema de color. Un tema de color es una combinación de colores que armonizan perfectamente. El estilo global ofrece una biblioteca de temas de color. Para navegar por la biblioteca, haz clic en Modificar. Como puedes ver, tengo muchas opciones. Si prefiero cambiar mi tema real, haz clic en modificar, desplázate hasta la parte inferior de la página y haz clic en crear un tema de color, luego selecciona tus colores.

Ahora pasemos a los teléfonos. Hay una jerarquía para mostrar texto en la aplicación. Se utilizan 8 niveles para mostrar títulos, subtítulos, párrafos y texto. Defino el tamaño de la fuente, la fuente para cada nivel. Dependiendo de la fuente elegida, también puedo elegir la opción. Ahora los botones. Para las secciones de tu aplicación que invitan a los usuarios a realizar una acción, seleccionaré la forma del botón que quiero aplicar.

Puedo obtener una vista previa del resultado haciendo clic aquí. Hay varios niveles de jerarquía con respecto a los botones de tu aplicación. El diseño del botón depende del tema de color de su aplicación. Para respetar la armonía, hay varias variaciones disponibles para cada tema. Estos son los tres tipos diferentes de diseño para cada nivel de jerarquía:

Nivel 1 => fondo de color del botón sin contorno

Nivel 2 => fondo transparente del contorno del botón y texto en color

Nivel 3 => fondo transparente del botón sin contorno

Ahora los efectos de desplazamiento sobre las imágenes. Esto solo está disponible en PWA. Finalmente los elementos adicionales como el icono de atrás que aparece en el encabezado, mientras navegas por tu tienda. Guardo la modificación. No olvides que todas estas modificaciones anularán el diseño real de tu tienda, incluidas las secciones desenganchadas.

Echemos un vistazo, sí, me gusta mucho el aspecto de mi tienda.

¡Nos vemos en otro tutorial!