Al terminar sabrás
- Reconocer cómo está organizado el Inspector del Checkout
- Colorear la pantalla, la barra superior y los campos
- Estilizar el resumen del pedido
En el panelTu Menú › Diseño del menú › Checkout
El Checkout es la última pantalla antes de enviar el pedido: aquí tu cliente deja sus datos, elige cómo recibirlo y cómo pagarlo, y confirma. Al entrar a la pestaña, el lienzo muestra el checkout con datos de ejemplo. El pedido llega a tu WhatsApp.
- El título de la tarjeta muestra la variante: Finalizar pedido · Una página.
- Apariencia general: fondos y bordes.
- Título del checkout y Títulos de sección.
- Campos del formulario.
- Resumen del pedido.
Los grupos del Checkout, en orden
Apariencia generalLos colores base de la pantalla.
Título del checkout y Títulos de secciónLa tipografía de «Confirmar pedido» y de «Tus datos», «Entrega» y «¿Cómo vas a pagar?».
Campos del formularioQué datos pides (siguiente lección).
Resumen del pedidoLo primero que ve el cliente al abrir el checkout.
Estilo del formularioCómo se ven los campos.
Entrega y factura fiscal, Métodos de pago, Datos de pago, Comprobante de pagoLos colores de las partes de entrega y pago (siguiente lección).
Mensajes y Botón de confirmaciónLos textos y el botón final (última lección del capítulo).
Apariencia general
Fondo generalEl color de fondo de toda la pantalla de checkout.
Fondo de la barra superiorEl color de la barra de arriba (el botón de volver y «Confirmar pedido»).
Fondo de camposEl fondo de los campos del formulario.
Borde de camposEl color de su borde.
Títulos
Título del checkout › Tipografía del títuloFuente, tamaño y peso de «Confirmar pedido». Es independiente de los títulos de sección: agrandar el título de la pantalla no agranda los de sección.
Títulos de sección › Tipografía de los títulos de secciónFuente, tamaño y peso de «Tus datos», «Entrega» y «¿Cómo vas a pagar?».
Resumen del pedido
Fondo del resumenEl color de fondo del bloque que abre el checkout.
Tipografía del resumenFuente, tamaño, peso y color del texto del resumen, con su propio color: ya no toma el de los campos.
OpcionalPon a prueba lo que aprendiste1 ejercicio
¿Algo no coincide con lo que ves en tu panel? Cuéntanos.