Para mostrar una tabla de descuentos por cantidad o volumen en una página de producto de Shopify, ya sea que añadas un bloque de app de tema desde una app de descuentos en el editor de temas, o que codifiques manualmente la tabla en Liquid dentro de tu plantilla de producto. La ruta del bloque de app es el camino sin código: dejas el bloque bajo el botón de añadir al carrito y renderiza una tabla de niveles "compra más, ahorra más" sin tocar archivos de tema. La parte que realmente importa es lo que sucede después de colocarla. La tabla mostrada tiene que mantenerse sincronizada con el descuento que se activa en el checkout, y tiene que renderizarse de forma segura para el SEO, sin envolver precios en etiquetas de encabezado que crean H1 adicionales y dañan silenciosamente tu ranking. Si aciertas esas dos cosas, una tabla de nivel es una de las adiciones de mayor apalancamiento que puedes hacer a una página de producto. Si las aciertas mal, estás mostrando a los clientes precios que el checkout no honrará, en una página cuya estructura de encabezados acabas de romper.
Esta guía cubre por qué una tabla de nivel visible aumenta el valor promedio del pedido, el enfoque de bricolaje de Liquid y las trampas de mantenimiento que lo rompen, bloques de app de tema versus codificación manual, el peligro real del SEO de renderizar precios como etiquetas de encabezado, consideraciones de Core Web Vitals, y un ejemplo trabajado completo con una tabla "cantidad, precio cada uno, ahorras" que puedes copiar.
¿Por qué mostrar una tabla de descuento por cantidad en la página de producto en absoluto?
Un descuento por cantidad es un descuento escalonado: compra 3 y ahorra 10 por ciento, compra 6 y ahorra 15 por ciento, compra 12 y ahorra 20 por ciento. El descuento puede existir perfectamente bien sin ninguna visualización en la tienda. Shopify lo aplicará en el checkout sin importar si el cliente lo ve venir o no. Ese es exactamente el problema. Un descuento que el comprador no puede ver es un descuento que no puede cambiar su comportamiento.
La tabla de nivel es la mitad del merchandising de la oferta. Convierte una regla de precio silenciosa en una invitación visible. Un cliente que vino a comprar una unidad ve, en números claros, que comprar tres reduce el precio por unidad, y comprar seis lo reduce más. Ese es un empujón hacia un carrito más grande, colocado en el momento exacto de decisión, justo bajo el botón de añadir al carrito.
Hay una razón conductual bien entendida por la que esto funciona. Una tabla de nivel establece un ancla y luego muestra el delta de "ahorras" contra ella. El comprador ya no está evaluando un precio de forma aislada; está comparando su opción actual con una visiblemente mejor que está a una o dos unidades de distancia. Para productos consumibles, acumulables o amigables para regalos, esa comparación confiablemente mueve unidades. Los compradores mayoristas y B2B esperan una cuadrícula de ruptura de precios como una cuestión de curso, y su ausencia se lee como una característica faltante.
La trampa es que la tabla solo ayuda si los compradores confían en ella. La primera vez que un cliente ve "6 por 34 dólares cada uno" en la página de producto y luego se le cobra 40 dólares cada uno en el checkout, no solo has perdido ese pedido. Les has enseñado que tus precios no son reales. Por eso la visualización y el motor de descuentos no pueden ser dos sistemas separados que simplemente están de acuerdo hoy.
MARCADOR DE IMAGEN (Imagen 1): Una tabla de nivel de descuento por cantidad en una página de producto
Visual sugerido: Una maqueta limpia de escaparate 16:9 de una página de producto de Shopify. La columna derecha muestra el título del producto, el precio y un botón de añadir al carrito. Directamente bajo el botón hay una tabla de 4 filas con columnas "Cantidad", "Precio cada uno" y "Ahorras". La fila tres (6 a 11) está resaltada en violeta como el nivel activo, con una pequeña nota "Estás ahorrando 15 por ciento". Marcador de foto de producto neutral a la izquierda. Colores de marca violeta y acentos dorados, interfaz plana moderna, sin logotipos reales.
¿Cuáles son las formas de mostrar una tabla de nivel en una página de producto de Shopify?
Hay tres rutas prácticas, en orden aproximado de más manual a más mantenible.
Opción 1: codificar manualmente la tabla en Liquid
Editas tu plantilla de producto (o una sección o snippet que renderiza) y escribes el marcado de la tabla tú mismo. Ya sea que codifiques los valores de nivel como HTML estático, o que los leas de un metafield de producto y hagas un bucle sobre ellos en Liquid. Esto te da control total sobre el marcado y el estilo, y es genuinamente la respuesta correcta para una tienda con uno o dos productos y un desarrollador disponible.
El costo es mantenimiento, y es más alto de lo que parece. Una tabla codificada duro es una segunda copia de tu precios que vive en tu tema, desconectada del descuento que realmente se ejecuta. Cada vez que cambias un nivel, lo cambias en dos lugares: el descuento y el tema. Piérdete uno y la tabla miente. Los comerciantes en los foros de Shopify describen exactamente este patrón, construyendo una tabla HTML construida a mano para la visualización de nivel y luego luchando por mantenerla alineada con una regla de descuento que vive en otro lugar completamente. Funciona hasta el día en que silenciosamente no lo hace.
Opción 2: una tabla Liquid impulsada por metafield
Una versión más robusta de bricolaje almacena los datos de nivel en un metafield de producto y los renderiza con un bucle de Liquid, por lo que la tabla es impulsada por datos en lugar de codificada duro por producto. Esto es mejor; editas los niveles en un lugar estructurado. Pero aún posees el renderizado, el estilo responsive, el JavaScript de actualización en vivo, y crucialmente el trabajo de mantener los valores del metafield iguales a los valores que tu descuento utiliza. Nada hace cumplir esa igualdad para ti.
Opción 3: un bloque de app de tema desde una app de descuentos
La ruta sin código utiliza el marco de extensiones de app de tema de Shopify. Según la documentación de extensiones de app de tema de Shopify, estas extensiones "permiten a los comerciantes añadir fácilmente elementos dinámicos a sus temas sin tener que interactuar con plantillas Liquid o código", y los docs listan "precios, calificaciones" entre los elementos dinámicos para los que están construidas. Una tabla de nivel es precisamente este tipo de elemento.
La app proporciona un bloque de app. En el editor de temas abres tu plantilla de producto, haces clic en Añadir bloque en una sección, eliges el bloque de tabla de nivel de la app, y lo posicionas donde quieras, típicamente justo bajo el botón de añadir al carrito. Nunca editas código de tema. Los docs de Shopify confirman que los comerciantes pueden "añadir, eliminar y reordenar bloques de app a nivel de sección" directamente en el editor, y que los bloques de app "heredan propiedades de estilo del tema, como tipografía y colores", por lo que la tabla coincide con tus fuentes y diseño sin CSS personalizado.
La ventaja estructural importante es que un bloque de app bien construido lee sus valores de nivel de la misma fuente de verdad que el descuento, por lo que la visualización y la matemática del checkout no pueden desviarse. Ese es todo el juego, y es la razón por la que esta ruta gana para la mayoría de tiendas.
Bloques de app vs bloques de incrustación de app: ¿cuál es la tabla de nivel?
El marco de extensiones de app de tema de Shopify tiene dos tipos de bloques, y vale la pena saber cuál es cuál, porque la tabla de nivel es uno de ellos y no el otro.
Un bloque de app utiliza target: section en su esquema. Es un elemento visible y posicionado que un comerciante suelta en un lugar específico dentro de una sección, y puede señalar fuentes dinámicas como el producto actual. Según los docs de configuración de Shopify, los bloques de app se añaden, eliminan y reordenan en el editor de temas y pueden "señalar una fuente dinámica para mostrar datos de diferentes productos mientras se muestran en la página". Esa última parte es exactamente lo que una tabla de nivel necesita: tiene que mostrar los niveles para cualquier producto que la página esté renderizando. Por lo que la tabla de nivel es un bloque de app.
Un bloque de incrustación de app utiliza target: head, compliance_head, o body. Shopify "renderiza e inyecta bloques de incrustación de app antes de las etiquetas de cierre head y body", y están destinados a elementos flotantes o superpuestos como burbujas de chat, insignias y etiquetas de análisis o SEO, no para contenido colocado en un punto preciso del diseño. Los bloques de incrustación de app están desactivados por defecto y los comerciantes los activan en Configuración de tema, Incrustaciones de app. Una tabla de nivel no es un bloque de incrustación, porque necesita vivir en una posición específica en el diseño del producto, no flotar sobre la página.
Una advertencia que pertenece en cada guía honesta: los bloques de app se soportan solo en temas Online Store 2.0, los que utilizan plantillas JSON. Los docs de integración de Shopify declaran que "los bloques de app se soportan solo en temas que contienen plantillas JSON, también conocidas como temas Online Store 2.0". Si estás en un tema de cosecha muy antigua, la colocación de bloques de arrastrar y soltar no estará disponible y estás de vuelta en un enfoque de Liquid o una actualización de tema. La mayoría de tiendas en un tema moderno de Shopify ya están en Online Store 2.0.
MARCADOR DE IMAGEN (Imagen 2): Añadiendo el bloque de app de tabla de nivel en el editor de temas
Visual sugerido: Una maqueta de estilo captura de pantalla 16:9 del editor de temas de Shopify. El panel izquierdo muestra el árbol de secciones para una plantilla de producto con una asequibilidad "Añadir bloque" expandida, revelando una opción de bloque "Tabla de descuento por cantidad" de una app bajo un encabezado Apps. El centro muestra la vista previa de producto en vivo con la tabla de nivel apareciendo bajo el botón de añadir al carrito. Cromo de administrador de estilo Polaris, resalte violeta en el bloque seleccionado. Referencia los docs/screenshot-manifest.md slot volume-discounts-step-3 para capturar la pantalla real más tarde.
Por qué las tablas de nivel codificadas manualmente se rompen silenciosamente (la trampa de colección)
Aquí está el modo de fallo que genera los posts más frustrados del foro, y no es un bug en tu marcado de tabla. Es una desajuste entre cómo piensas que el descuento está alcance y cómo Shopify realmente cuenta.
Digamos que construyes una tabla codificada manualmente en una página de producto de silla de comedor: 3 a 5 sillas ahorran 15 por ciento, 6 a 9 ahorran 18 por ciento, 10 o más ahorran 20 por ciento. La respalda con un descuento nativo de Shopify alcance a tu colección "Chairs". La tabla se ve correcta. Luego dos cosas silenciosamente van mal.
Primero, los descuentos nativos de alcance de colección cuentan unidades totales en cada producto en la colección, no unidades de la silla en la página. Por lo que un comprador puede activar tu nivel de "compra 3" añadiendo uno de cada una de tres sillas diferentes, lo que no es lo que la tabla en ninguna página de silla única implica. La tabla mostrada está escrita desde la perspectiva de un producto; el descuento está haciendo matemática de colección. Describen diferentes ofertas.
Segundo, la membresía del descuento cambia debajo de ti. En el momento en que añades un nuevo producto a esa colección, o en el momento en que un producto cae fuera de ella, el conjunto de elementos que cuentan hacia el umbral cambia. Los comerciantes han señalado exactamente esto en los foros: añadir un producto a una colección silenciosamente cambia la lógica de descuento, y nada te advierte. Tu tabla codificada manualmente aún muestra los niveles antiguos. Ahora está describiendo un descuento que ya no existe en la forma que el cliente ve.
Esta es la razón central por la que una tabla de nivel no debería ser un artefacto estático que mantienes manualmente. La tabla es una vista de un descuento. Si el descuento puede cambiar alcance o membresía sin tocar la tabla, los dos se desviaran, y la desviación es invisible hasta que un cliente o tu propia orden de prueba la surficen. La solución es estructural: mostrar niveles por producto de la misma definición que el descuento utiliza, y contar la forma que la tabla afirma contar, por producto y sus variantes, no agrupado en una colección entera. Ese es el modelo de conteo cubierto en descuentos de volumen por producto, y es la diferencia entre una tabla que es siempre verdadera y una que es verdadera hasta el martes.
La trampa del SEO: nunca renderices precios como etiquetas de encabezado
Esta es una verdadera, documentada trampa, y viene directamente de las revisiones de apps. Un comerciante señaló que una app de descuentos popular renderizaba sus precios en página dentro de etiquetas de encabezado, lo que creaba múltiples elementos H1 competidores en cada página de producto, y el soporte se negó a arreglarlo. No es una queja cosmética. Es una regresión de SEO horneada en el widget.
Aquí es por qué importa. Los motores de búsqueda usan tu jerarquía de encabezados para entender una página. El H1 está destinado a ser el único, título principal de la página, casi siempre el nombre del producto. El resto de los encabezados, H2 y H3, describen la estructura debajo. Cuando un widget de descuento envuelve "6 por 34 dólares" en un o porque ese era un modo perezoso de hacer el número grande y negrita, inyecta encabezados que no significan nada semánticamente y diluyen los que sí. Múltiples H1s en una página enturbian la señal sobre de qué se trata realmente la página. Los precios y figuras de "ahorras" son datos, no estructura de documento. Pertenecen en celdas de tabla, spans o párrafos con estilo CSS, nunca en elementos de encabezado.
La forma correcta de renderizar una tabla de nivel es aburrida HTML correcta: un verdadero Si estás evaluando una app de descuentos, esto es algo concreto para verificar antes de instalar. Ve la fuente en una página de producto de demostración, o ejecútalo a través del inspector de accesibilidad o SEO de tu navegador, y confirma que el widget no añade elementos de encabezado. Es un test de cinco minutos que te salva de una declive de ranking lento y difícil de diagnosticar. El marketing de la ausencia de este problema es juego justo, porque tantos widgets lo aciertan mal. Una tabla de nivel de página de producto es pequeña, pero se renderiza en tus páginas de mayor intención y mayor tráfico, por lo que su costo de rendimiento se compone. Dos métricas de Core Web Vitals son los que vigilar. El Cambio de Diseño Acumulativo (CLS) es el primero. Una tabla que pop in un momento después de que el resto de la página se ha pintado empuja el botón de añadir al carrito hacia abajo y acumula cambio de diseño. La solución es renderizar la tabla del lado del servidor en el HTML inicial donde sea posible, por lo que el espacio se reserva desde el primer pintado, en lugar de inyectarla tarde con JavaScript después de que la página se asiente. Los valores de una tabla de nivel se conocen en el tiempo de renderizado; no hay razón por la que necesite llegar al final. Largest Contentful Paint (LCP) y el presupuesto de peso general son el segundo. Un widget que carga un paquete JavaScript pesado, su propia web font, o un pedazo de código del marco para dibujar lo que es fundamentalmente una tabla pequeña está gastando tu presupuesto de velocidad sin cuidado. El marco de extensión de app de tema de Shopify ayuda aquí: cuando un bloque de app está presente en una página, su hoja de estilo y script se cargan una vez a través de las etiquetas propias del marco, y si un comerciante añade múltiples bloques que hacen referencia al mismo archivo, Shopify incluye ese archivo solo una vez por página. Una buena tabla de nivel se inclina hacia eso, envía CSS y JS mínimos, y hace el trabajo pesado del lado del servidor. El comportamiento de actualización en vivo merece una nota también. Una tabla de nivel agradable resalta el nivel activo mientras el comprador cambia cantidad, sin recarga de página. Esa interacción es barata cuando son pocas líneas de JavaScript vanilla alternando una clase, y cara cuando es un re-renderizado del marco. Mantenlo ligero. El punto de la tabla es vender más unidades, y una página que es lenta para interactuar vende menos. Construyamos una concreta. Una marca de suplementos vende una tina de proteína a 40 dólares. Quieren recompensar el abastecimiento del mismo tina, contado por producto en sus sabores, con estos niveles: La tabla en la página de producto, colocada directamente bajo el botón de añadir al carrito, lee así. La columna "ahorras" es lo que hace la persuasión. Un comprador que añade 6 tinas ve la fila "6 a 11" resaltada como su nivel activo, a 34 dólares cada una, ahorrando 48 dólares contra comprar seis al precio completo. La fila arriba y abajo permanecen visibles, por lo que el siguiente nivel ("solo seis más y cae a 32 cada una") siempre está a la vista. Ese siguiente paso visible es el mecanismo. Es la misma razón por la que las cuadrículas de precios mayoristas siempre han sido impresas como cuadrículas. Las dos reglas del resto de esta guía se aplican a esta tabla exacta. Primero, los valores en la columna "precio cada uno" deben ser los valores que el descuento realmente cobra, contados por producto en los sabores del tina, no agrupados con productos no relacionados. Segundo, ninguna de estas celdas puede ser una etiqueta de encabezado. Los 34 dólares son una celda de tabla con estilo para verse prominente, no un Aquí está la secuencia confiable para la ruta del bloque de app, que es la que la mayoría de tiendas deberían usar. Los bloques de app requieren un tema de plantilla JSON. Si estás en un tema actual de Shopify, casi ciertamente calificas. Si estás en un tema de cosecha, planifica una actualización de tema primero, o usa un enfoque de Liquid mientras tanto. Establece tus rupturas de cantidad en el descuento mismo: los puntos de ruptura, los precios por unidad o porcentajes, y el modo de conteo (cuenta este producto y sus variantes juntos, no toda la colección). Esta es la única fuente de verdad. Todo lo que el cliente ve debe derivarse de aquí. Abre tu plantilla de producto en el editor de temas, elige Añadir bloque dentro de la sección de información de producto, y selecciona el bloque de tabla de nivel de la app. Arrástralo directamente bajo el botón de añadir al carrito. Porque los bloques de app heredan la tipografía y colores del tema, debería coincidir con tu diseño inmediatamente; ajusta solo espaciado o alineación si el bloque expone esas configuraciones. Añade el producto a un carrito de prueba real en una cantidad que cruza un límite de nivel, por ejemplo 6 unidades, y confirma que el precio que la tabla mostró es el precio en el checkout, incluyendo a través de un checkout acelerado como Shop Pay. Este es el paso que atrapa la desviación antes de que los clientes lo hagan. Ve la fuente de la página de producto y confirma que el widget no añadió etiquetas de encabezado y no movió el botón de añadir al carrito alrededor mientras se cargaba. Un paso rápido en un inspector SEO o de accesibilidad confirma un H1, el título del producto, con la tabla de nivel viviendo en una tabla o lista, no en encabezados. Si tu descuento está alcance, añade y elimina un producto de la colección o grupo relevante y re-verifica que la tabla de nivel en tu producto objetivo aún muestre los niveles que tienes la intención. Aquí es donde las tablas mantenidas manualmente fallan; una oferta adecuadamente con alcance por producto no lo hace. Si prefieres no mantener una tabla codificada manualmente que se desvía de tu descuento, o auditar el HTML de un widget para etiquetas de encabezado extraviadas, este es el problema específico Stackable fue construido para manejar, honestamente y dentro de las reglas reales de Shopify. Instala Stackable de forma gratuita y ve la tabla de página de producto y el total de checkout están de acuerdo al centavo en usestackable.com/pricing. Encuentra respuestas a las preguntas más comunes Añade un bloque de app de tema desde una app de descuentos en el editor de temas, posicionándolo bajo el botón de añadir al carrito, o codifica la tabla manualmente en Liquid dentro de tu plantilla de producto. La ruta del bloque de app no necesita código y, en una app bien construida, lee los mismos valores de nivel que el checkout utiliza. El requisito esencial de cualquier forma es que los precios mostrados coincidan con lo que el checkout cobra y que la tabla no use etiquetas de encabezado. Sí, si tu tema es Online Store 2.0 y utilizas una app de descuentos que proporciona un bloque de app de tema. El editor de temas de Shopify te permite añadir, eliminar y reordenar bloques de app visualmente, sin necesidad de código de tema. La codificación manual de una tabla en Liquid sí requiere comodidad con el desarrollo, y añade mantenimiento continuo porque la tabla está entonces separada del descuento y debe mantenerse sincronizada manualmente. Solo si está construida mal. El peligro real es un widget que renderiza precios dentro de etiquetas de encabezado, lo que crea elementos H1 o H2 adicionales y diluye la estructura de encabezados de tu página. Una tabla construida correctamente pone precios en celdas de tabla o spans con estilo CSS, manteniendo un único H1 (tu título de producto). Verifica cualquier app viendo el código fuente en una página de demostración y confirmando que no añade elementos de encabezado. The team building Stackable, the reliability-first bulk and volume discount app for Shopify. We write about discount stacking, Shopify Functions, and how to run promotions that hold up at checkout. 13 min read 12 min read 9 min read Usamos cookies esenciales para el funcionamiento de este sitio y, solo con tu permiso, cookies analíticas para entender el tráfico. Lee nuestra Política de cookies. (o una lista con estilo) cuyas celdas sostienen las cantidades y precios, con peso visual aplicado a través de CSS, no a través de etiquetas de encabezado. Los números pueden parecer tan grandes y negrita como tu diseñador quiere. Solo deben no pretender ser encabezados de página. La propia guía de Shopify para widgets de escaparate en el marco de extensión de app de tema apunta en la misma dirección, e internamente la regla que nos sostenemos a nosotros mismos es simple: los widgets de escaparate deben ser seguros para SEO, sin etiquetas de encabezado inyectadas y sin cambio de diseño.
Core Web Vitals: una tabla de nivel no debería costarte velocidad
Ejemplo trabajado: una tabla "cantidad, precio cada uno, ahorras"
. Sigue esas dos reglas y esta tabla es segura para enviar en cada página de producto en el catálogo.Cómo configurarlo, paso a paso
1. Confirma que tu tema es Online Store 2.0
2. Define los niveles una vez, en el descuento
3. Añade el bloque de app de tabla de nivel en el editor de temas
4. Verifica que la visualización es igual a la matemática del checkout
5. Verifica la estructura de encabezado y la estabilidad del diseño
6. Prueba el caso edge de colección
MARCADOR DE IMAGEN (Imagen 3): La visualización y el checkout concuerdan
Visual sugerida: Una ilustración de división 16:9. Panel izquierdo etiquetado "Página de producto" muestra la tabla de nivel con la fila de 6 unidades resaltada a $34.00 cada una. Panel derecho etiquetado "Checkout" muestra las mismas 6 unidades cobradas a $34.00 cada una con un badge verde con marca de verificación leyendo "Mismo precio". Un único ícono de cadena ininterrumpida vincula los dos paneles. Abajo, una franja de caption lee "Una fuente única de verdad: la visualización es igual al checkout". Colores de marca violeta y dorado, vector plano, sin fotografía.
Ejecuta esto confiablemente con Stackable
El resultado final
Artículos relacionados
Preguntas frecuentes
Stackable Team
Related Posts
Compra Uno, Obtén el Segundo al 50% de Descuento en Shopify: El Truco de 'No Descontar las Primeras N Unidades' y Sus Límites
El Límite de 100 Productos de Shopify en Buy X Get Y: Cómo Ejecutar Promociones de 3 por 2 en Tu Catálogo Completo
Shopify Ahora Permite Apilar Múltiples Descuentos de Productos en el Mismo Artículo (2026): Qué Cambió y Cómo Configurarlo