Personalizar el estilo de tu pantalla de pago

Esta página fue impresa el Dec 03, 2023. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/checkout-settings/checkout-style?utm_campaign=guru+ask&utm_medium=forum&utm_source=social.

Si vendes tus productos a través de una tienda en línea, entonces puedes personalizar el estilo de tus pantallas de pago en el editor de temas. Agrega el logo de tu empresa, cambia los colores o elige una nueva fuente, para que la pantalla de pago concuerde con el estilo de tu negocio.

Aunque quieras agregar mucho colorido a tu pantalla de pago para que sea llamativa, lo mejor es mantener un diseño simple. Tus clientes utilizan esta página para introducir los datos de envío y pago de sus pedidos, por lo que no es prudente distraerlos o dificultar la lectura de la información. Selecciona colores con alto contraste e imágenes que no le resten atención a las palabras de la página.

En esta página

Subir una imagen de fondo para el banner

En la parte superior de cada pantalla de pago, se muestra el nombre de tu tienda en un banner. Puedes cambiar la imagen de fondo de dicho banner. Selecciona una imagen acorde con tu marca. Por ejemplo, si vendes joyería, entonces una imagen con brazaletes o aretes puede ser una buena opción para tu página. Las imágenes del banner lucen mejor con una resolución 1000 x 400 pixeles.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. En la sección Banner, haz clic en Subir imagen o selecciona una imagen que ya hayas subido a tu biblioteca.
  6. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Banner, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca.
  7. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Banner, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca.
  7. Toca Guardar.

Puedes agregar el logo de tu tienda a la pantalla de pago. Si estás utilizando una imagen de banner, entonces el logo aparece sobre ésta. Puedes ubicar el logo a la izquierda, derecha, o en el centro del área del banner en las pantallas de pagos.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. En la sección Logo, haz clic en Subir imagen o selecciona una imagen que ya hayas subido a tu biblioteca.
  6. Selecciona una posición para el logo.
  7. Selecciona un tamaño para el logo.
  8. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Logo, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca.
  7. Selecciona una posición para el logo.
  8. Selecciona un tamaño para el logo.
  9. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Logo, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca.
  7. Selecciona una posición para el logo.
  8. Selecciona un tamaño para el logo.
  9. Toca Guardar.

Agregar una imagen o un color de fondo al área de contenido principal

Puedes agregar una imagen o color de fondo al área de contenido principal de la pantalla de pago. Esta es el área en la que tus clientes introducen sus datos de envío y de pago, así que asegúrate de que se puedan leer los campos claramente en el fondo. Sólo puedes agregar una imagen o un color de fondo, no ambos.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.

  5. En la sección Área de contenido principal, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, haz clic en el cuadro al lado de Color de fondo para abrir el selector de color y escoge un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, haz clic en Subir imagen, o selecciona una imagen que ya hayas subido a tu biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  6. Haz clic en Guardar.

  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.

  6. En la sección Área de contenido principal, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, toca el cuadro junto a Color de fondo para abrir el selector de color y elige un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  7. Toca Guardar.

  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.

  6. En la sección Área de contenido principal, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, toca el cuadro junto a Color de fondo para abrir el selector de color y elige un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  7. Toca Guardar.

Cambiar el color de los campos del formulario

Puedes cambiar el color de los campos para que sean blancos o transparentes. Puedes hacer que los campos sean transparentes para que una imagen de fondo sea visible. Asegúrate de poder leer claramente el texto en los campos.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. En la sección Área de contenido principal, haz clic en el menú desplegable Campos del formulario para seleccionar el color que desees.
  6. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Área de contenido principal, toca el menú desplegable Campos del formulario para seleccionar el color que desees.
  7. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Área de contenido principal, toca el menú desplegable Campos del formulario para seleccionar el color que desees.
  7. Toca Guardar.

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

Cuando un cliente hace clic en Mostrar resumen del pedido en una pantalla de pago, aparecerá un listado de los productos que está comprando. Puedes agregar una imagen o color de fondo al resumen del pedido Haz una vista previa de tus opciones para que puedas verificar si estás conforme con la apariencia del resumen del pedido. Puedes hacer clic en Mostrar resumen del pedido en la vista previa del editor de temas.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.

  5. En la sección Resumen del pedido, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, haz clic en el cuadro al lado de Color de fondo para abrir el selector de color y escoge un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, haz clic en Subir imagen, o selecciona una imagen que ya hayas subido a tu biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  6. Haz clic en Guardar.

  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.

  6. En la sección Resumen del pedido, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, toca el cuadro junto a Color de fondo para abrir el selector de color y elige un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  7. Toca Guardar.

  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.

  6. En la sección Resumen del pedido, agrega un color o una imagen de fondo.

    • Si vas a agregar un color, toca el cuadro junto a Color de fondo para abrir el selector de color y elige un color o ingresa un código hexadecimal.
    • Si vas agregar una imagen, toca Subir imagen o selecciona una imagen que ya subiste a la biblioteca. Las imágenes más pequeñas se repetirán de forma vertical y horizontal en el fondo, como recuadros.

  7. Toca Guardar.

Cambiar o eliminar una imagen de la página de pago

Puedes cambiar o eliminar cualquiera de las imágenes que hayas agregado a las pantallas de pagos.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. Debajo de la imagen que deseas reemplazar, haz clic en Actualizar y sube una imagen o selecciona una de tu biblioteca.
  6. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. Debajo de la imagen que deseas reemplazar, toca Actualizar y sube una imagen o selecciona una de la biblioteca.
  7. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. Debajo de la imagen que deseas reemplazar, toca Actualizar y sube una imagen o selecciona una de la biblioteca.
  7. Toca Guardar.

Para eliminar una imagen haz clic en Eliminar debajo de la imagen. Esta acción no borra la imagen de Shopify.

Agrega texto alternativo a tus imágenes

Cuando estés conforme con las imágenes que has seleccionado para tus pantallas de pago, es una buena idea agregar alt text o texto alternativo a las imágenes. Este texto puede ayudar con la accesibilidad y la optimización de motores de búsqueda (SEO). Lee más información sobre la optimización de motores de búsqueda.

Pasos

  1. Debajo de una imagen, haz clic en Actualizar, luego selecciona Editar imagen.
  2. Ingresa el alt text para la imagen. Redacta un título corto y descriptivo para la imagen.
  3. Haz clic en Guardar.

Cambiar la fuente de la página de pago

Puedes personalizar tus pantallas de pagos, seleccionando de una lista de fuentes disponibles para ello. Sin embargo, no puedes cambiar el color del texto en la pantalla de pago.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. En la sección Tipografía, haz clic en el menú desplegable Encabezados o en el menú desplegable Cuerpo y luego selecciona una fuente.
  6. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Tipografía, toca el menú desplegable Encabezados o el menú desplegable Cuerpo y luego selecciona una fuente.
  7. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Tipografía, toca el menú desplegable Encabezados o el menú desplegable Cuerpo y luego selecciona una fuente.
  7. Toca Guardar.

Cambiar los colores de los botones y el texto resaltado de la página de pago

Puedes cambiar el color de los botones, mensajes de error y otros indicadores, como enlaces, en las pantallas de pago. Si cambias los colores, asegúrate que el texto se pueda leer claramente contra el fondo del área de contenido principal y del resumen del pedido.

Pasos

  1. Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
  2. En la sección Estilo de la pantalla de pago, haz clic en Personalizar pantalla de pago para abrir el editor de temas.
  3. En el editor de temas, haz clic en el ícono de engranaje para acceder a la configuración del tema.
  4. Haz clic en Pantalla de pago.
  5. En la sección Colores, haz clic en el cuadro de color junto a Resaltados, Botones o Errores para abrir un selector de color. A continuación, elige un color o ingresa un código hexadecimal.
  6. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Colores, toca el cuadro de color junto a Resaltados, Botones o Errores para abrir un selector de color. A continuación, elige un color o ingresa un código hexadecimal.
  7. Toca Guardar.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, Toca Pago.
  3. En la sección Estilo de la pantalla de pago, toca Personalizar pantalla de pago para abrir el editor de temas.
  4. En el editor de temas, toca el ícono de engranaje para acceder a la configuración del tema.
  5. Toca Pantalla de pago.
  6. En la sección Colores, toca el cuadro de color junto a Resaltados, Botones o Errores para abrir un selector de color. A continuación, elige un color o ingresa un código hexadecimal.
  7. Toca Guardar.

Agregar funciones a la página posventa en la pantalla de pago

Puedes agregar funciones como encuestas a clientes u ofertas adicionales en la pantalla de pago del cliente mediante aplicaciones posventa. Estas aplicaciones agregan contenido después de que el cliente completa su pago pero antes de que aparezca la página de confirmación del pedido.

Para agregar funciones a tu página posventa, debes instalar y configurar una aplicación de pago y luego seleccionar la aplicación que deseas usar en la página posventa en la configuración de tu pantalla de pago.

Para agregar funciones posventa, puedes usar solo una aplicación de pago a la vez. Si has instalado más de una aplicación con funciones posventa, puedes seleccionar la aplicación que deseas usar en la configuración de tu pantalla de pago.

Instalar una aplicación de pago para agregar funciones posventa

Para agregar funciones a tu página posventa, debes usar una aplicación externa compatible con las funciones posventa en la pantalla de pago.

Si necesitas ayuda con una aplicación externa, debes ponerte en contacto con el desarrollador de la aplicación.

Pasos

  1. Ve a la Shopify App Store y busca la aplicación posventa que se adapta a tu negocio.
  2. Haz clic en Agregar aplicación. Se te solicitará que inicies sesión en tu cuenta de Shopify si aún no lo has hecho.
  3. Haz clic en Instalar aplicación.
  4. Ve a la sección Aplicaciones del panel de control de Shopify y toca el nombre de la aplicación de pago.
  5. Introduce los ajustes de configuración necesarios.

Seleccionar una aplicación para usarla en la página posventa

Después de instalar y configurar una aplicación de pago, debes seleccionar esa aplicación que deseas usar en la página posventa en la configuración de tu pantalla de pago.

También puedes cambiar la aplicación que deseas usar en la configuración de tu pantalla de pago.

Pasos

  1. Desde tu panel de control de Shopify, haz clic en Configuración.
  2. Haz clic en Pantalla de pago.
  3. En la sección Página posventa, selecciona la aplicación de pago que deseas usar.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis