Cómo aplicar estilo a la página Finalizar compra

Alinea la página del área de pago con el diseño de tu sitio.

Última actualización: 15 de agosto de 2024

Dale estilo a la página del área de pago para que coincida con la estética de tu sitio. Puedes personalizar la alineación del encabezado y los colores del texto, el fondo y los botones. Estos cambios también se aplican a la página del área de pago del bloque de donaciones.

Para conocer las otras formas en que puedes personalizar tu página de pago, visita Personalizar tu experiencia de pago y Crear un sitio de Commerce accesible.

Nota

No es posible cambiar el texto de la página del área de pago en este momento.

Mira el video

Style the checkout page

  1. Abre el panel Páginas, desplázate hasta la parte inferior y haz clic en Páginas del sistema, luego haz clic en Pagar.
  2. Use style tweaks to customize different elements of the page.
  3. When you’re finished styling the checkout page, click Save.

Se muestra un banner que dice que el área de pago está desactivada. Esto significa que los cambios que realices aún no están visibles, aunque los clientes pueden seguir comprando tus productos mientras modificas el estilo de la página. Tus cambios no estarán visibles hasta que guardes la página.

Puedes ajustar:

  • Color de fondo
  • Mostrar el logo
  • Title Color - Change your Site Title color, if Show Site Logo is unchecked.
  • Color del encabezado
  • Color del borde del encabezado
  • Alineación del encabezado: muestra el título o el logotipo a la izquierda, en el centro o a la derecha del encabezado.
  • Color del botón: cambia los botones de la página, incluidos los botones Continuar y Canjear. No recomendamos cambiar el color a transparente o blanco. Como el texto del botón no puede cambiar, esto oculta el botón e impide que los clientes continúen con la transacción.
checkout-page-styles3.png

Nota

It's not possible to change the appearance of your site title on the checkout page.

Después de pagar

La página que se muestra después del área de pago depende de la compra del cliente.

Página de estado del pedido: productos físicos, digitales y de servicio

Si tu cliente compró un producto físico, digital o de servicio, se muestra la página de estado del pedido. Esta página incluye la mayoría de los detalles del pedido y la opción de crear una cuenta de cliente.Siempre tiene un fondo blanco y usa una fuente estándar. No es posible personalizar la página de estado del pedido en Estilos del sitio.Para obtener una vista previa de la página de estado del pedido, visita Cómo compran los clientes tus productos o haz un pedido de prueba con un tipo de producto compatible.

Consejo

Si la página de estado del pedido no aparece cuando haces un pedido de prueba para un tipo de producto compatible, es probable que sea porque agregaste inserción de código a tu sitio.Para obtener más información, visita Uso de inserción de código

Página de confirmación del pedido: suscripción, tarjetas regalo y membresías

Si tu cliente compró una suscripción, una tarjeta regalo o una membresía, aparece una página de confirmación de pedido más optimizada, que muestra el texto Pedido confirmado y el número de pedido. Esta página coincide con los estilos de tu sitio. Para obtener una vista previa de la página del pedido confirmado, haz un pedido de prueba con un producto compatible.

El estilo del texto de la página de pedido confirmado depende de la versión del sitio.

Usa los siguientes retoques para darle estilo a la página de pedido confirmado. Ten en cuenta que el tema cromático de la página de pedido confirmado es el mismo que el de tu página de error 404 predeterminada.

  • Fuente de Pedido confirmado: sigue Encabezado 1.
  • Color de Pedido confirmado: sigue Encabezado (extra grande).
  • Fuente de texto de Número de pedido y confirmación: sigue Párrafo 2.
  • Fuente de texto de Número de pedido y confirmación: sigue Párrafo (medio).
  • Fuente de "Tu compra incluye descargas": es el mismo que el de Encabezado 3
  • Color de "Tu compra incluye descargas": es el mismo que el de Encabezado (medio)

En todas las plantillas:

  • Texto de Pedido confirmado: sigue Encabezado 1.
  • Texto de "Número de pedido y confirmación": es el mismo que el del cuerpo del texto
  • Texto de "Tu compra incluye descargas": es el mismo que el de Encabezado 3

Para obtener más información sobre cómo cambiar las fuentes y los colores, visita Cómo realizar cambios de estilo.

Order confirmation page header content

No es posible agregar imágenes ni otro contenido a la página de pago. Sin embargo, en la versión 7.0, estas familias de plantillas muestran contenido de sus páginas 404 predeterminadas en páginas de confirmación de pedidos, carritos de compra y búsquedas:

  • Avenue
  • Farro
  • Five
  • Wexley
  • York

Para quitar contenido no deseado del encabezado en estas familias de plantillas, edita la página 404 predeterminadao crea una página 404 personalizada.

Próximos pasos

Now that you’ve adjusted the checkout page style, you can customize other elements of the checkout experience:

Para informarte mejor, consulta Personalizar la experiencia de finalización de compra.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Cómo aplicar estilo a la página Finalizar compra