--- title: "Widget de suscripción: documentación de Subscriptions" description: "Agrega el widget de suscripción de Chargezen a tus páginas de producto de Shopify, elige una plantilla, define sus textos y su aspecto, y muestra ofertas antes de que el comprador agregue al carrito." url: "https://chargezen.com/es/docs/subscriptions/subscription-widget" lang: "es" updated: "2026-10-18" --- Canonical URL: https://chargezen.com/es/docs/subscriptions/subscription-widget # Widget de suscripción Agrega el widget de suscripción de Chargezen a tus páginas de producto de Shopify, elige una plantilla, define sus textos y su aspecto, y muestra ofertas antes de que el comprador agregue al carrito. Última actualización: 2026-10-18 El widget de suscripción es el recuadro de compra de tus páginas de producto donde los compradores eligen entre compra única o suscripción, eligen una frecuencia de entrega y agregan al carrito. Ahí empiezan la mayoría de las suscripciones, así que conviene que sea claro. Abre **Subscriptions → Customer experience → Subscription widget**. ## Configúralo 1 #### Crea un widget Elige **Create widget** y luego **Use template** en **Product widget** (un recuadro de compra compacto para cualquier página de producto) o en **Variant cards** (tarjetas de variantes, compra única o suscripción, y ofertas antes de agregar al carrito). 2 #### Edita los textos y el aspecto Recorre las secciones del editor (Content, Layout, Behavior, Style y otras). Usa **Previewing** para elegir un producto y los botones de computadora y teléfono para comprobar los dos tamaños. 3 #### Elige dónde se muestra En **Publish**, escribe un **Widget name** (solo lo ves tú) y pon **Show on** en **All products** o **Specific products**. 4 #### Guarda Elige **Save**. 5 #### Agrega el bloque a tu tema En **On your store**, elige **Add the block in Shopify**. En Shopify, abre **Online Store → Themes → Customize**, abre una plantilla de producto, agrega el bloque **Chargezen product widget** o **Chargezen variant cards** y guarda el tema. Empieza desde un plan En la tarjeta **Storefront widget** de un plan, **Customize widget** abre el widget para los productos de ese plan o empieza uno nuevo. ## Opciones de Product widget * **Content**: el texto de los botones (Add to cart, Buy now), el título y el subtítulo de la opción de compra única, el título, el subtítulo y el **Delivery selector label** de la opción de suscripción, y la etiqueta de la cantidad. Empiezan como “One-time purchase”, “Subscribe and save” y “Pause, skip, or cancel anytime.” * **Layout**: muestra u oculta el proveedor, el título del producto, el precio, el selector de variantes, las opciones de compra única y de suscripción, el selector de entrega, el selector de cantidad, Add to cart y Buy now. * **Behavior**: **Selected by default** (Auto, One-time o Subscription), **Shown first**, los límites de cantidad, y si el widget muestra las imágenes de la variante o actualiza la imagen del producto del tema. * **Rules**: **Allow preorders** con una ventana de confirmación, **Confirm before purchase** con un mensaje de advertencia, **Discount this product** con una etiqueta y un porcentaje de descuento, y **Offer all variants as a bundle**. * **Style**: colores y texto de los botones, colores del texto, colores de la selección, fondos y bordes. ## Opciones de Variant cards * **Content**: las tarjetas de compra única y de suscripción, el texto de los botones, el texto de agotado y el símbolo de la moneda. En el título de la suscripción, `{{savings}}` se convierte en el monto ahorrado. * **Layout**: precios, tarjetas de variantes y columnas, y qué tarjetas y botones se muestran. * **Offers**: agrega **Bundle (try them all)**, **Upsell**, **Buy more**, **Sell as another variant** o **Preorder**. Cada una tiene **Show this offer** y sigue desactivada hasta que completas sus campos obligatorios. Una venta adicional puede ofrecer otra oferta si se rechaza, o nada. * **Variants**: ordena las tarjetas por el precio más bajo, el más alto o en un orden propio; cambia el nombre de una variante, ocúltala o muéstrala como agotada. * **Behavior**: **Selected by default**; Auto selecciona la suscripción en los enlaces /start y /pay, y la compra única en todos los demás. * **Style** y **Custom CSS**: colores, esquinas, tipografía y CSS que se carga después de los estilos propios del widget (empieza los selectores con `#ketonaid-widget`). ## Qué widget usa un producto Un widget configurado en **All products** se muestra en todos los productos, salvo que un producto tenga su propio widget. Cuando varios widgets específicos incluyen el mismo producto, gana el de mayor **Priority**. La lista de widgets muestra de cada widget el **Type**, la **Template**, el **Status**, el **Scope** y las **Offers**. Usa **Filter** para ver los widgets All, Active o Draft, y el menú de la fila para **Edit** o **Delete**. ## Solución de problemas ### El widget no aparece en mi página de producto * Comprueba que el bloque esté agregado a la plantilla de producto que usas y que hayas guardado el tema. * Comprueba que el widget esté configurado para mostrarse en ese producto o en All products. * Comprueba que ningún otro widget con ese producto tenga una prioridad más alta. ### El widget aparece, pero no mi opción de suscripción * El plan debe estar en Active, incluir el producto y tener activado el canal **Online Store**. Ningún widget ofrece un plan oculto en Online Store. * Agrega productos al plan para que los compradores puedan suscribirse desde sus páginas de producto. ### El widget no se guarda Ponle nombre al widget y elige al menos un producto o muéstralo en todos los productos. ## Relacionado * [Ventas adicionales y cruzadas](https://chargezen.com/es/subscriptions/upsells-and-cross-sells): convierte a quienes compran una vez en suscriptores. * [¿Empiezas con suscripciones?](https://chargezen.com/es/subscriptions/getting-started): lanza tu primer programa. * Glosario: [suscríbete y ahorra](https://chargezen.com/glossary/subscribe-and-save), [página de producto](https://chargezen.com/es/glossary/product-detail-page), [agregar al carrito](https://chargezen.com/es/glossary/add-to-cart). ### Artículos relacionados [ #### Crear planes de suscripción Los planes que ofrece el widget ](https://chargezen.com/es/docs/subscriptions/create-product)[ #### Cómo funcionan los planes de venta Por qué importa el canal Online Store ](https://chargezen.com/es/docs/subscriptions/selling-plans-explained)[ #### Paquetes de caja a tu medida Una caja que tus clientes llenan a su gusto ](https://chargezen.com/es/docs/subscriptions/build-a-box) ¿Te resultó útil esta página? ¿Necesitas más ayuda? [Contactar con soporte](https://chargezen.com/docs/checkoutos/troubleshooting/support)