> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Diseñar tu propio widget El diseñador de widgets personalizados te permite escribir tú mismo el HTML y el CSS de tu widget de suscripción, de tus opciones de paquete y del recuadro que los rodea, para que el widget se vea exactamente como el resto de tu página de producto. Está en fase beta: pídenos por el chat que lo activemos para tu tienda. ## Abrir el diseñador 1. Ve a **Supr Bundles & Subscriptions > Diseño**. 2. Haz clic en el diseño **Custom (Liquid)**. La primera vez, se abre el diseñador para que crees tu diseño. Haz clic en **Guardar** para conservar los cambios. Cada cambio que guardas queda en **Versiones**, así que siempre puedes volver atrás. ## Usar tu diseño en tu tienda Una vez guardado tu diseño, puedes elegir **Custom (Liquid)** en la página Diseño como cualquier otro diseño, para el widget de suscripción, para el widget de paquete o para ambos. Elígelo y guarda la página Diseño. A partir de ese momento, cada vez que guardas en el diseñador, el cambio se publica al instante en los widgets que lo usan. ## Las tres pestañas * **Widget de suscripción**: las opciones de suscripción y la fila de compra única. * **Opciones de paquete**: la barra del paquete y cada una de sus opciones, incluidas Arma tu caja, los paquetes fijos, los complementos y los regalos. * **Disposición**: todo lo que muestra el bloque de la aplicación, en un solo recuadro: el título de la oferta, el widget de suscripción, las opciones de paquete y un botón de agregar al carrito y un selector de cantidad propios. La pestaña **Disposición** tiene un único interruptor, **Usar esta disposición**: si está activado, tu disposición coloca el título de la oferta, ambos widgets y tu propio botón de agregar al carrito en todas las páginas de producto. Las otras dos pestañas siguen la página Diseño, como se explica arriba. Cada pestaña tiene una lista **Empezar desde una plantilla**. Una plantilla reemplaza solo el marcado y la hoja de estilos de esa pestaña, así que puedes empezar tus opciones de paquete con una plantilla y tu widget de suscripción con otra. ## Importar un diseño de nuestro equipo de soporte Cuando nuestro equipo crea un diseño para ti, te lo envía como un único bloque de texto. 1. Abre el diseñador y haz clic en **Importar diseño**. 2. Pega el bloque completo y haz clic en **Importar**. Reemplaza todas las plantillas, hojas de estilos y etiquetas de las tres pestañas. 3. Revisa la vista previa y haz clic en **Guardar**. 4. Si tu tienda aún no usa el diseño, elige **Custom (Liquid)** para el widget en la página Diseño. Un diseño también puede traer el color de tu marca, el redondeo y el espaciado de la página Diseño. El diseñador los muestra en un banner antes de guardar, y al guardar se conservan con el diseño. También cambian el estilo de tus otros widgets; haz clic en **Mantener la página Diseño como está** para guardar el diseño sin ellos. ## Cómo funciona una plantilla Una plantilla es HTML normal con cadenas de Liquid entre llaves dobles, como `{{ selling_plan.name }}` o `{{ tier.price | money }}`. Escribe `{{` en el editor para ver todas las cadenas que acepta la parte que estás editando, con lo que muestra cada una; la sección **Referencia** también las enumera. Cualquier otra cosa entre llaves dobles, y cualquier etiqueta de Liquid que no sea un comentario, se rechaza indicando la línea en la que está. No hay condiciones. Para ocultar algo que no tiene valor, usa CSS: un precio o una insignia vacíos no muestran nada, así que `:empty` oculta su elemento. La opción de suscripción elegida tiene un botón de opción marcado (`.sss-liquid-row:has(> input:checked)`) y la opción de paquete elegida tiene la clase `.sss-bundle-block__tier--selected`. La aplicación mantiene las partes que tu tienda necesita para funcionar: los botones de opción, los selectores de variante, los selectores de cantidad y los datos que lee la tienda online para mantener los precios al día y añadir los artículos correctos al carrito. Tu marcado va alrededor y dentro de ellos. ## Widget de suscripción * **Contenedor**: todo lo que rodea a las opciones, como un encabezado o una fila de confianza. Coloca las opciones con `{{ sss.options }}`. También puedes colocar `{{ sss.one_time }}`, `{{ sss.add_to_cart }}` y `{{ sss.quantity }}`. * **Grupo de la oferta**: se dibuja una vez por oferta. Muestra sus opciones como filas con `{{ sss.group.options }}`, o convierte toda la oferta en una tarjeta con un desplegable (`{{ sss.plan_picker }}`) o con botones (`{{ sss.plan_picker_pills }}`). * **Opción de suscripción** y **Compra única**: una fila cada una. * **Línea de beneficio**, **Regalo** y **Recompensa de fidelidad**: el aspecto de un beneficio, regalo o recompensa, colocados en una opción con `{{ sss.benefits }}`, `{{ sss.gifts }}` y `{{ sss.rewards }}`. Los precios incluyen el ahorro, el precio por día, por ración y por unidad, el precio después de los primeros pedidos y la línea de cobro. Para mostrar un precio por ración, añade el campo **Raciones** en **Campos de producto** y rellénalo en cada variante. ## Opciones de paquete * **Barra del paquete**: todo lo que rodea a las opciones. Colócalas con `{{ sss.tiers }}`. * **Opción de paquete**: una opción, por ejemplo un tamaño de pack. Puede mostrar el título, la insignia, el precio, el precio completo, el precio por unidad y el ahorro de la opción. Coloca el constructor, los productos de un paquete fijo, los complementos, los regalos y los selectores de variante donde quieras con `{{ sss.tier.builder }}`, `{{ sss.tier.products }}`, `{{ sss.tier.addons }}`, `{{ sss.tier.gifts }}` y `{{ sss.tier.variant_pickers }}`. Lo que dejes fuera sigue tu marcado. * **Producto del paquete**: el aspecto de un producto en un paquete fijo, en una opción Arma tu caja y en los complementos: su imagen, título, precio, proveedor y adhesivo. Para mostrar un adhesivo como "Más vendido" en un producto, añade el campo **Adhesivo del paquete** en **Campos de producto** y rellénalo en el producto. Tradúcelo con Translate & Adapt de Shopify. Los adhesivos se muestran en los primeros 20 productos de paquete de una página. Activa **Mostrar un grupo de productos a la vez** para mostrar los grupos de una opción Arma tu caja como pestañas, con un grupo abierto cada vez. Cada pestaña muestra el nombre y el subtítulo del grupo, que defines en el grupo en **Ofertas**. ## Etiquetas y traducciones Tus propios textos van en **Etiquetas**, y muestras uno con `{{ sss.labels.name }}`. Una etiqueta usada dentro de una opción de suscripción puede incluir los valores de esa opción, como `Billed {price} {billing_frequency}`, para que toda la frase siga siendo una sola etiqueta en cada idioma. Traduce tus etiquetas en **Configuración > Traducciones > Widgets**. Las etiquetas de una plantilla empiezan en el idioma de tu tienda. Al guardar, cada etiqueta que no hayas reescrito también se traduce a los demás idiomas de tu tienda, salvo que ya la hayas traducido tú. Las etiquetas que escribes tú son tuyas para traducirlas. ## Hojas de estilos Cada pestaña tiene su propia hoja de estilos. Al guardar, cada regla se limita a la parte que estiliza, así que tu CSS no puede cambiar el resto de tu tema. La hoja de estilos no puede cargar scripts ni llegar fuera del widget. ## Vista previa La vista previa junto al editor dibuja tu diseño tal como lo hará la tienda online. Elige uno de los productos de ejemplo, o haz clic en **Vista previa de un producto de tu tienda** para verlo en uno de los tuyos. Las fuentes y los estilos propios de tu tema solo se ven en tu tienda. La vista previa no ejecuta tu JavaScript. ## JavaScript El cuadro **JavaScript** de la parte inferior del diseñador contiene un script para tu diseño. Se ejecuta una vez en cada página donde tu diseño dibuja el widget de suscripción o las opciones de paquete, después de que se dibujen. Una página puede mostrar más de un widget, así que búscalos todos con `document.querySelectorAll`. ## Lo que el diseñador no hace * Una plantilla no puede usar los nombres de clase ni los atributos de datos propios de la aplicación (como `purchase-option-*` o `data-tier-total`); el editor te dice cuál cuando lo rechaza. * Damos soporte al diseñador en sí. Crear y mantener el marcado y el CSS de tu diseño corre por tu cuenta o de tu desarrollador.