Skip to main content
La disposición de tu carrito es una pila de bloques: piezas configurables que agregas, reordenas, estilizas y personalizas en el editor de carrito. Los bloques que incluyas, y en qué orden, conforman el carrito que ven los compradores. Para saber cómo se ubican los bloques dentro de los estados y las secciones, consulta ¿Cómo funcionan los carritos?.

​
Bloques y sub-bloques

Hay dos tipos de bloque:
  • Los bloques se ubican directamente en el carrito, en una de tres secciones: Header, Body o Footer. Cada sección ofrece un conjunto diferente de bloques.
  • Los sub-bloques se anidan dentro de otro bloque. Hoy solo Cart items aloja sub-bloques: la fila Product (la fila del artículo en sí), Subscription upgrade y Custom code.

​
Agregar, reordenar y eliminar bloques

  • Agrega un bloque con el selector Add block. Un bloque aparece atenuado si no puede ir donde lo estás agregando, o si has alcanzado su límite (el selector muestra una insignia count/max).
  • Reordena arrastrando un bloque dentro de su sección.
  • Elimina con el ícono de papelera, excepto los bloques bloqueados (más abajo).
  • Muestra/oculta la mayoría de los bloques con el conmutador del ojo, que oculta un bloque a los compradores sin eliminarlo. Algunos bloques estructurales no pueden ocultarse: Cart items, Checkout button y la fila Product.

​
Bloques bloqueados

Algunos bloques pueden reordenarse pero no eliminarse, para que el comportamiento central del carrito (por ejemplo, pagar) no pueda eliminarse por accidente:
  • Cart items
  • Checkout button

​
Bloques predeterminados

Los carritos nuevos comienzan con una disposición predeterminada funcional:
  • Carrito lleno: Header, Banner, Cart items, Summary, Checkout button
  • Carrito vacío: Header, bloque Empty cart
El estado de carrito vacío es toda la disposición vacía. El bloque Empty cart es un bloque dentro de ella. Consulta ¿Cómo funcionan los carritos? para conocer la diferencia.

​
Cuántos bloques de cada tipo puedes agregar

Los límites se cuentan por estado del carrito, no por carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo, así que un carrito puede tener tres Banners en su disposición llena y tres más en su disposición vacía. La mayoría de los bloques están limitados a uno por estado. Las excepciones:

​
Content, Design y Code

Cada bloque se configura a través de hasta tres superficies en el editor:
  • Content: las configuraciones del bloque (texto, elecciones de productos, umbrales, etcétera). El bloque Custom code es la única excepción: no tiene panel Content porque el bloque es el código.
  • Design: estilo por bloque que se superpone a tus configuraciones de diseño globales. Todos los bloques lo tienen excepto Custom code, que no tiene panel de configuración en absoluto.
  • Code: anula el renderizado integrado del bloque con una plantilla personalizada. La mayoría de los bloques lo admiten; un par no.

​
Mostrar u ocultar por mercado, país o moneda

Algunos bloques pueden mostrar configuraciones diferentes, u ocultarse por completo, según quién sea el comprador. Eso es distinto del conmutador del ojo de la barra lateral, que activa o desactiva un bloque para todos. Tipos de condición admitidos hoy: mercado de Shopify, país del cliente y moneda del cliente (cada uno con In o Not in). El total del carrito y el contenido del carrito no son tipos de condición. Usa los umbrales de niveles de Rewards para el progreso por gasto/cantidad, o el Cart SDK cuando necesites una regla que el editor no pueda expresar. Las condiciones son una lista ordenada: gana la primera condición coincidente. Coloca las reglas específicas por encima de una condición comodín All buyers. Si nada coincide, el bloque no renderiza nada para ese comprador. En el editor hoy, la interfaz completa de Conditions se incluye en el bloque Rewards: diferentes conjuntos de niveles por mercado, país o moneda. Los otros bloques o usan una única configuración para “todos los compradores” o aún no participan en este sistema. La vista previa del editor no evalúa al comprador en vivo. Selecciona una condición en el panel para previsualizar esa variante.

​
Todos los bloques

Estructura
  • Header: título, recuento de artículos, logotipo y control de cierre, fijado en la parte superior.
  • Cart items: los artículos que los clientes agregan al carrito; se repite por línea.
  • Subscription upgrade: sub-bloque que ofrece convertir una línea en una suscripción.
  • Summary: totales, ahorros y descuentos aplicados.
  • Checkout button: la llamada a la acción principal para pagar.
  • Empty cart: el contenido que se muestra cuando el carrito está vacío.
  • Express payments: botones de checkout acelerado (Shop Pay, PayPal, etcétera) dentro del carrito.
Merchandising
  • Upsells: recomendaciones de productos elegidas por estrategia.
  • Product add-on: un único producto específico ofrecido como complemento.
  • Rewards: recompensas escalonadas como envío gratis o regalos.
  • Shipping protection: un complemento opcional de protección de envío.
Entrada del comprador
  • Discount code: un campo para aplicar un código de descuento.
  • Notes: un campo de notas del pedido.
Contenido
  • Banner: un banner de mensaje, con un temporizador de cuenta regresiva opcional.
  • Image: una sola imagen o un preajuste alojado, como los íconos de pago.
  • Custom code: HTML o React personalizado en cualquier parte del carrito.
Extensión
  • Custom templates: anula cómo se renderiza cualquier bloque desde su pestaña Code.

​
Bloques disponibles en cada sección

Cada sección tiene un conjunto diferente de bloques disponibles. Eso mantiene la disposición enfocada y reduce el desorden. Algunos de esos bloques son específicos de un estado (por ejemplo, Empty cart solo en el estado vacío). Consulta ¿Cómo funcionan los carritos?.

​
Errores de validación de bloques

Si la configuración de un bloque contiene un valor no válido, aparece un pequeño punto rojo junto al nombre de ese bloque en la barra lateral. El punto permanece hasta que soluciones el problema. No es una notificación descartable. Mientras algún bloque tenga un error, el guardado está bloqueado. El botón Save sigue siendo clicable, pero al seleccionarlo se muestra un toast de error (“Fix the errors in your cart blocks before saving”) y salta al primer bloque con un problema, abriendo su configuración para que puedas corregir el campo resaltado. Publish requiere además que no haya cambios sin guardar, por lo que permanece no disponible hasta que se complete un guardado limpio. Una vez corregido el campo no válido, el punto desaparece por sí solo y el guardado continúa con normalidad.
Los bloques ocultos también se validan. Un bloque que has ocultado puede contener una configuración no válida, mostrar un punto de error y bloquear el guardado exactamente igual que uno visible, así que si el guardado está bloqueado y todos los bloques visibles se ven bien, revisa tus bloques ocultos.