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

Requisito del plan

The Checkout Blocks branding editor está disponible solo para comerciantes con plan de Shopify Plus.

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

Puedes usar el editor de promoción de marca a fin de modificar los colores y elementos de pago para cualquier configuración de la pantalla de pago. Los cambios que realices en el diseño de pago con el editor de promoción de marca se aplican a todas las páginas de la pantalla de pago, incluidas la de agradecimiento, la de estado del pedido y las de cuentas de cliente nuevas.

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

Personalizar los colores de la pantalla de pago

En la sección Colores, puedes personalizar los colores base de la pantalla de pago. También puedes personalizar hasta cuatro esquemas de colores que se apliquen a secciones individuales cuando desees hacer ediciones más detalladas al diseño. Puedes editar los tipos de colores, incluidos los colores de acento (para elementos interactivos, como enlaces) y los colores de la marca (usados para los elementos, como botones principales y secundarios).

Pasos:

Customize global colors

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. En la sección Colores, haz clic en Colores globales.

4. Para anular cualquier color existente de la pantalla de pago, en la sección Colores globales, haz clic en el ícono ⊕ y selecciona el color que desees mediante cualquiera de las siguientes acciones:

   • Usa el selector de color para seleccionar uno.
   • Escribe el código de color hexadecimal en el campo disponible.

5. Haz clic en Guardar.

Customize color schemes

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. En la sección Colores, haz clic en Esquema 1, Esquema 2, Esquema 3 o Esquema 4 para personalizar un esquema de colores específico.

4. Selecciona cualquiera de los siguientes componentes que desees personalizar:

   • Colores principales
   • Controles de formulario
   • Botón principal
   • Botón secundario

5. En la sección Base, haz clic en el ícono ⊕ junto al tipo de color que quieras personalizar y selecciona el color que desees mediante cualquiera de las siguientes acciones:

   • Usa el selector de color para seleccionar uno.
   • Escribe el código de color hexadecimal en el campo disponible.

6. Opcional: Si estás editando el esquema para los componentes Controles de formulario, Botón principal o Botón secundario, también puedes personalizar los colores para el comportamiento de interacción Al seleccionar o Al pasar el cursor. Haz clic en el ícono ⊕ junto al tipo de color que quieras personalizar y selecciona el color que desees mediante cualquiera de las siguientes acciones:

   • Usa el selector de color para seleccionar uno.
   • Escribe el código de color hexadecimal en el campo disponible.

7. Haz clic en Guardar.

Personalizar los elementos de la pantalla de pago

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

• Favicon: elige el ícono que se muestra a los clientes en la pestaña del navegador durante el proceso de pago.
• Global: ajusta el radio de esquina para todos los elementos (entradas de formularios, botones y tarjetas).
• Encabezado y logo: selecciona la posición del encabezado en la pantalla de pago, así como si se deben mostrar las rutas, un enlace al carrito y un logo.
• Principal: aplica esquemas de diseño al área de contenido principal de la pantalla de pago, incluyendo imágenes de fondo, anchos de borde y esquemas de colores.
• Resumen del pedido: aplica esquemas de diseño a la barra lateral de la pantalla de pago que contiene el resumen del pedido del cliente, que incluye imágenes de fondo, anchos de borde y esquemas de colores.
• Pie de página: selecciona el ancho del pie de página en la pantalla de pago, así como si se muestran las políticas de la tienda.
• Tipografía: selecciona el tamaño de fuente y la familia de fuentes, así como el grosor de la fuente, el tamaño, el kerning y el uso de mayúsculas o minúsculas para un máximo de tres niveles de encabezados.
• Botones: selecciona el relleno, los bordes y los estilos de los botones principales y secundarios.
• Formularios: personaliza los estilos para las entradas de los formularios de la pantalla de pago, como casillas de verificación, campos de texto y opciones seleccionadas de una lista.
• Miniaturas del producto: ajusta los estilos de borde y radio de esquina para las imágenes del producto en la pantalla de pago.

Pasos:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. En la sección Personalizaciones, haz clic en cualquiera de los elementos que desees personalizar, como encabezado y logo.
4. Mediante las opciones de personalización disponibles, ajusta el elemento de la pantalla de pago según tu preferencia.
5. Haz clic en Guardar.

Cambiar las configuraciones de la pantalla de pago

Al abrir el editor de promoción de marca, estás editando la configuración de la pantalla de pago que actualmente está activa de forma predeterminada. Sin embargo, puedes cambiar la configuración de la pantalla de pago que desees editar con el editor de promoción de marca, así como crear nuevas configuraciones de la pantalla de pago.

Obtén más información sobre cómo gestionar las configuraciones de la pantalla de pago activa y preliminar.

Pasos:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. Haz clic en el nombre de la configuración de la pantalla de pago actual para abrir un menú desplegable que contiene una lista de la configuración activa y las configuraciones preliminares, y selecciona la configuración de la pantalla de pago que desees personalizar:
   • Selecciona una configuración existente que desees editar.
   • Haz clic en ⊕ Crear nueva configuración para que se te redirija a la opción de configuración Pantalla de pago del panel de control de Shopify.

Obtener una vista previa de la pantalla de pago

Puedes obtener una vista previa de los cambios que realices en el editor de promoción de marca en cualquier momento si seleccionas la configuración de la pantalla de pago de la que desees obtener una vista previa y haces clic en Vista previa. El editor de pantalla de pago y cuentas se inicia en una pestaña aparte con todos los cambios aplicados para que puedas obtener una vista previa de cómo se muestran en la pantalla de pago.

Pasos:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. Realiza las personalizaciones de los colores o elementos de la configuración de la pantalla de pago que desees ajustar.
4. Haz clic en Vista previa.

Exportar e importar las configuraciones de la pantalla de pago

Puedes exportar e importar las configuraciones de la pantalla de pago mediante los archivos JSON.

Exporta una configuración de la pantalla de pago:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. Selecciona la configuración de la pantalla de pago con las personalizaciones que se le aplican mediante el editor de promoción de marca.
4. Haz clic en Más acciones > Exportar configuración.

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

Importa una configuración de la pantalla de pago:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. Selecciona la configuración de la pantalla de pago a la que desees aplicar el perfil de promoción de marca importado.
4. Haz clic en Más acciones > Importar configuración.

5. En el cuadro de diálogo Importar promoción de marca de pantalla de pago, sube el archivo JSON de promoción de marca:

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

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

7. Haz clic en Guardar.

Restablecer el estilo de la pantalla de pago al valor predeterminado

Al modificar un color o un elemento de la pantalla de pago con el editor de promoción de marca, puedes restablecer el valor específico a su configuración predeterminada si haces clic en Restablecer junto al color o elemento que cambiaste.

En cualquier momento, puedes restablecer toda la promoción de marca de la configuración de la pantalla de pago a los valores predeterminados de Shopify. Si se restablece la configuración de la pantalla de pago, se borrarán todas las personalizaciones en todas las páginas del editor de promoción de marca. Esta acción no puede deshacerse.

Pasos:

1. En el panel de control de Shopify, haz clic en Aplicaciones > Checkout Blocks.
2. Haz clic en Editor de promoción de marca.
3. Selecciona la configuración de la pantalla de pago que desees restablecer.
4. Haz clic en Restablecer al valor predeterminado.
5. En el cuadro de diálogo ¿Restablecer a los estilos predeterminados?, haz clic en Continuar.