Carrito

Enlaces destacados

1. Documentación de Company XYZ sobre el bloque Custom liquid
2. Documentación de Company XYZ sobre los ajustes de espaciado de sección
3. Documentación de Company XYZ sobre los ajustes de fondos de sección
4. Documentación de Company XYZ sobre los ajustes de separadores
5. Documentación de Company XYZ sobre los ajustes de anchos de diseño
6. documentación de Shopify sobre secciones y bloques

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Esta sección muestra los artículos del carrito cuando se han añadido productos y cambia al mensaje de carrito vacío cuando el carrito está vacío. Úsela para perfeccionar el estilo y el diseño de la página del carrito, y para añadir contenido personalizado o impulsado por apps cuando contribuya al proceso de compra.

Ajustes de color

Estos controles de color le permiten anular el estilo de la página del carrito sin cambiar los colores generales de su tema. Son especialmente útiles para mejorar el contraste, separar los artículos de línea con más claridad o hacer que los encabezados y las etiquetas de apoyo sean más fáciles de revisar de un vistazo.

Mantenga primero legibles los colores del texto y de los iconos, y luego use los colores del subtítulo y del borde de forma más sutil para estructurar el contenido. Los pequeños ajustes suelen funcionar mejor que los cambios de color drásticos en una página orientada a la utilidad como el carrito.

Si añade un fondo o una superposición personalizados, vuelva a comprobar el contraste de los detalles del artículo, los totales y las acciones para que el carrito siga siendo fácil de usar.

Tipos de bloque admitidos

1. App
2. Custom liquid

App

Los bloques de app permiten que las apps instaladas coloquen funciones o mensajes dentro de la sección del carrito. Úselos para añadidos relacionados con el carrito, como incentivos, avisos u otras herramientas que deban quedar cerca del contenido del carrito. Para el comportamiento del bloque en el editor, consulte documentación de Shopify sobre secciones y bloques

Sea selectivo con la ubicación. Demasiados bloques añadidos pueden hacer que el carrito parezca más largo y distraer de revisar los artículos y seguir adelante.

Liquid personalizado

El Liquid personalizado añade contenido personalizado avanzado dentro de la sección del carrito.

Úselo cuando necesite mensajes flexibles, fragmentos de apps u otro contenido personalizado que no esté cubierto por los ajustes integrados del carrito. Este bloque también incluye su propio ajuste de visibilidad, lo cual resulta útil cuando desea que el contenido de apoyo aparezca solo en móviles o solo en escritorio.

Consejo

Si el contenido personalizado es útil pero no esencial, considere ocultarlo en móviles para mantener la página del carrito más corta y fácil de revisar de un vistazo.

Ajustes estándar de sección

Ajustes de espaciado

Los ajustes de espaciado controlan el espacio por encima y por debajo del contenido del carrito en escritorio y en dispositivos móviles. Úselos para que la página se sienta más abierta o para reducir el espacio adicional cuando su carrito ya incluya mensajes más largos o bloques añadidos.

El espaciado independiente para móviles es especialmente útil porque las páginas del carrito pueden hacerse largas rápidamente. Reducir el espacio vertical en pantallas más pequeñas puede hacer que la página se sienta más eficiente sin cambiar la presentación en escritorio.

Ajustes de fondo de sección

Los ajustes de fondo de sección le permiten añadir un color de fondo, un degradado, una imagen, un video y una superposición a la sección del carrito. Estos ajustes se utilizan mejor cuando desea que la página del carrito se sienta más coherente con la marca sin perder legibilidad en el contenido.

Las opciones de degradado anulan las opciones de color plano, y los degradados de superposición anulan los colores de superposición. También puede definir medios de fondo distintos para móviles, lo que ayuda cuando las imágenes de escritorio se recortan mal en pantallas más pequeñas.

Precaución

Una imagen o movimiento intensos detrás de los detalles del carrito pueden reducir la legibilidad. Use superposiciones y comprobaciones de contraste para que el carrito siga siendo funcional primero.

Ajustes de separador

Los ajustes de separador añaden una línea opcional en la parte superior o inferior de la sección del carrito. Son útiles cuando el carrito necesita un límite visual más claro respecto al contenido cercano.

Si deja transparente el color del separador, la sección volverá al color de borde del tema. A menudo, esa es la forma más sencilla de mantener el carrito coherente con el resto del diseño.

Ajustes de ancho

Los ajustes de ancho controlan tanto el ancho máximo del contenido del carrito como el ancho del contenedor de la sección. Esto le permite mantener el carrito compacto y fácil de leer, o hacer que se sienta más espacioso cuando se combina con un estilo de página más amplio.

Para la mayoría de las tiendas, un ancho de contenido moderado mantiene cómodos de revisar los artículos, los precios y los controles. El ancho del contenedor es más importante cuando utiliza un fondo, porque cambia hasta dónde se extiende ese tratamiento visual por la página.

Nota

Los cambios de ancho pueden verse distintos en el editor que en la página publicada, así que previsualice el frontend real antes de finalizar las decisiones de diseño.

Notas de uso

1. Mantenga fácil de revisar el carrito. Priorice un contraste claro del texto, los iconos y los bordes para que los detalles y los totales sigan siendo legibles de un vistazo.
2. Use bloques adicionales con moderación. Añada contenido de app o personalizado solo cuando respalde el proceso del carrito en lugar de competir con las acciones principales del carrito.
3. Ajuste los móviles por separado. Revise el espaciado, la visibilidad y los medios de fondo en móviles para que el carrito no se vuelva excesivamente largo ni visualmente recargado.
4. Elija el ancho con cuidado. Un ancho de contenido equilibrado suele resultar mejor que un carrito apretado o uno que estire demasiado los detalles por la página.
5. Compruebe ambos estados del carrito. Previsualice la sección con artículos en el carrito y con el carrito vacío para que el estilo y el espaciado se sientan pulidos en ambas situaciones.
6. Revise el comportamiento en escritorio y en móviles. Compare ambas vistas para la alineación, la visibilidad y el recorte de medios, especialmente si usa fondos diferentes o oculta contenido en un tamaño de pantalla.
7. Mantenga legible la retroalimentación de los formularios. Asegúrese de que los cambios de cantidad, los mensajes de validación y los estados vacíos o de éxito sigan siendo fáciles de leer cuando los clientes interactúan con los controles del carrito.
8. Piense en el contexto del producto. Vuelva a revisar el carrito después de cambiar variantes, cantidades o disponibilidad para que las acciones mostradas y los detalles del artículo sigan teniendo sentido.