Saltar al contenido
← GraphicMeat Smart Cart

Apps de tienda · Guía de configuración

Guía de configuración de GraphicMeat Smart Cart

16 escenarios, cada uno dividido entre lo que defines en la app y lo que defines en el editor de temas, con las etiquetas que realmente verás. Lee el que necesites; nada de aquí da por hecho que hayas leído los demás.

Actualizado el 23 de agosto de 202616 escenarios

Smart Cart se configura en dos sitios: los niveles de recompensa y las reglas de venta adicional viven en la app dentro de tu Shopify admin (la administración); el cajón en sí, su texto, la barra de anuncios, las sugerencias de venta adicional y la cuenta atrás son ajustes del app embed del tema (la tienda). Cada escenario de abajo se divide así, con las etiquetas exactas.

Cómo leerlo. Cada escenario tiene dos columnas. Administración es la app dentro de tu Shopify admin; tienda es el editor de temas y lo que ve el comprador en el escaparate. Las etiquetas en negrita son las exactas de la pantalla. Una columna de tienda vacía significa que el escaparate no necesita nada más allá del app embed, que activas una sola vez, más abajo.

Antes de cualquier escenario

Administración · en la app

  1. Instala desde la Shopify App Store. La página Home de la app muestra tres elementos en la Setup checklist: activa el embed, configura un nivel de recompensa, verifica en la tienda.
  2. Open theme editor en Home salta directamente al panel App embeds del editor.

Tienda · editor de temas & escaparate

  1. Online Store → Themes → Customize → App embeds → pon Smart cart drawer en activado → Save. Desde ahora el icono del carrito, los enlaces del carrito y el añadir al carrito abren este cajón en lugar del del tema.
  2. Todos los ajustes del cajón están en ese embed, listados en la tabla de abajo. No se escribe nada en los archivos del tema.

Todos los ajustes del editor de temas

AjusteQué hacePor defecto
Drawer titleEncabezado en la parte superior del cajón.Tu carrito
Checkout buttonTexto del botón de pago.Pagar
Open drawer from cart linksEl icono del carrito y cada enlace del carrito abren el cajón; además hace que el cajón se haga cargo de la página /cart. Desactivado = el cajón solo se abre tras añadir al carrito.activado
Show remove button on cart itemsIcono de papelera por línea; el selector − llega a 0 de todos modos.activado
Slide in fromRight o Left.Right
Accent colorBarra de progreso, chips, botones, etiquetas de pack.#1a7f37
Upsell productsHasta 8 productos para la lista “You may also like”, por orden de prioridad.ninguno
Max upsells shownCuántos se muestran a la vez, de 1–6.3
Announcement textLa barra en la parte superior del cajón; en blanco la oculta.en blanco
Announcement link (optional)Convierte la barra en un enlace.ninguno
Starts at / Ends at (ISO date, optional)Programación de la barra, p. ej. 2026-07-01T00:00:00Z; en blanco = siempre.en blanco
Deadline (ISO date, optional), under Urgency countdown (Pro)Cuenta atrás mostrada sobre las líneas del carrito. Requiere el plan Pro.en blanco

Dónde está cada cosa en la app

PáginaQué hay
HomeIngresos generados (últimos 30 días / total), ingresos de toda la suite, la Setup checklist y Open theme editor.
RewardsHasta 5 niveles: Cart amount, Reward label, Select gift; Gamified display; Add tier; Save.
Upsell rulesReglas para las apps hermanas: Select trigger products (optional), Select upsell products, Discount %; Save & publish.
PlanUpgrade to Pro ($9.99/mes, prueba de 14 días) y Switch to Free.
Help / SupportDocumentación dentro de la app y el formulario de soporte; los mensajes llegan al estudio.

Escenarios

Activa el cajón

Sustituye el cajón del carrito del tema por Smart Cart, nada más por ahora.

Administración · en la app

  1. No se requiere nada. Home → Open theme editor es un atajo al embed.

Tienda · editor de temas & escaparate

  1. App embeds → Smart cart drawer activado.
  2. Define Drawer title, Checkout button, Slide in from y Accent color al gusto; deja Open drawer from cart links y Show remove button on cart items activado.
  3. Save.

Lo que ve el comprador

El icono del carrito, los enlaces del carrito y cada añadir al carrito abren Smart Cart; el cajón propio del tema permanece cerrado.

Compruébalo

Haz clic en el icono del carrito cuatro veces seguidas: se abre siempre. Añade un producto: el cajón se abre solo.

En la tienda de demostración

Envío gratis conseguido, la siguiente recompensa a la vista.

La barra de anuncios indica la oferta, los chips muestran el envío gratis ya conseguido y el pack de pegatinas gratis a $52.03, y la barra sigue llenándose entre niveles en lugar de reiniciarse en cada uno. Cada línea lleva su etiqueta de pack, un selector de cantidad y un botón de quitar; las sugerencias de You may also like las eliges tú.

Página de inicio de la tienda de demostración con el cajón de Smart Cart abierto: un anuncio de Summer tune-up sale, un chip Free shipping marcado como conseguido, un chip Free Sticker Pack a $52.03, una barra de progreso, tres líneas de carrito con la etiqueta GraphicMeat Mix & Match con selectores de cantidad, una sección You may also like con botones Add, y un subtotal de $97.97 sobre un botón Checkout
Tienda de demostración de GraphicMeat · tema Horizon · sin retoquesHaz clic para ampliar

Barra de progreso de envío gratis

“Add $12.03 more to unlock free shipping”, rellenándose a medida que crece el carrito.

Administración · en la app

  1. Rewards → primera fila: Cart amount 50, Reward label “Free shipping”, sin regalo → Save.
  2. El nivel es una etiqueta y un umbral; no cambia por sí solo las tarifas de envío.

Tienda · editor de temas & escaparate

  1. Haz que el envío sea realmente gratis a partir de ese importe: en Shopify Settings → Shipping and delivery, añade una tarifa “Free shipping” con un precio mínimo de pedido de $50 a tu perfil de envío, o ejecuta en Prime Bundles un Shipping discount a $50. El mismo número en ambos sitios.
  2. Opcional: Announcement text “Free shipping over $50”.

Lo que ve el comprador

Un chip para el nivel, una línea “Add $X more to unlock Free shipping” y una barra de progreso; el chip se marca cuando el subtotal supera $50. Captura de página completa en la página de GraphicMeat Smart Cart.

Compruébalo

Carrito en $40 → barra parcialmente llena; añade un artículo que pase de $50 → chip marcado y el checkout muestra envío gratis.

Regalo gratis a $150

Un pack de pegatinas llega gratis al carrito cuando el subtotal pasa de $150, y solo entonces.

Administración · en la app

  1. Rewards → Add tier → Cart amount 150, Reward label “Free Sticker Pack”.
  2. Select gift → elige la variante del regalo (el botón pasa entonces a decir “Gift: …”; Clear lo quita). El regalo debe poder comprarse: con stock, o con inventario sin controlar.
  3. Save. La app publica los niveles en la tienda y en su Function de checkout en el mismo guardado.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Por encima de $150 el cajón añade el regalo como una línea real del carrito con precio “Free”; una Shopify Function vuelve a comprobar el carrito en el checkout y lo descuenta a $0. Si bajas, el cajón lo retira de nuevo.

Compruébalo

Carrito en $160 → línea de regalo a $0 en el cajón y en el checkout. Quita un artículo para bajar de $150 → el regalo desaparece.

En la tienda de demostración

Cruza el umbral y el regalo aterriza en el carrito.

Superado el nivel de $150: los dos chips marcados, una línea de celebración y el pack de pegatinas gratis añadido como una línea real del carrito con precio Free. Los mismos umbrales los aplica una Shopify Function en el checkout, así que el cajón nunca puede prometer un regalo para el que el pedido no califica, y si el carrito vuelve a bajar, el cajón retira el regalo de nuevo.

Página de inicio de la tienda de demostración con el cajón de Smart Cart abierto más allá del nivel de regalo: los dos chips de recompensa marcados, una línea Free Sticker Pack unlocked, una barra de progreso completa, el regalo gratis mostrado como una línea del carrito con precio Free, y un subtotal de $167.87
Tienda de demostración de GraphicMeat · tema Horizon · sin retoquesHaz clic para ampliar

Una escalera de varios pasos con celebraciones

Envío gratis a $50, un regalo a $150, un regalo mejor a $300, con chips que se marcan al desbloquearse cada uno.

Administración · en la app

  1. Rewards: una fila por paso, en orden ascendente Cart amount, hasta cinco (Add tier se atenúa después).
  2. Marca Gamified display (“unlock-tier chips with a checkmark and a brief celebration as each reward unlocks”), luego Save.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Una fila de chips, con los bloqueados mostrando el importe que aún falta; la barra de progreso se llena con suavidad entre niveles en lugar de reiniciarse en cada uno. Captura de página completa en la página de GraphicMeat Smart Cart.

Compruébalo

Cruza un umbral: el chip se marca y celebra una vez. Cruza otra vez tras bajar: no hay segunda celebración hasta que se desbloquee de nuevo.

Barra de anuncios con programación

Una barra verde en el cajón durante la duración de una promoción.

Administración · en la app

No hay nada que definir en la app para este caso.

Tienda · editor de temas & escaparate

  1. Announcement text “Summer tune-up sale: free shipping over $50, free gift over $150”.
  2. Announcement link (optional) a una colección. Starts at / Ends at como fechas ISO, p. ej. 2026-07-01T00:00:00Z; déjalos en blanco para activarla siempre.
  3. Save.

Lo que ve el comprador

La barra se muestra en la parte superior del cajón, también con el carrito vacío, solo dentro de la ventana. Captura de página completa en la página de GraphicMeat Smart Cart.

Compruébalo

Pon un final dentro de unos minutos; la barra desaparece en la siguiente apertura del cajón después de ese momento.

“You may also like” en el cajón

Muestra una gorra y una sudadera con botones Add de un toque, también con el carrito vacío.

Administración · en la app

No hay nada que definir en la app para este caso.

Tienda · editor de temas & escaparate

  1. Upsell products: elige hasta 8 en el orden en que quieras que se ofrezcan.
  2. Max upsells shown: 1–6 (por defecto 3). Los productos que ya están en el carrito se omiten automáticamente.
  3. Save.

Lo que ve el comprador

Una lista “You may also like” bajo las líneas (y bajo el mensaje de carrito vacío) con botones Add; los artículos se añaden a su precio normal.

Compruébalo

Añade una de las sugerencias; sale de la lista y la siguiente sugerencia ocupa su lugar.

Conviene saber

Las líneas añadidas desde aquí se marcan como originadas en el cajón: son lo que cuenta como ingresos atribuidos de Smart Cart.

En la tienda de demostración

Un carrito vacío también vende.

Sin nada en el carrito, el cajón muestra el anuncio y tus recomendaciones elegidas con botones Add de un toque. Qué productos aparecen, en qué orden y cuántos a la vez son ajustes del editor de temas: ningún modelo adivina por ti.

Página de inicio de la tienda de demostración con el cajón de Smart Cart abierto sobre un carrito vacío: la barra de anuncios, una línea Your cart is empty y una sección You may also like que ofrece una gorra y una sudadera con botones Add
Tienda de demostración de GraphicMeat · tema Horizon · sin retoquesHaz clic para ampliar

Reglas de venta adicional para Popups y Post Purchase

Dile al resto de la suite qué ofrecer con qué, y con qué descuento.

Administración · en la app

  1. Upsell rules → por regla: Select trigger products (optional) (déjalo vacío para una venta adicional siempre activa) y Select upsell products.
  2. Discount % para esa regla. Añade más filas para más reglas; Remove quita uno.
  3. Save & publish. Las reglas se publican en tu tienda para que GraphicMeat Popups y Post Purchase las lean.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

No cambia nada en el cajón: su lista sale de las sugerencias del editor de temas de arriba. Las reglas dirigen las ofertas de las apps hermanas, así que una sola edición mantiene coherentes todas las superficies.

Compruébalo

Con Popups o Post Purchase instalados, sus páginas de oferta muestran los mismos productos y el mismo porcentaje.

Cuenta atrás de urgencia (Pro)

“Offer ends in 2d 4h 12m” sobre las líneas del carrito durante la duración de una promoción.

Administración · en la app

  1. Plan → Upgrade to Pro ($9.99/mes, prueba gratuita de 14 días), aprueba en la página de Shopify.

Tienda · editor de temas & escaparate

  1. Urgency countdown (Pro) → Deadline (ISO date, optional), p. ej. 2026-08-31T23:59:00Z → Save.

Lo que ve el comprador

Una cuenta atrás en vivo hasta ese instante; muestra “ended” al llegar a cero. Sin Pro el campo se ignora.

Compruébalo

Abre el cajón: el reloj avanza cada segundo; pon la fecha límite a un minuto y míralo caducar.

Carril de mejora a pack (Pro, con Prime Bundles)

Avisos “Add 1 more, save 15%” bajo las líneas del carrito a una unidad de un nivel.

Administración · en la app

  1. Ten Quantity breaks de Prime Bundles activos en los productos. Prime Bundles los publica para el cajón automáticamente.
  2. Plan → Upgrade to Pro. No hace falta más configuración.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Las líneas muestran un aviso con el ahorro que desbloquearía una unidad más y un botón que la añade; la etiqueta de pack aparece en las líneas que pertenecen a una oferta. Captura de página completa en la página de GraphicMeat Smart Cart.

Compruébalo

Pon una unidad de un producto 2+ en el carrito: aparece el aviso; púlsalo: la línea pasa a 2 y el descuento aparece en el checkout.

Interruptor Subscribe & save en las líneas del carrito

Deja que los compradores cambien una línea a una suscripción sin salir del carrito.

Administración · en la app

  1. Nada en Smart Cart. El producto necesita planes de venta de Shopify, de GraphicMeat Subscriptions o de cualquier app que cree planes de venta nativos.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Las líneas cuyo producto tiene planes de venta obtienen un selector de entrega; cambiarlo es un cambio de carrito normal con el plan asociado.

Compruébalo

Cambia una línea a “Every month”; el checkout muestra el precio y el calendario de la suscripción.

Takeover de la página del carrito

Los compradores que llegan a /cart (por URL, marcador o ruta de navegación del checkout) ven el mismo cajón, no un segundo carrito.

Administración · en la app

No hay nada que definir en la app para este caso.

Tienda · editor de temas & escaparate

  1. Mantén Open drawer from cart links activado. Con él activado, /cart (y rutas localizadas del tipo /en/cart) abre el cajón sobre la página del carrito del tema, y al cerrarlo se queda en la página en lugar de revelar el otro carrito.
  2. Desactívalo para dejar intactos la página del carrito y el icono del carrito del tema; el cajón entonces solo se abre automáticamente tras añadir al carrito.

Lo que ve el comprador

Un carrito en todas partes. Detrás del cajón, el carrito del tema ya muestra los precios de pack aplicados por Shopify.

Compruébalo

Escribe /cart en la barra de direcciones: el cajón se abre encima; ciérralo y vuelves a la página anterior.

En la tienda de demostración

La página /cart recibe el mismo cajón.

Al llegar a /cart por URL o desde la ruta de navegación del checkout, se abre el cajón sobre la propia página de carrito del tema, así que los compradores ven un único carrito en todas partes. Detrás, Shopify ya ha aplicado los precios del pack ($63.99 en lugar de $69.99) antes de que nadie llegue al checkout.

La página del carrito de la tienda de demostración con el cajón de Smart Cart abierto encima; el carrito del tema de fondo muestra líneas con la etiqueta Bundle: GraphicMeat Mix & Match con precios rebajados como $63.99 tachado desde $69.99, y el cajón muestra las mismas líneas con una barra de recompensas y un subtotal de $112.92
Tienda de demostración de GraphicMeat · tema Horizon · sin retoquesHaz clic para ampliar

Con GraphicMeat Popups en la misma tienda

Evita que un popup y el cajón se disputen la pantalla.

Administración · en la app

  1. Nada que configurar.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Mientras se muestra un popup de GraphicMeat, el cajón aplaza su apertura automática; se abre cuando el popup se cierra. Un código de descuento concedido por un popup aparece como un aviso “code applied” en el cajón.

Compruébalo

Dispara un popup, añade un producto detrás: el cajón espera.

Texto, lado y color

Haz que el cajón se lea y se vea como el resto de la tienda.

Administración · en la app

No hay nada que definir en la app para este caso.

Tienda · editor de temas & escaparate

  1. Drawer title, Checkout button, Slide in from (Right / Left), Accent color, Show remove button on cart items.

Lo que ve el comprador

El cajón hereda las fuentes del tema y el formato de moneda de tu tienda. Otras etiquetas (“You may also like”, “Add”, “Your cart is empty”) están en inglés por ahora.

Compruébalo

Recarga la tienda después de guardar: los ajustes del embed se aplican en la siguiente carga de página.

Verifica antes de lanzar

Comprueba que cada promesa que hace el cajón se cumple en el checkout.

Administración · en la app

No hay nada que definir en la app para este caso.

Tienda · editor de temas & escaparate

  1. Carrito por debajo del primer nivel: barra parcialmente llena, nada desbloqueado.
  2. Cruza el nivel de envío: el chip se marca; el checkout muestra envío gratis (de tu tarifa o de Prime Bundles).
  3. Cruza el nivel de regalo: línea de regalo a $0 en el cajón y en el checkout.
  4. Vuelve a bajar: regalo retirado, chip desmarcado.
  5. Edita cantidades con el selector: el subtotal y la barra siguen; el checkout coincide.

Lo que ve el comprador

Cada umbral se valida dos veces (en el cajón y por la Function del checkout), así que esta comprobación nunca debería contradecirse.

Compruébalo

Usa un pedido de prueba o el modo de prueba de tu pasarela de pago para el checkout final.

Plan, atribución, facturación

Sabe qué ha ganado el cajón y cuándo Pro se vuelve necesario.

Administración · en la app

  1. Home: Ingresos generados (últimos 30 días y total) más ingresos de la suite.
  2. Los ingresos atribuidos cuentan solo las líneas que añadió el cajón (ventas adicionales y añadidos del carril de packs), precio × cantidad; los regalos gratis no se cuentan.
  3. Por encima de $200 en 30 días móviles, guardar nuevos cambios de recompensas o ventas adicionales requiere Pro; la tienda en vivo sigue funcionando. Un banner avisa a partir de $100.
  4. Plan → Upgrade to Pro; Switch to Free para bajar de plan. La facturación va en tu factura de Shopify; las tiendas de desarrollo nunca se cobran.

Tienda · editor de temas & escaparate

Nada más allá del app embed, ya activado.

Lo que ve el comprador

Las funciones de la tienda solo Pro son el carril de packs y la cuenta atrás; todo lo demás sigue siendo gratis.

Compruébalo

Tras actualizar, Home muestra “Pro plan active — bundle rail and urgency countdown enabled”.

Desactívalo o quítalo

Vuelve al carrito del tema, temporal o definitivamente.

Administración · en la app

  1. Desinstala desde el Shopify admin para quitarlo definitivamente: el embed, la Function del descuento del regalo y cada nivel y regla guardados se van con ella.

Tienda · editor de temas & escaparate

  1. Temporalmente: App embeds → Smart cart drawer desactivado → Save. Los niveles y las reglas siguen guardados en la app.

Lo que ve el comprador

El cajón y la página del carrito propios del tema vuelven en la siguiente carga de página.

Compruébalo

Haz clic en el icono del carrito: se abre el cajón del tema.

Lista de comprobación para salir en vivo

  1. Editor de temas: Smart cart drawer embed activado y guardado.
  2. Al menos un nivel de recompensa guardado; productos de regalo con stock o sin controlar.
  3. El importe del nivel de envío gratis coincide con la tarifa real de envío gratis (ajustes de envío de Shopify o Prime Bundles).
  4. Productos de venta adicional elegidos en el editor de temas, Max upsells shown configurado.
  5. Fechas del anuncio y de la cuenta atrás en formato ISO con la zona horaria (Z).
  6. Pro activo si se espera que se muestren la cuenta atrás o el carril de packs.
  7. La comprobación anterior, hecha una vez en escritorio y una vez en un móvil.

¿Sigues sin poder avanzar?

Envía un mensaje a través de el formulario de contacto y te responde la persona que creó la app. Las Preguntas frecuentes cubren precios, atribución y datos; la página de la app muestra cada escenario de arriba en vivo en la tienda de demostración.