Widgets de la tienda online

Tres bloques dibujan tus ofertas por niveles en la página de producto: la Quantity Break Table, el Quantity Break Picker y la tabla Spend More Save More. Los colocas una vez en tu tema; a partir de ahí siguen al descuento, mostrando sus niveles y ocultándose cuando la oferta termina.

Configuración

Activa Show on storefront en el descuento.

Abre el descuento — un descuento por cantidad, un gasta más, ahorra más o una lista de precios — y activa Show on storefront. Está activado por defecto en un descuento por cantidad nuevo y en un descuento gasta más, ahorra más nuevo. La línea de estado de la tarjeta te dice exactamente qué recibirán los compradores, o por qué el widget permanece oculto.
Haz clic en Add junto al bloque que quieras.

El panel Add to your theme al final de esa tarjeta nombra cada bloque exactamente como lo nombra el editor de temas, con una línea sobre qué es y un botón Add que abre tu editor de temas con el bloque listo para colocar.
Coloca el bloque en el editor de temas y guarda.

Suelta el bloque donde corresponda en la página de producto — normalmente cerca del precio o del botón de compra — y haz clic en Save.
Ajusta la configuración del bloque en el editor de temas.

Cada etiqueta, color y comportamiento de abajo es una opción del editor de temas en el propio bloque.

Quantity Break Table

Lista todos los niveles de una oferta de descuento por cantidad como una tabla en la página de producto: la cantidad, lo que recibe el comprador y el precio.

General

Border color — el borde de la tabla. Por defecto #d9d9d9.
Roundness — radio de las esquinas, 0–24 px. Por defecto 8.
Borderless — desactivado por defecto. Activado, se quita el borde.

Header background — vacío usa el valor por defecto del diseño.
Header text — el color del texto de la cabecera.

Body

Cell padding — 4–32 px. Por defecto 14.
Body background
Body text
Highlight unlocked tier — activado por defecto. Resalta la fila que coincide con la cantidad seleccionada.
Highlight color — por defecto #e8f5e9.

Columns

Display quantities as range — desactivado por defecto. Activado, muestra “2–4” en lugar de “2+”.
Quantity label template — por ejemplo Buy {quantity}+; {quantity} se sustituye automáticamente. Vacío mantiene “2+”. Los rangos no se ven afectados.
Quantity label — por defecto “Buy”.
Show savings column — activado por defecto. Siempre se muestra en las ofertas de descuento por importe.
Savings label — por defecto “Get”.
Off-each label — por defecto “off each”. Se usa en las ofertas porcentuales.
Amount-off label — por defecto “off”. Se usa en las ofertas de descuento por importe; el importe es el total de los artículos que cumplen los requisitos, así que el valor por defecto habla del total, nunca de cada artículo.
Fixed-price label — por defecto “each”. Se usa en las ofertas de precio fijo.
Show prices column — activado por defecto. Se oculta automáticamente en las ofertas de descuento por importe y en los productos con más de 50 variantes.
Price label — por defecto “Price”.
Show original price — activado por defecto. Tacha el precio completo junto a cada precio con descuento.
Show base row — activado por defecto. Añade una fila a precio completo para las cantidades por debajo del primer nivel.

Message

Code hint prefix — por defecto “Use code”. Solo se muestra en los descuentos con código.
Linked message — texto opcional que se muestra encima o debajo de la tabla.
Message position — Above o Below. Por defecto Below.

Quantity Break Picker

La misma oferta como tarjetas de oferta pulsables entre las que el comprador elige y añade al carrito de una vez.

General

Heading — por defecto “Choose your bundle”.
Card border — por defecto #d9d9d9.
Selected accent — color del borde y del botón de opción de la tarjeta seleccionada.
Roundness — 0–24 px. Por defecto 8.
Card padding — 4–32 px. Por defecto 14.
Card background
Card text

Cards

Show single-item card — activado por defecto. Añade una tarjeta “Buy 1” encima de los niveles.
Single-item label — por defecto “Buy 1”.
Pre-selected tier — 0–10. Por defecto 0, que mantiene la selección por defecto. Solo cuenta los niveles que realmente se muestran, así que un nivel oculto nunca queda preseleccionado.
Tier label — por defecto Buy {quantity}; {quantity} se sustituye automáticamente.
Off-each label — por defecto “off each”. Se usa en las ofertas porcentuales.
Amount-off label — por defecto “off”. Se usa en las ofertas de descuento por importe, como cifra total.
Fixed-price label — por defecto “each”. Se usa en las ofertas de precio fijo (precio por artículo).
Per-product suffix — por defecto “of the same product”. Se muestra cuando la oferta cuenta por producto.
Per-variant suffix — por defecto “of the same variant”. Se muestra cuando la oferta cuenta por variante.
Show unit prices — activado por defecto. Se oculta automáticamente en las ofertas de descuento por importe y en los productos con más de 50 variantes.
Show original price — activado por defecto. Tacha el precio completo encima de cada precio con descuento.
Each label — por defecto “each”.
Most popular tier — 0–10. Por defecto 0 = sin etiqueta; 1 = el primer nivel.
Most popular text — por defecto “Most popular”.
Most popular background — por defecto #1a1a1a.
Most popular text color — por defecto #ffffff.

Button

Button text — por defecto “Add to cart”.
Added text — por defecto “Added!”.
Unavailable text — por defecto “Unavailable”.
After adding to cart — Go to the cart page (el valor por defecto), Refresh the page (para que el tema muestre el nuevo número de artículos del carrito) o Stay on this page (muestra una confirmación con un enlace al carrito).
In-cart text — por defecto {count} in cart. Se muestra después de añadir cuando te quedas en la página; {count} es cuántos de los artículos añadidos hay en el carrito.
Cart link text — por defecto “View cart”.
Button background — por defecto #1a1a1a.
Button text color — por defecto #ffffff.

Message

Code hint prefix — por defecto “Use code”. Solo se muestra en los descuentos con código.
Linked message — texto opcional que se muestra encima o debajo de las tarjetas.

Bundle composer

Let shoppers mix variants per tier — desactivado por defecto. Activado, el nivel seleccionado muestra una fila por artículo para que los compradores compongan el paquete. No se muestra en las ofertas por variante.
Bundle button text — por defecto “Add bundle”.
Items word — por defecto “items”. Se usa cuando no se puede mostrar un total en dinero: “Add bundle • 3 items”.
Unresolved text — por defecto “Choose options”.
Message position — Above o Below. Por defecto Below.

Spend More Save More

Lista todos los niveles de gasto de una oferta gasta más, ahorra más en la página de producto: gasta esto y te descuentan aquello.

General

Border color — por defecto #d9d9d9.
Roundness — 0–24 px. Por defecto 8.
Borderless — desactivado por defecto.

Header

Header background — vacío usa el valor por defecto del diseño.
Header text

Body

Cell padding — 4–32 px. Por defecto 14.
Body background
Body text
Highlight unlocked tier — activado por defecto. Resalta el nivel más alto que ha alcanzado el carrito.
Highlight color — por defecto #e8f5e9.

Columns

Spend label — por defecto “Spend”.
Savings label — por defecto “Get”.
Off-the-order label — por defecto “off the order”.
Off eligible items label — por defecto “off eligible items”. Se usa en lugar de la etiqueta off-the-order cuando el descuento excluye algunos artículos.

Message

Code hint prefix — por defecto “Use code”. Solo se muestra en los descuentos con código.
Linked message — texto opcional que se muestra encima o debajo de la tabla.
Message position — Above o Below. Por defecto Below.

Custom theme selectors

Los Sale Badges y los Price Drops encuentran su sitio en tu tema automáticamente. En un tema donde eso no funciona, Theme selectors en la página Promotions abre una ventana con tres selectores CSS opcionales que apuntan la app a los elementos propios de tu tema:

Badge container in product cards — el elemento dentro de cada tarjeta de producto donde se fijan las insignias. Una sola entrada cubre todas las páginas que muestran tarjetas de producto.
Price element on the product page — el elemento que contiene el precio en una página de producto, donde se muestra el precio con descuento.
Price element in product cards — el elemento que contiene el precio dentro de cada tarjeta de producto.

Deja un campo vacío para mantener la colocación automática. Cada selector tiene como máximo 200 caracteres y debe ser un selector CSS válido — el campo lo indica ahí mismo si no lo es. Un selector que no coincide con nada vuelve a la colocación automática, y un selector que no contiene ningún precio no pinta nada en lugar de tachar un número equivocado.

Cómo lo ve el comprador

Cada bloque se renderiza en la página de producto en el lugar donde lo colocaste, con los niveles reales de la oferta. El Quantity Break Picker además añade al carrito. Cuando la oferta no cubre el producto que el comprador tiene delante, o la oferta está pausada o ha terminado, el bloque no muestra nada en lugar de una promesa caducada.

Límites y notas

Un widget por producto. Cuando dos ofertas con la visualización activada cubren el mismo producto, allí solo se muestra un widget. La tarjeta Show on storefront del descuento los cuenta y ofrece Choose which one shows. Cada descuento se sigue aplicando según sus propias condiciones.
Los precios se ocultan por encima de 50 variantes. La columna de precios y los precios unitarios del Quantity Break Picker se ocultan automáticamente en las ofertas de descuento por importe y en los productos con más de 50 variantes.
Pausar la oferta oculta el widget — la tarjeta pasa a decir “Not shown (offer paused)” y deja de ofrecer el interruptor, así que una oferta pausada nunca puede parecer activa.
El interruptor de visualización solo afecta a la visualización. Desactivar Show on storefront oculta el widget; el descuento se sigue aplicando. Para detener el descuento, pausa la oferta.
Los Theme selectors son a nivel de tienda, no por promoción: guardarlos cambia la colocación de todos los Sale Badges y Price Drops de la tienda.

Relacionado

Barra de objetivo del carrito — el cuarto bloque, que muestra el progreso hacia el siguiente nivel de gasto.
Descuento por cantidad — el descuento detrás de la tabla y del Quantity Break Picker.
Gasta más, ahorra más — el descuento detrás de la tabla de gasto.
Lista de precios — el otro descuento que alimenta la tabla de niveles.
App embed — necesario para los Sale Badges y los Price Drops, no para estos bloques.