Visualización del ícono del carrito de compras

Pasos para modificar el estilo del carrito de compras de tu tienda u ocultarlo.

Última actualización: 26 de febrero de 2024

Todos los sitios admiten un ícono del carrito de compras que muestra el número de artículos en el carrito de un cliente y dirige a la página de pago.

Ajustar el estilo del ícono

El estilo del ícono del carrito de compras depende de la versión del sitio.

El ícono del carrito de compras se muestra como un carrito en el encabezado del sitio de forma predeterminada.

Para habilitar el icono del carrito y aplicarle estilo:

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
  3. Haz clic en Agregar elementos.
  4. Activa la opción Carrito.
  5. Haz clic en cualquier lugar por fuera del editor.
  6. Haz clic en el ícono del carrito en el encabezado y luego en el icono del lápiz.
  7. Selecciona el Estilo.
    • Si eliges Ícono, selecciona un ícono de carrito, cesta o bolsa para que aparezca en el encabezado y luego haz clic en Atrás para establecer el tamaño del ícono Carrito.
    • Si eliges Texto, aparece texto personalizado de hasta 10 caracteres en lugar de un ícono, que coincide con los estilos de los enlaces de navegación.
  8. En Borde, habilita un borde que rodee el ícono eligiendo una forma de borde y, a continuación, Delineado o Sólido para cambiar el diseño. Si eliges Delineado, configura el Grosor del delineado.
  9. Para que aparezca 0 junto al carrito antes de que los clientes agreguen algo, activa la opción Mostrar "0" en el carrito.
  10. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Icono de carrito de texto en dispositivos móviles

Cuando el icono de tu carrito está configurado en Texto, aparece como el número de artículos en el carrito en dispositivos móviles. El sitio mostrará inicialmente (0) en el encabezado como el icono del carrito. Cambiar el botón de alternancia Mostrar 0 en el carrito no afecta cómo aparece esto en los dispositivos móviles.

La visualización del ícono del carrito de compras depende de la plantilla. Ten en cuenta:

  • En la mayoría de las plantillas, el ícono del carrito aparece automáticamente en todas las páginas después de que un cliente añade un artículo a su carrito.
  • En algunas plantillas, el ícono es una parte permanente del encabezado.
  • El carrito no se muestra si está habilitada la opción Compra rápida.
  • Si no aparece tu carrito, consulta nuestros consejos para la solución de problemas.

Mostrar por plantilla

Estas familias de plantillas tienen el botón clásico:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford: se muestra debajo de los elementos del encabezado
  • Five
  • Flatiron: se muestra debajo del encabezado
  • Forte: se muestra en la esquina inferior derecha.
  • Galapagos
  • Ishimoto
  • Momentum: se muestra en la parte superior izquierda si la barra de navegación está en la parte inferior o en la parte inferior izquierda si está en la parte superior.
  • Montauk
  • Native
  • Pacific: es un rectángulo y puedes establecer los colores y la fuente. El botón tiene el mismo aspecto en un dispositivo móvil (sin barra de navegación).
  • Supply: es un rectángulo.
  • Wells: es un rectángulo.
  • Wexley

Estas familias de plantillas tienen opciones avanzadas:

  • Brine
  • Skye
  • Tremont
  • Farro
  • York

Consejo

otros elementos a los que puedes dar estilo son el botón Añadir al carrito, la página de tienda y el botón Continuar comprando.

Botón clásico

La mayoría de las plantillas admiten el botón clásico, que muestra el ícono del carrito de compras en un botón negro en forma de píldora en la esquina superior derecha. Aparece automáticamente en todas las páginas después de que un cliente añade un artículo a su carrito. No tiene opciones de estilo.

classic-button-desktop.png

En un dispositivo móvil, el botón clásico aparece como una barra de navegación en la parte inferior:

classic-button-mobile.png

Opciones de estilo avanzadas

Puedes personalizar el estilo del carrito de compras en el panel Estilos del sitio en estas familias de plantillas:

Familia de plantillas Visualización en un equipo Visualización en dispositivos móviles

Brine

Se muestra como un carrito, texto o bolsa en el encabezado. Se puede ocultar. Más información.

Estilos para dispositivos móviles separados. Se muestra en la barra de navegación superior o inferior como un carrito, texto o bolsa. Se puede ocultar. Más información.

Farro

Se muestra como un carrito, texto o bolsa en el encabezado. Se puede ocultar. Más información.

Estilos para dispositivos móviles separados. Se muestra en la barra de navegación superior o inferior como un carrito, texto o bolsa. Se puede ocultar. Más información.

Pacific

Se muestra en un botón rectangular en la esquina superior derecha. Solo contiene texto. Puedes personalizar los colores. No se puede ocultar. Más información.

Se ve igual que en un equipo de escritorio y se muestra en la esquina inferior derecha. No se puede ocultar. Más información.

Skye

Se muestra como un ícono de bolsa en la esquina superior derecha después de agregar una página de tienda a tu sitio. No se puede ocultar. Obtén más información.

Se ve igual que en un equipo de escritorio y se muestra en la parte inferior de una barra de navegación. Más información.

Tremont

Se muestra como texto con la navegación o como un ícono de bolsa o carrito en la esquina superior derecha. Se puede ocultar. Más información.

Se ve igual que en un equipo de escritorio. Se muestra en la parte superior derecha (ícono) o debajo de los enlaces de navegación al pulsar el ícono de menú (texto). Si está oculto en un equipo de escritorio, también lo está en un dispositivo móvil. Más información.

York

Se muestra como un carrito, texto o bolsa en el encabezado. Se puede ocultar. Más información.

Estilos para dispositivos móviles separados. Se muestra debajo de los enlaces de navegación al pulsar el ícono de menú. Se puede ocultar. Más información.

Ocultar el ícono del carrito de compras

Cómo ocultar el ícono del carrito de compras depende de la versión del sitio.

Para ocultar el ícono del encabezado del sitio:

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
  3. Haz clic en Agregar elementos.
  4. Desactiva la opción Carrito.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Si ocultas el ícono del carrito de compras, aparece un ícono del carrito en la parte inferior de la página cuando alguien agrega un producto a su carrito. Para cambiar el color del ícono:

  1. Al editar una página, abre Estilos del sitio y haz clic en Colores.
  2. En Botón, establece los colores de FondoTexto. El carrito de compras sigue el tema cromático predeterminado de tu sitio.
  3. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

No es posible desactivar el ícono ni cambiar su tamaño y forma.

Sin el ícono del carrito de compras, los clientes no podrán encontrar la página de pago por su cuenta. Solo debes ocultarlo si usas Compra rápidao si vendes productos de suscripción. En estos casos, los clientes son dirigidos a la página de pago automáticamente después de seleccionar un producto.

Puedes utilizar el ajuste Estilos del sitio que se indica a continuación para ocultar o mostrar el carrito de compras en estas familias de plantillas:

  • Brine: posición del carrito
  • Farro: posición del carrito
  • Tremont: visualización del enlace del carrito
  • York: posición del carrito
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.

Visualización del ícono del carrito de compras