Ayuda
Iniciar sesión

Personaliza el estilo del pago

Si vendes productos en una tienda online, puedes personalizar el estilo de las páginas de pago en el checkout and accounts editor. Puedes agregar el logo de la empresa, cambiar los colores o elegir una fuente nueva para que el pago se adapte a tu marca.

Parte de la configuración de marca que elijas para las páginas de pago también se aplica a las new customer account pages.

En esta página

Consideraciones para personalizar el estilo del pago y de las cuentas de cliente

Antes de personalizar el estilo del pago, revisa las siguientes consideraciones:

  • El área de Configuraciones en la sección Checkout settings del panel de control se oculta hasta que elijas un plan y crees el primer producto.
  • Si estás en Shopify Plus, puedes usar la Checkout Branding API para realizar personalizaciones avanzadas de marca en el pago.
  • Si necesitas ayuda para personalizar el estilo del carrito y del pago, puedes contratar a un Shopify Partner. Más información sobre hiring a Shopify Partner.
  • Aunque quieras agregar mucho color y elementos a las páginas de pago, es mejor mantener un diseño simple. En estas páginas, los clientes ingresan la información de envío y de pago de los pedidos. Evita distracciones o dificultar la lectura. Elige colores de alto contraste e imágenes que no resten atención al texto.

Crea una paleta de colores para el pago y las cuentas de cliente

Puedes crear una paleta de colores para reutilizar rápidamente los colores en varias configuraciones del editor del pago y de las cuentas. Cuando cambias un color de la paleta, todas las configuraciones que lo usan se actualizan dinámicamente con el nuevo. También significa que no necesitas recordar los códigos hexadecimales si deseas usar un color más de una vez.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Paleta de colores, haz clic en + para seleccionar un color que desees agregar a la paleta.

  5. Opcional: para eliminar un color que ya no necesites de la paleta, haz lo siguiente:

    1. Haz clic en el color y luego en Eliminar color.
    2. Selecciona un color nuevo para reemplazar el que eliminaste dondequiera que se use en el pago.
    3. Haz clic en Confirmar.

  6. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Paleta de colores, toca + para seleccionar un color que desees agregar a la paleta.

  6. Opcional: para eliminar un color que ya no necesites de la paleta, haz lo siguiente:

    1. Toca el color y luego Eliminar color.
    2. Selecciona un color nuevo para reemplazar el que eliminaste dondequiera que se use en el pago.
    3. Toca Confirmar.

  7. Toca Guardar o ✓.

Uso del selector de color en el editor del pago y de las cuentas

Cuando personalices un campo en el editor del pago y de las cuentas que requiera un color, puedes usar el selector de color para elegir el que deseas. Allí, puedes seleccionar un color de cualquiera de estas formas:

  • Usa el control deslizante para cambiar el tono de los colores disponibles en la vista previa del selector.
  • Usa el campo hexadecimal para introducir el código de un color específico, como #0000FF para un azul puro estándar.
  • Usa Eye Dropper para elegir un color específico con el cursor desde cualquier parte de la pantalla.
  • Usa Grid Icon para reducir la cantidad de colores disponibles en la vista previa del selector a 40.

En la sección Paleta de colores se muestran todas las muestras de color que agregaste a la paleta de colores en el editor del pago y de las cuentas.

Si antes seleccionaste algún color de forma manual durante la sesión en el editor del pago y de las cuentas, también puedes elegir entre las muestras de color de uso reciente en Usados recientemente.

Personaliza los colores del encabezado

En la parte superior de cada página de pago y de la cuenta de cliente, un encabezado muestra el nombre de la tienda. Puedes cambiar el color de fondo de ese banner. Elige un color que combine con tu marca.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Encabezado, realiza cualquiera de las siguientes personalizaciones de color:

    • Usa la opción Fondo para establecer un color para el fondo del encabezado.
    • Usa la opción Énfasis para establecer un color para el ícono del carrito y los enlaces del encabezado.

  5. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Encabezado, realiza cualquiera de las siguientes personalizaciones de color:

    • Usa la opción Fondo para establecer un color para el fondo del encabezado.
    • Usa la opción Énfasis para establecer un color para el ícono del carrito y los enlaces del encabezado.

  6. Toca Guardar o ✓.

Puedes agregar el logo de la tienda a las páginas de pago. Es posible alinearlo a la izquierda, a la derecha o al centro del área del banner en estas páginas.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Logo, haz clic en el campo Imagen.

  5. Haz clic en Seleccionar de la biblioteca para elegir una imagen existente de tu biblioteca.

  6. Opcional: en la sección Logo, ajusta tu logo con las siguientes configuraciones:

    • Usa la opción Ancho para seleccionar el tamaño del logo en píxeles.
    • Usa la opción Alineación para elegir si tu logo se muestra a la izquierda, al centro o a la derecha del banner.

  7. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Logo, toca el campo Imagen.

  6. Toca Seleccionar de la biblioteca para elegir una imagen existente de tu biblioteca.

  7. Opcional: en la sección Logo, ajusta tu logo con las siguientes configuraciones:

    • Usa la opción Ancho para seleccionar el tamaño del logo en píxeles.
    • Usa la opción Alineación para elegir si tu logo se muestra a la izquierda, al centro o a la derecha del banner.

  8. Toca Guardar o ✓.

Agrega un color de fondo al área de contenido principal

Puedes agregar un color de fondo al área de contenido principal de las páginas de pago. Esta es el área donde los clientes ingresan su información de envío y de pago, así que asegúrate de que los campos se lean claramente sobre el fondo.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, haz clic en el ícono de engranaje para acceder a la barra lateral de configuración.

  4. En la sección Principal, haz clic en Color para abrir el selector de color y luego elige un color o ingresa un código hexadecimal.

  5. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Principal, toca Color para abrir el selector de color y luego elige un color o ingresa un código hexadecimal.

  6. Toca Guardar o ✓.

Cambia el color de los campos del formulario

Puedes cambiar el color de los campos del formulario en el pago. También puedes modificar el de los mensajes de error para que sean de color blanco o transparentes. Asegúrate de que el texto de los campos se pueda leer con claridad.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Campos de entrada, realiza cualquiera de las siguientes personalizaciones:

    • Para cambiar el color de los campos de entrada, ve a Entrada y haz clic en Transparente o Blanco.
    • Para cambiar el color de los mensajes de error, haz clic en el campo Error y selecciona un color.

  5. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Campos de entrada, realiza cualquiera de las siguientes personalizaciones:

    • Para cambiar el color de los campos de entrada, ve a Entrada y toca Transparente o Blanco.
    • Para cambiar el color de los mensajes de error, toca el campo Error y selecciona un color.

  6. Toca Guardar o ✓.

Agrega una imagen o un color de fondo al resumen del pedido

Cuando un cliente hace clic en Mostrar resumen del pedido en una página de pago, se muestra la lista de productos que está comprando. Puedes agregar una imagen o un color de fondo al resumen del pedido. En la vista previa del editor de temas, puedes hacer clic en Mostrar resumen del pedido para asegurarte de que el resumen del pedido se muestre como deseas.

Las imágenes más pequeñas se repiten vertical y horizontalmente en el fondo, como recuadros.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Resumen del pedido, haz clic en resumen del pedido.

  5. Agrega un color o una imagen de fondo:

    • Para agregar un color, haz clic en Fondo para abrir el selector de color y elige un color o introduce un código hexadecimal.
    • Para agregar una imagen, haz clic en Imagen > Seleccionar. Haz clic en Seleccionar de la biblioteca para elegir una imagen existente de tu biblioteca.

  6. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Resumen del pedido, toca resumen del pedido.

  6. Agrega un color o una imagen de fondo:

    • Para agregar un color, toca Fondo para abrir el selector de color y elige un color o introduce un código hexadecimal.
    • Para agregar una imagen, toca Imagen > Seleccionar. Toca Seleccionar de la biblioteca para elegir una imagen existente de tu biblioteca.

  7. Toca Guardar o ✓.

Cambia o elimina una imagen del resumen del pedido

Puedes cambiar o eliminar la imagen que agregaste al resumen del pedido.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Resumen del pedido, haz clic en resumen del pedido.

  5. Debajo de la imagen que quieres reemplazar, haz clic en Cambiar para seleccionar una de la biblioteca o explorar imágenes gratuitas.

  6. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Resumen del pedido, toca resumen del pedido.

  6. Debajo de la imagen que quieres reemplazar, toca Cambiar para seleccionar una de la biblioteca o explorar imágenes gratuitas.

  7. Toca Guardar o ✓.

Para quitar una imagen, haz clic en Cambiar > Quitar imagen. Esto no elimina la imagen de Shopify.

Cambia la fuente en la página de pago

Puedes seleccionar de una lista de fuentes para personalizar tus páginas de pago.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Tipografía, haz clic en el menú desplegable Encabezados o en el menú desplegable Cuerpo y luego selecciona una fuente.

  5. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Tipografía, toca el menú desplegable Encabezados o el menú desplegable Cuerpo y luego selecciona una fuente.

  6. Toca Guardar o ✓.

Cambia los colores de botones y acentos en la página de pago

Puedes cambiar el color de los botones y de los énfasis, como los enlaces en las páginas de pago. Si cambias los colores, asegúrate de que el texto se lea con claridad sobre los fondos del área de contenido principal y el resumen del pedido.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor del pago y de las cuentas, haz clic en Settings para acceder a la barra lateral de Configuración.

  4. En la sección Énfasis y botones, haz clic en el cuadro de color junto a Énfasis o Botones para abrir el selector de color; luego, elige un color o introduce un código hexadecimal.

  5. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Configuración.

  5. En la sección Acentos y botones, toca el cuadro de color junto a Acentos o Botones para abrir el selector de color; luego, elige un color o introduce un código hexadecimal.

  6. Toca Guardar o ✓.

Cambia el diseño de la pantalla de pago

De forma predeterminada, el diseño de la pantalla de pago de la tienda está configurado como pantalla de pago de una sola página. Desde el panel de control de Shopify, puedes alternar entre la pantalla de pago de una sola página y la de tres páginas. Revisa las differences between the one-page and three-page checkouts antes de cambiar el diseño de la pantalla de pago.

Cuando cambias el diseño de la pantalla de pago, la vista previa en el editor de pago y cuentas no se muestra en tiempo real. Después de guardar los cambios, ve a la pantalla de pago de la tienda online para ver el nuevo diseño.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, haz clic en el ícono de engranaje para acceder a la barra lateral de configuración.

  4. En la sección Diseño de la pantalla de pago, haz clic en el diseño actual para abrir las opciones de diseño.

  5. Haz clic en Pantalla de pago de una sola página o Pantalla de pago de tres páginas para configurar el diseño de la pantalla de pago.

  6. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar.

  4. En el editor de pago y cuentas, toca el ícono de engranaje para acceder a la barra lateral Configuración.

  5. En la sección Diseño de la pantalla de pago, toca Pantalla de pago de una sola página o Pantalla de pago de tres páginas para configurar el diseño de la pantalla de pago.

  6. Toca Guardar o ✓.

Administra el botón Comprar de nuevo

En la página de estado del pedido se muestra un botón Comprar de nuevo para que los clientes soliciten de nuevo los artículos que ya compraron.

Pasos:

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, haz clic en el ícono de Configuración.

  4. En la sección Botón Comprar de nuevo, activa o desactiva el botón.

Muestra de forma predeterminada el campo del código de descuento en dispositivos móviles

De forma predeterminada, cuando un cliente paga desde un dispositivo móvil, se ocultan el resumen del pedido y el campo del código de descuento. El cliente puede tocar Mostrar resumen del pedido para ver todos los detalles del resumen y mostrar el campo del código de descuento, y así agregar un código de descuento o un código de tarjeta de regalo al pedido.

Puedes cambiar el comportamiento predeterminado para que siempre se muestren el resumen del pedido y el campo del código de descuento cuando se realiza el pago en un dispositivo móvil. El cliente puede tocar Ocultar resumen del pedido para ocultar el campo del código de descuento.

Para acceder a esta configuración, el pago debe usar el three-page checkout layout.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, haz clic en el ícono de Secciones para acceder a la barra lateral Secciones.

  4. En la página Información, Envío o Pagos, haz clic en Resumen del pedido.

  5. Activa la configuración Mostrar siempre el campo del código de descuento.

  6. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en el pago que quieras personalizar.

  4. En el editor de pago y cuentas, toca Secciones.

  5. En la página Información, Envío o Pagos, toca Resumen del pedido.

  6. Activa la configuración Mostrar siempre el campo del código de descuento.

  7. Toca Guardar o ✓.

Agrega bloques a las páginas de pago

Puedes agregar funciones como banners personalizados o recompensas de lealtad a la experiencia de pago de los clientes usando bloques. Algunas apps de pago, incluidas las que personalizan las páginas de información, envío y pagos, están disponibles solo para tiendas con el plan Shopify Plus. Consulta checkout app availability cuando elijas una app para agregar al pago.

Puedes agregar bloques existentes directamente a secciones de las páginas usando la barra lateral Secciones o la barra lateral Apps.

Más información sobre customizing your checkout configurations with apps.

Agrega bloques desde la barra lateral Secciones

Puedes agregar a la página que estás viendo bloques de las apps que instalaste usando la barra lateral Secciones. Solo se muestran como opciones seleccionables los bloques que se pueden instalar en una página o sección.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, selecciona la página a la que quieres agregar una app y luego haz clic en Secciones para acceder a la barra lateral Secciones.

  4. Haz clic en ⊕ Agregar bloque en la sección a la que quieres agregar una app.

  5. Haz clic en el bloque que quieres agregar.

  6. Personaliza el bloque según sea necesario:

    • Para reordenar la ubicación del bloque, arrastra y suelta el bloque hacia arriba o hacia abajo en la lista de Secciones, o usa los botones de mover en la ventana de vista previa.
    • Haz clic en el bloque para configure any block settings.

  7. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en la configuración de pago que quieres personalizar.

  4. En el editor de pago y cuentas, selecciona la página a la que quieres agregar una app y luego toca Secciones.

  5. Toca ⊕ Agregar bloque en la sección a la que quieres agregar una app.

  6. Toca el bloque que quieres agregar.

  7. Personaliza el bloque según sea necesario:

    • Para reordenar la ubicación del bloque, arrastra y suelta el bloque hacia arriba o hacia abajo en la lista de Secciones, o usa los botones de mover en la ventana de vista previa.
    • Toca el bloque para configure any block settings.

  8. Toca Guardar o ✓.

Agrega bloques desde la barra lateral Apps

Puedes agregar a la página que estás viendo bloques de las apps que instalaste usando la barra lateral Apps. Cuando agregas un bloque, solo se muestran como opciones las páginas en las que se pueden instalar bloques específicos.

Más información sobre using the Apps sidebar in the checkout and accounts editor.

Pasos:

Escritorio

  1. En el panel de control de Shopify, ve a Configuración > Checkout.

  2. En la sección Configuraciones, haz clic en Personalizar junto a la configuración que quieres personalizar.

  3. En el editor de pago y cuentas, haz clic en Apps para acceder a la barra lateral Apps.

  4. Haz clic en ⊕ junto al bloque que quieres agregar.

  5. En el panel emergente Agregar a, haz clic en la página a la que quieres agregar el bloque.

  6. Personaliza el bloque según sea necesario:

  7. Haz clic en Guardar.

Móvil

  1. Desde la aplicación de Shopify, toca Menú y luego toca Configuración Configuración.

  2. En la sección Configuración de la tienda, toca Pago.

  3. En la sección Configuraciones, toca Personalizar en la configuración de pago que quieres personalizar.

  4. En el editor de pago y cuentas, toca Apps.

  5. Toca ⊕ junto al bloque que quieres agregar.

  6. En el panel emergente Agregar a, toca la página a la que quieres agregar el bloque.

  7. Personaliza el bloque según sea necesario:

  8. Toca Guardar o ✓.