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.

Actualizado el: 24/10/2026