Usar el editor de promoción de marca en Checkout Blocks

Puedes usar el editor de promoción de marca en Checkout Blocks, impulsado por la Checkout Branding API, para personalizar la estética de las páginas de pago y cuentas sin tener que modificar código.

Puedes usar el editor de promoción de marca para editar los colors y los checkout elements de cualquier configuración de pago. Los cambios que hagas en el diseño del pago con el editor de promoción de marca se aplican a todas las páginas del pago, incluidas la página de agradecimiento, la página de estado del pedido y las nuevas páginas de cuentas de cliente.

Para abrir el editor de promoción de marca desde el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks y luego en Editor de promoción de marca.

Personaliza los colores del pago

En la sección Colores, puedes personalizar los colores base del pago. También puedes personalizar hasta 4 esquemas de colores que se aplican a secciones específicas cuando necesitas hacer ajustes más detallados al diseño. Puedes editar tipos de color, incluidos los colores de acento (para elementos interactivos, como enlaces) y los colores de marca (usados en elementos como los botones principal y secundario).

Pasos:

Personaliza los elementos del pago

En la sección Personalizaciones del editor de marca, puedes editar los siguientes elementos del pago:

• Favicon: Elige el ícono que se muestra a los clientes en la pestaña del navegador durante el pago.
• Global: Ajusta el radio de las esquinas para todos los elementos (campos de formulario, botones y tarjetas).
• Encabezado y logo: Selecciona la posición del encabezado en el pago y si mostrar la ruta de navegación, un enlace al carrito y un logo.
• Principal: Aplica esquemas de diseño al área de contenido principal del pago, incluidas las imágenes de fondo, los anchos de borde y los esquemas de colores.
• Resumen del pedido: Aplica esquemas de diseño a la barra lateral del pago que contiene el resumen del pedido del cliente, incluidas las imágenes de fondo, los anchos de borde y los esquemas de colores.
• Pie de página: Selecciona el ancho del pie de página en el pago y si mostrar las políticas de la tienda.
• Tipografía: Selecciona el tamaño de fuente y la familia tipográfica. Para hasta 3 niveles de encabezados, define el peso, el tamaño, el interletrado (kerning) y el uso de mayúsculas/minúsculas.
• Botones: Selecciona el relleno, los bordes y los estilos de los botones principal y secundario.
• Formularios: Personaliza los estilos de los campos del formulario de pago, como casillas de verificación, campos de texto y opciones seleccionadas de una lista.
• Miniaturas de producto: Ajusta los estilos de borde y el radio de las esquinas de las imágenes del producto en el pago.

Pasos:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. En la sección Personalizaciones, haz clic en cualquiera de los elementos que quieras personalizar, como Encabezado y logo.

4. Con las opciones de personalización disponibles, ajusta el elemento del pago como prefieras.

5. Haz clic en Guardar.

Cambiar entre configuraciones de pago

Cuando abres el editor de promoción de marca, editas por defecto la configuración de pago que se encuentra Activa actualmente. Sin embargo, puedes usar el editor de promoción de marca para cambiar la configuración de pago que quieras editar, además de crear configuraciones nuevas.

Obtén más información sobre la gestión de las configuraciones de pago activas y en borrador.

Pasos:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. Haz clic en el nombre de la configuración de pago actual para abrir un menú desplegable con una lista de la configuración activa y de cualquier configuración en borrador; luego, selecciona la configuración de pago que quieras personalizar:

   • Selecciona una configuración existente que quieras editar.
   • Haz clic en ⊕ Crear nueva configuración para ir a la configuración de Checkout del panel de control de Shopify.

Vista previa del pago

Puedes ver una vista previa de los cambios que hagas en el editor de marca en cualquier momento: selecciona la configuración de pago que quieres previsualizar y haz clic en Vista previa. El editor de pago y de cuentas se abre en otra pestaña con todos los cambios aplicados para que veas cómo se muestran en el pago.

Pasos:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. Realiza cualquier personalización que quieras en los colores o en los elementos del pago de la configuración.

4. Haz clic en Vista previa.

Exportar e importar configuraciones de pago

Puedes exportar e importar configuraciones de pago con archivos JSON.

Exportar una configuración de pago:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. Selecciona la configuración de pago a la que aplicaste personalizaciones con el editor de marca.

4. Haz clic en Más acciones > Exportar configuración.

La configuración de pago se descarga como un .json en el dispositivo local.

Importar una configuración de pago:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. Selecciona la configuración de pago a la que quieres aplicar el perfil de marca importado.

4. Haz clic en Más acciones > Importar configuración.

5. En el cuadro de diálogo Importar la marca del pago, sube el archivo JSON de marca:

   1. Haz clic en Agregar archivo.
   2. Selecciona el archivo JSON correspondiente desde el dispositivo local.
   3. Haz clic en Importar y continuar.

6. Revisa la configuración de personalización precargada. Modifícala según sea necesario.

7. Haz clic en Guardar.

Restablecer el estilo del pago al valor predeterminado

Cuando edites un color o un elemento del pago con el editor de marca, puedes restablecer su valor al predeterminado haciendo clic en Restablecer junto al color o elemento que cambiaste.

En cualquier momento, puedes restablecer toda la configuración de marca del pago a los valores predeterminados de Shopify. Al restablecer la configuración del pago, se eliminan todas las personalizaciones en todas las páginas del editor de marca. Esta acción no se puede deshacer.

Pasos:

1. Desde el panel de control de Shopify, ve a Aplicaciones > Checkout Blocks.

2. Haz clic en Editor de marca.

3. Selecciona la configuración del pago que quieres restablecer.

4. Haz clic en Restablecer valores predeterminados.

5. En el cuadro de diálogo ¿Restablecer estilos predeterminados?, haz clic en Continuar.