Skip to main content
El bloque Discount code es un campo donde los compradores pueden ingresar y aplicar un código promocional en el carrito, de modo que vean el descuento reflejado antes de comprometerse con el checkout.
Bloque Discount code con campo de entrada y botón Apply en el drawer del carrito

​
Comportamiento

  • Al aplicar, el código se recorta, se convierte a mayúsculas y se envía a Shopify. Como Shopify acepta la solicitud sea o no válido el código, el bloque luego vuelve a verificar el carrito para confirmar que el código realmente se aplicó.
    • Válido → el campo se limpia y el descuento se aplica.
    • Inválido → el bloque muestra “Invalid discount code.”
  • Cómo se acumula un código con otros descuentos (descuentos automáticos, otros códigos) lo maneja por completo Shopify — el bloque solo aplica el código.
  • Los códigos aplicados se muestran en el bloque Summary, no aquí.

​
Configuraciones

​
Ubicación y límites

  • Región: cuerpo o parte inferior.
  • Máximo: 1 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
  • Estado: con artículos y vacío.
  • No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.

​
Plantilla personalizada

Admite una plantilla personalizada desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.
Conecta tanto setDiscountCodeInput como handleSubmit. Sin el primero, no se puede escribir en el campo; sin el segundo, un código nunca se aplica.

​
Diseño

Dale estilo a este bloque con su sección Design en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco. ¿Qué son las configuraciones de diseño? Aprende más aquí: Configuraciones de diseño.