El widget de suscripción

En la página Diseño controlas cómo se ven tus widgets de suscripción y de paquetes en tus páginas de producto: el diseño, los colores, las esquinas y el espaciado, qué partes se muestran, los textos que leen los clientes y tu propio CSS. Los dos widgets se diseñan juntos en esta misma página, para que combinen entre sí y con tu tema. Es la experiencia de widget unificada: un solo conjunto de controles, los dos widgets, todos los diseños.

Si la página dice Tus widgets aún no están activos, haz clic primero en Activar widget. Consulta Cómo activar el widget de suscripción en la tienda online.

Índice

• ¿Qué es el widget de suscripción?
• Cómo está organizada la página
• La vista previa
• Diseño
• Colores
• Forma
• Espaciado
• Fuente
• Elementos
• Encabezados y el título de la oferta
• Cómo leer una fila de elemento
• Insignias
• Colores predeterminados y personalizados
• Precios
• El orden en que aparecen las cosas
• Etiquetas
• CSS personalizado
• Diseños por oferta
• Guardar los cambios
• Restaurar tu diseño anterior
• La línea Powered by Supr
• Obtener ayuda con tu diseño
• Consejos y buenas prácticas
• Preguntas frecuentes
• Guías relacionadas

¿Qué es el widget de suscripción?

Lo que ofrecen los widgets (qué opciones, qué descuentos y si se muestra la fila de compra única) se configura en cada oferta, en Ofertas. Cómo se ven los widgets, y los textos compartidos que muestran, se configura en esta página.

Cómo está organizada la página

• La vista previa a la izquierda, que te acompaña mientras te desplazas.
• Una tarjeta de configuración a la derecha, con sus secciones en este orden: Diseño, Colores, Forma, Espaciado, Fuente, Elementos y CSS personalizado.
• Etiquetas, una tarjeta propia debajo de la tarjeta de configuración, para los textos que leen tus clientes.
• Configuración de complementos debajo de ambas, para los extras alrededor del widget, como la insignia junto al precio del producto, el texto del botón de añadir al carrito y el selector de fecha de entrega. Consulta Complementos de la página de producto.
• Restaurar diseño anterior, solo en tiendas que personalizaron sus widgets antes de que existiera esta página.
• ¿Quieres ayuda para adaptarlo a tu marca?, con un botón Chatear con un experto que abre un chat con nuestro equipo.

La vista previa

La vista previa está junto a los controles y te acompaña mientras te desplazas, para que veas lo que cambias mientras lo cambias. Muestra tu página de producto como la ve un comprador, con los widgets de paquetes y de suscripción apilados en el orden en que se muestran realmente, y el campo de fecha de entrega debajo si lo usas.

Usa Producto de vista previa encima de ella para ver la vista previa con las opciones y los precios de un producto real en lugar de datos de ejemplo, y Variante de vista previa para revisar un producto cuyas variantes tienen precios distintos.

Cada cambio aparece en la vista previa antes de guardar, así que puedes probar varias cosas y descartarlas. En una pantalla de escritorio, la vista previa nunca es más alta que la ventana: su encabezado y su pie se quedan fijos y los widgets se desplazan entre ellos.

Diseño

Esta sección muestra el diseño de suscripción y el diseño de paquete que están activos ahora, cada uno con una miniatura.

1. Haz clic en Cambiar para abrir Elige un diseño.
2. Usa el selector de arriba para elegir Widget de suscripción o Widget de paquetes. Puedes escribir en Buscar diseños o filtrar por categoría.
3. Haz clic en el diseño que quieras. La galería se cierra y la vista previa lo muestra.
4. Guarda con la barra de guardado de la parte superior de la página. No cambia nada en tu tienda hasta que guardes.

Diseños de suscripción, por categorías de la galería:

• Conversión
• • Checkbox: una sola casilla para cambiar entre compra única y suscripción.
  • Aurora: bordes con degradado fluido y efecto de brillo. Con el que empieza una tienda nueva.
  • Lure: el diseño estrella, con ventajas destacadas y un banner de descuento.
• Clásicos
• • Classic+: un diseño detallado con espacio para opciones prepagadas y varias elecciones. El precio está arriba y sigue la opción que ha elegido el cliente, y cada opción conserva su propio precio con su etiqueta de descuento al lado.
  • Dropdown+: todo el detalle en un desplegable compacto. El precio está arriba y sigue la opción que ha elegido el cliente, así que las filas del desplegable son una simple lista de frecuencias.
  • Panel+: un diseño con pestañas y un botón de opción en cada opción.
• Minimalistas
• • Classic: un diseño sencillo para opciones de pago por pedido con hasta tres elecciones.
  • Dropdown: la forma más compacta de mostrar tus opciones.
  • Panel: botones de panel limpios y sencillos.
• Estéticos
• • Blobs: un estilo animado para captar la atención.

Diseños de paquete:

• Panels: filas, cada una en su propio panel con borde. Con el que empieza una tienda nueva.
• Cards: tarjetas horizontales, buenas para comparar dos o tres opciones una junto a otra.
• List: filas verticales con un botón de opción en cada opción. El más compacto.

Todos los diseños se personalizan desde esta página, en las secciones de abajo, así que no hay nada que abrir ni nada que configurar dos veces. Solo hay un diseño de suscripción y un diseño de paquete activos a la vez en tu tienda, y todas las ofertas los usan. La configuración de los demás se conserva, así que cambiar de uno a otro no te cuesta nada.

Cambiar de diseño nunca afecta a tus ofertas, a tus precios ni a tus suscriptores.

Una vez que has guardado cambios en esta página, aparece un botón Restablecer valores predeterminados en esta sección. Devuelve tus colores, forma, espaciado, fuente, elementos, etiquetas y CSS personalizado a los valores con los que viene la app, en todos los diseños, y mantiene el diseño de suscripción y el de paquete que tienes publicados. Como todo lo demás aquí, solo se aplica cuando guardas.

Colores

Una sola decisión, que se escribe en todos los diseños a la vez, para que si cambias de diseño más adelante tu tienda mantenga su aspecto. Cada tipo de respuesta está en su propia línea bajo un pequeño encabezado:

• De tu tema, primero: la muestra discontinua Heredar de tu tema toma todo de tu tema, seguida de los propios esquemas de color de tu tema, mostrados como muestras con sus propios colores. Al elegir un esquema se toman su fondo y su texto. Esta línea solo aparece si tu tema publica esquemas de color.
• Color principal y Fondo, en temas que publican una paleta de colores en lugar de esquemas de color, como Horizon. Consulta más abajo.
• Un color, y todo lo demás lo sigue: los colores normales, recorriendo la rueda de color del azul al rosa y el rojo, con los neutros al final y los tuyos al final del todo. Al elegir uno defines tu color primario, y todo lo que dibujan los widgets lo sigue: la opción que ha elegido el cliente, los bordes, los botones de opción y las insignias de ahorro. El texto de una insignia se elige por ti para que siga siendo legible sea cual sea el color que elijas. Para la mayoría de las tiendas, con esto basta.
• Degradado: trece mezclas prediseñadas, cada una dibujada con sus propios colores, empezando por Aurora y terminando en la única neutra, Tinta y plata. Entre ellas están Medianoche, Flor, Rosa, Atardecer, Arena, Brasa, Menta, Bosque, Océano, Laguna y Amatista. Elige una y sus tres paradas aparecen debajo, Base, Segundo y Tercero, para que puedas ajustarlas. Esta línea solo aparece mientras está publicado un diseño que puede dibujar un degradado; en los demás no tendría nada que hacer.

Si tu tema publica una paleta de colores en lugar de esquemas de color, no hay ningún par que heredar, así que eliges uno tú mismo en dos filas dibujadas con los propios colores del tema:

• Color principal es el color con el que se dibujan tus widgets: la opción que ha elegido el cliente, los bordes, los botones de opción y las insignias. Tus textos lo siguen, así que no hay nada más que configurar.
• Fondo es la tarjeta que hay detrás.

Un color no puede ser las dos cosas, así que si eliges uno que ya usa la otra fila, se intercambian. Invertir un par claro sobre oscuro es un solo clic en lugar de tres.

Son alternativas, no capas, porque responden a la misma pregunta. Un degradado es un color como cualquier otro: su parada Base es la que toma el resto del widget, así que la opción elegida, los bordes y las insignias la siguen. Si eliges un color liso, esos diseños se dibujan planos, y si eliges un esquema del tema, se toma el par de ese esquema y el color se deriva de su texto.

Un degradado llega a todo lo del widget que está pensado para llamar la atención, no solo a su contorno. En la opción que ha elegido el cliente dibuja el nombre de la opción y el precio. En todas las opciones, elegidas o no, dibuja las insignias, las etiquetas de ahorro y las líneas de regalo y envío gratis. Las líneas de regalo y envío gratis se mueven despacio, lo que atrae la mirada sin apartarla del precio. Tu insignia de descuento toma la mezcla en todos los diseños, porque la insignia de una opción de suscripción y la de una opción de paquete son el mismo objeto; dale a la insignia un color propio en su fila de Elementos y conservará ese color.

Una línea de regalo o de envío gratis se dibuja con el contorno en tu color mientras su opción no está elegida, y se rellena con él cuando un cliente elige esa opción. Esto ocurre tanto con un color liso como con un degradado, así que una fila de opciones muestra un único bloque de color sólido, en la opción que el comprador ha elegido de verdad, y el resto se lee como ofertas a la espera.

Sea cual sea la mezcla que elijas, el texto que se imprime sobre ella se elige para que siga siendo legible. La opción individual se queda al margen: es la fila sencilla de una unidad a precio completo, no una oferta, así que conserva un contorno normal y su precio en tu color habitual.

Configura esto primero y luego usa Elementos más abajo solo para las partes que quieras distintas.

Forma

• Redondeo define lo redondeadas que son las esquinas.
• Grosor del borde define el ancho de los bordes.

En un diseño que dibuja un borde con degradado, el grosor también define ese borde, así que el degradado y los bordes planos de al lado salen con el mismo grosor. La opción que ha elegido el cliente, y la que está bajo su puntero, se marcan con su color con ese mismo grosor, no con un anillo más grueso propio. El redondeo también se aplica dentro de una opción de paquete: las filas de regalo, envío gratis y complementos se redondean a juego.

Espaciado

El espaciado tiene tres partes:

• Dentro de cada opción: Relleno superior y Relleno inferior definen el espacio encima y debajo del contenido de cada opción de suscripción y de paquete. Si no tocas el inferior, sigue al superior. Relleno horizontal define los dos lados.
• Entre los widgets: Separación es el espacio entre el widget de paquetes, el widget de suscripción y el campo de fecha de entrega, para cuando las piezas quedan demasiado juntas o demasiado separadas.
• Alrededor del widget: Espacio superior y Espacio inferior de todo el conjunto. Úsalos cuando tu tema coloque el widget demasiado cerca del botón de añadir al carrito o del precio.

Todo se aplica a tus widgets de suscripción y de paquetes a la vez, y al campo de fecha de entrega que hay debajo.

Fuente

Una sola fuente para tu widget de suscripción y tus opciones de paquete juntos, títulos incluidos:

• Sigue tu tema, la opción predeterminada: los títulos usan la fuente de encabezado de tu tema y todo lo demás su fuente del cuerpo, la misma separación que hace tu tema.
• Fuente del cuerpo del tema o Fuente de encabezado del tema: todo el widget en esa única tipografía.
• Sistema, Serif o Monoespaciada: una fuente que ya tienen todos los dispositivos.
• Personalizada: escribe el nombre de una fuente que tu tema ya cargue, como Futura PT, exactamente como la nombra tu tema. Puedes indicar varias, separadas por comas, y se usa la primera que tenga el navegador. Solo se conservan letras, números, espacios, comas y guiones. Si el navegador no la tiene, el widget recurre a la fuente del cuerpo de tu tema.

La app nunca carga una fuente por sí misma, así que una fuente personalizada solo se muestra si tu tema (u otra app) ya la carga en la página de producto. Los tamaños y grosores se quedan en cada fila de Elementos.

Elementos

Esta sección es una fila por cada parte del widget, listadas en el orden en que se lee la página de producto. Una fila se aplica a todos los diseños que tienen esa parte, así que ocultar el encabezado lo oculta en todos, y una fila que tu diseño publicado no puede respetar no se muestra.

• Ambos widgets: Título de la oferta, Mostrar variantes como muestras, Insignia de descuento, Insignia de descuento en cada opción (solo en Classic+) e Insignia de mensaje.
• Opciones de suscripción: Encabezado, luego la superficie (Fondo, Borde, Botón de opción) y después el texto que lleva: Nombre de la oferta, Encabezado de la sección, Nombre de la opción, Descripción, Frecuencia de entrega, Precio, Precio tachado, Precio por unidad, Ventajas, Icono de ventaja, Encabezado de las ventajas e Información emergente.
• Opciones de paquete: Encabezado, Fondo, Borde, Botón de opción, Título, Precio, Precio tachado y Precio por unidad.
• Fecha de entrega: Encabezado, Campo y Borde, el estilo del campo de fecha que hay debajo de los widgets. Esta sección solo aparece cuando el Selector de fecha está activado en Configuración de complementos. Consulta Complementos de la página de producto.
• Diseño de la página: Paquete arriba, si el widget de paquetes va encima del widget de suscripción, y Sincronizar precios de paquete, si los precios de paquete siguen el precio por entrega de la suscripción seleccionada. Los dos están activados de forma predeterminada.

Dentro de Opciones de suscripción y Opciones de paquete, un pequeño encabezado Solo en este diseño marca las filas que pertenecen al diseño que tienes publicado y a ningún otro. La lista cambia con el diseño que publiques. Por ejemplo:

• Desplegable de entrega, en los diseños que muestran un selector para la frecuencia de entrega (Dropdown, Dropdown+, Lure y Checkbox): su relleno, el texto y la flecha que contiene, y el tamaño y grosor de ese texto.
• Borde grueso y Ocultar la descripción hasta que se elija, en Aurora.
• Borde grueso en las opciones de paquete, en los diseños que pueden dibujarlo.

Las dos secciones de widget se listan en el orden en que los widgets se apilan en tu página de producto, así que el que un comprador ve primero es el primero al que llegas. Cambia Paquete arriba y se intercambian al instante.

Encabezados y el título de la oferta

Una página de producto puede llevar un título de oferta y hasta tres encabezados de sección.

Título de la oferta es una fila de Ambos widgets. Imprime el nombre de tu oferta una vez, arriba del todo, encima de las opciones de paquete, las opciones de suscripción y la fecha de entrega. Es el Nombre de la oferta que le diste a la oferta en la página Ofertas, así que si renombras la oferta, la página lo sigue. Está desactivado hasta que lo actives, y su color, tamaño y grosor se configuran en la fila.

Mostrar variantes como muestras es una fila de Ambos widgets. Con ella activada, cada elección de variante de los dos widgets muestra cada opción como muestras en lugar de un desplegable: las cajas de crea tu propio paquete y su lista de productos, los complementos, los regalos gratis (en opciones de paquete y de suscripción), los productos de un paquete fijo y las elecciones por artículo en los descuentos por cantidad y en Compra X y llévate Y. Donde hayas definido un color o una imagen en el valor de la opción en Shopify (la muestra de una opción de Color, por ejemplo), la muestra lo refleja; otras opciones, como las tallas, muestran su nombre. Un valor agotado aparece tachado y no se puede elegir. Las muestras toman los colores de tu widget: la elegida se dibuja con tu color de acento. Las muestras vienen de los valores de opciones de producto de Shopify: abre el producto en Shopify y, en Variantes, conecta su opción de color con el metacampo de categoría Color y elige la muestra de cada valor (consulta la guía de Shopify, Using category metafields). Está activada en tiendas nuevas y desactivada en tiendas que se instalaron antes, hasta que la actives.

Cada sección tiene su propia fila de Encabezado, con su propio interruptor, color, tamaño, grosor y disposición: Opciones de suscripción > Encabezado, Opciones de paquete > Encabezado y Fecha de entrega > Encabezado. Las disposiciones son:

• Centrado con líneas, el encabezado en el centro con una línea que sale a cada lado. Con la que empieza una tienda nueva.
• Centrado, el encabezado en el centro sin líneas.
• Sencillo, el encabezado solo, al principio de la fila.

Lo que dice cada encabezado se configura en un sitio distinto:

• Encabezado de suscripción: el campo Título de la sección de Etiquetas. Empieza como {{subscription_name}}, que imprime el Nombre de la suscripción de la oferta, el nombre que le pusiste a la oferta encima de sus opciones de suscripción (traducido con la oferta). Escribe tus propias palabras ("¡Que nunca se te acabe!") o mezcla las dos cosas ("{{subscription_name}}, cancela cuando quieras"). Si lo dejas vacío, el campo funciona como {{subscription_name}}.
• Encabezado de paquete: el campo Nombre del paquete de la oferta, encima de sus opciones de paquete. Si lo dejas vacío, el encabezado dice "Compra en paquete y ahorra". Para no mostrar ningún encabezado de paquete, desactiva Opciones de paquete > Encabezado en Elementos.
• Encabezado de la fecha de entrega: Encabezado del selector de fecha, en Configuración de complementos > Selector de fecha.

Cómo leer una fila de elemento

Una fila es una línea. El nombre del elemento a la izquierda con su interruptor al lado y, en columnas a la derecha:

• Su color, como una muestra en la que haces clic para abrir el selector de color.
• Su color en la opción que ha elegido el cliente, como una segunda muestra, en las partes que se ven distintas una vez elegidas.
• Su tamaño de texto, en píxeles.
• Su grosor de texto, de fino a extranegrita.

Lo que cambia de una fila a otra es el interruptor: el nombre de la opción, los fondos y los bordes no se pueden ocultar, así que esas filas no tienen interruptor, y los fondos y bordes solo tienen color, porque no tienen texto cuyo tamaño ajustar.

Dos campos no pertenecen a ninguna de esas columnas, así que están en una línea propia debajo de ellas: una Separación, para un elemento formado por más de una línea, y una Disposición del precio. La lista de ventajas tiene la primera, y el precio tachado tiene las dos.

En una pantalla estrecha, los controles bajan a su propia línea debajo del nombre. El estilo solo aparece mientras el elemento está activado, y un cambio se escribe en todos los diseños que tienen el elemento, así que si cambias de diseño más adelante, tu estilo se mantiene. Pasa el cursor sobre el nombre de una fila para ver qué abarca.

Insignias

Hay dos insignias, y son dos filas de Ambos widgets porque cada una se configura una sola vez para los dos widgets:

• La Insignia de descuento se calcula a partir de tu descuento, y dice "-20 %" en una opción de suscripción y "Ahorra un 20 %" en una opción de paquete.
• La Insignia de mensaje es la que escribes tú en una opción de paquete, en su campo Insignia, como "La más popular".

Cada una lleva su propia forma, color de fondo, color de texto, tamaño de texto y grosor de texto. Los colores de la insignia de descuento empiezan en predeterminado, que sigue tu color primario; elige un color en la fila para definir el tuyo.

Hay cuatro formas:

• Burbuja, una píldora redondeada junto al título.
• Etiqueta, una etiqueta de equipaje con una punta en su borde inicial.
• Flotante, la píldora separada de la fila con una sombra suave debajo.
• Cinta, una tira pegada al borde superior de la fila. Con la que empieza una tienda nueva en la insignia de descuento.

Flotante y Cinta salen de la fila, así que son las dos que preguntan en qué punto de ella deben ir: Inicio, Centro o Final.

Colores predeterminados y personalizados

Todos los colores de una fila de elemento empiezan en predeterminado, y predeterminado significa tu color primario dondequiera que el primario controle esa parte: el borde, el botón de opción, el fondo al estar seleccionado. Defínelo una vez en Colores y todos lo siguen.

Los distingues por la muestra. Un contorno discontinuo significa que el color sigue todavía tu paleta; uno sólido significa que lo definiste tú. Una muestra de cuadros significa que el texto no tiene color propio y toma el del texto que lo rodea, hasta que elijas uno. Pasa el cursor por encima para ver cuál es y qué color es.

Haz clic en la muestra y elige un color, y esa parte se desvincula y mantiene tu color sea cual sea el primario. Para devolverla, haz clic de nuevo en la muestra y elige Usar predeterminado: la parte vuelve a unirse y toma el color primario actual.

Las partes que el primario no controla, como el nombre de la opción o el precio tachado, leen predeterminado como el color con el que viene el diseño. En un diseño que dibuja un degradado, el borde lee predeterminado como el degradado.

Precios

Los precios tienen sus propias filas dentro de Elementos, y los dos widgets se mantienen separados para que puedas cambiar uno y dejar el otro como está. Para cada widget puedes desactivar:

• Precio, el importe de cada opción de suscripción o de paquete.
• Precio tachado, el precio completo tachado junto al precio con descuento.
• Precio por unidad, el precio por artículo, como "3,50 $ cada uno". Empieza desactivado en el widget de suscripción y activado en las opciones de paquete.

Invitación a un pack mayor (opciones de paquete, desactivada salvo que la actives) agrega un enlace debajo de los descuentos por cantidad como "Añade 1 más y ahorra un 15 %" mientras un comprador tiene elegido un pack más pequeño y uno mayor ahorra más. Al hacer clic se elige el pack mayor. Solo se muestra en descuentos por cantidad simples, no en una caja personalizable, un paquete fijo, Compra X y llévate Y ni una opción con un regalo gratis, y su texto es el campo Invitación a un pack mayor de Etiquetas.

El motivo habitual para desactivar un precio es que tu tema ya lo imprime encima del widget y prefieres no decirlo dos veces. Para mostrar solo el precio por unidad, desactiva Precio y activa Precio por unidad.

Los tres llevan un color, un tamaño y un grosor. La fila Precio de suscripción también lleva la segunda muestra, para el precio de la opción que ha elegido el cliente.

La fila Precio tachado de suscripción lleva dos campos más, en una línea debajo de su tamaño y grosor:

• Disposición del precio: En paralelo mantiene los dos precios en una línea. Apilado pone el precio tachado en su propia línea encima del actual.
• Separación, el espacio entre los dos precios, en píxeles.

Cada diseño conserva sus propias respuestas, así que configurarlas en el diseño que tienes publicado deja los demás como estaban.

El orden en que aparecen las cosas

• Qué widget va primero: Elementos > Diseño de la página > Paquete arriba. Activado de forma predeterminada; desactívalo para poner el widget de suscripción encima de las opciones de paquete.
• El orden de las opciones de suscripción: abre la oferta en Ofertas y arrastra las opciones por su asa en Opciones de suscripción, y guarda la oferta. La tienda las muestra en ese orden.
• La fila de compra única: en la oferta, usa las flechas arriba y abajo de la fila Compra única para ponerla al principio o al final de la lista.
• El orden de las opciones de paquete: arrástralas en Opciones de paquete en la oferta. La fila de la opción individual se mueve arriba o abajo de la misma forma que la fila de compra única.
• Qué opción está seleccionada al cargar la página: haz clic en Establecer como predeterminada en esa fila de la oferta. Consulta Configurar la opción predeterminada.
• Un producto en más de una oferta: la suscripción de cada oferta es su propio grupo en el widget. Define el orden de los grupos en Configuración de complementos > Orden de ofertas. Ese orden también se usa en la pantalla de pago.

Etiquetas

Aquí cambias el texto que leen tus clientes, en el idioma principal de tu tienda. Está debajo de la tarjeta de configuración, en una tarjeta propia. Cada campo se aplica a todos los diseños de ese widget, así que tus textos se mantienen al probar otro diseño, y la tarjeta solo lista los campos que tu diseño publicado imprime de verdad.

• Widget de suscripción: Título de la sección (acepta {{subscription_name}} para el Nombre de la suscripción de la oferta), Fila de compra única, Insignia de descuento, porcentaje, Insignia de descuento, importe, Insignia de descuento, precio fijo, Encabezado de las opciones de suscripción, Línea de prepago, Banner de descuento, Título de la información emergente, Fila de opción (la línea que se imprime por cada frecuencia de la lista), Precio por unidad y los sufijos de frecuencia de Cada día a Cada N años ("/ mes", "/ {{n}} semanas").
• Widget de paquetes: Etiqueta de ahorro, porcentaje, Etiqueta de ahorro, caja escalonada, Etiqueta de ahorro, importe, Sufijo por unidad ("/cada uno"), Fila de envío gratis, Opción individual, Fila de regalo e Invitación a un pack mayor ("Añade {remaining} más y ahorra un {value} %").
• Caja personalizable: todo lo que imprime una opción de caja personalizable alrededor de sus elecciones, como el Encabezado 'Incluye', el Encabezado de las opciones, la Invitación a elegir, el Contador de selección y Mínimo no alcanzado ("Elige al menos {min} artículos").
• Recompensas y regalos: los encabezados encima de las recompensas de Compra X y llévate Y y de los regalos gratis, y la palabra Gratis impresa como su precio.

Algunos campos usan marcadores entre llaves, y cada campo indica qué representa cada uno. Mantenlos en tu texto y muévelos donde la frase lo necesite. Deja un campo vacío para volver al texto integrado.

Algunos textos no están en Etiquetas, porque pertenecen a una oferta o a un complemento:

• Nombres, descripciones y ventajas de las opciones de suscripción: en cada opción de suscripción en Ofertas (Nombre de la opción, Descripción, Ventajas). Los nombres de opción no tienen edición masiva, así que cámbialos oferta por oferta; los textos de toda la tienda, como los sufijos de frecuencia, se editan una vez aquí.
• El nombre, la descripción y las ventajas de la fila de compra única: en la fila Compra única de la oferta. Deja su Nombre vacío y la fila usa Fila de compra única de Etiquetas.
• Títulos, subtítulos e insignias de las opciones de paquete, y el encabezado Nombre del paquete: en la oferta.
• El texto del botón de añadir al carrito, la insignia junto al precio del producto y los textos de la fecha de entrega: en Configuración de complementos; consulta Complementos de la página de producto.

CSS personalizado

La última sección de la tarjeta de configuración, debajo de Elementos, para todo lo que no alcanzan los controles de arriba. El CSS que escribas aquí se aplica a los dos widgets de tu página de producto, y la vista previa muestra lo que hace antes de guardar.

Cada diseño tiene su propio CSS personalizado: el del diseño de la tienda se aplica dondequiera que se use el diseño de la tienda, y el de un diseño guardado dondequiera que se use ese diseño. Un diseño nuevo empieza con una copia del CSS del diseño a partir del cual se creó, y un diseño creado antes de que los diseños tuvieran el suyo usa el del diseño de la tienda hasta que lo guardes. Cambiar a otro diseño en la sección Diseño lo conserva. Si escribiste CSS en el antiguo editor por diseño, ese CSS se sigue aplicando encima.

Los widgets no admiten tu propio HTML. La disposición viene del diseño que publicas, y todo lo que puedes cambiar está en esta página.

Diseños por oferta

Cada oferta usa el diseño de la tienda salvo que le des un diseño propio, así que una oferta puede verse distinta del resto: un club de recarga premium con los colores oscuros de tu marca, por ejemplo, junto a tu Suscríbete y ahorra de siempre.

Dar a una oferta su propio diseño

1. Ve a Supr Bundles & Subscriptions > Ofertas y abre la oferta.
2. En la vista previa, en la fila Diseño bajo el selector de producto, haz clic en Nuevo diseño. La oferta recibe un diseño con su nombre (una oferta llamada Coffee Club recibe Coffee Club Design), que empieza como una copia del diseño de tu tienda, y el editor de diseño se abre sobre él en una ventana a pantalla completa encima de la oferta.
3. La vista previa de la ventana es la propia vista previa de la oferta: el mismo producto y la misma variante que estabas viendo en la oferta, y las opciones, opciones de paquete, regalos y textos de la oferta tal como están ahora, con los cambios sin guardar incluidos. Puedes cambiar a otro de los productos de la oferta ahí.
4. Cambia su diseño, su diseño de paquete, colores, forma, espaciado y elementos. Las dos vistas previas siguen cada cambio a medida que lo haces. Para renombrarlo, escribe el nuevo nombre en Nombre del diseño en la parte superior de la tarjeta Diseño.
5. Cierra la ventana y guarda la oferta. El diseño se guarda con la oferta, así que la ventana no tiene Guardar: Descartar en la oferta deshace también el diseño y sus cambios, y no se conserva nada hasta que guardes.

Cuando la oferta tiene su propio diseño, el desplegable de la fila muestra su nombre y Editar diseño ocupa el lugar de Nuevo diseño. Editar diseño abre de nuevo la misma ventana, y sus cambios se guardan con la oferta del mismo modo. El desplegable Diseño cambia la oferta entre el Diseño de la tienda, su propio diseño y cualquier otro diseño guardado, y se guarda con la oferta; al cambiar a otro se conserva el diseño, así que puedes volver a elegirlo. Para eliminar el diseño propio de la oferta, haz clic en la papelera junto a Nombre del diseño en su ventana y luego guarda la oferta.

Una oferta que ya usaba un diseño compartido con otras ofertas lo conserva. La fila indica entonces cuántas otras ofertas lo usan, porque un cambio ahí cambia también esas ofertas. Un diseño compartido, como cualquier diseño abierto desde la página Diseño, tiene su propio Guardar en la barra de título de la ventana, y ese guardado se aplica a todas las ofertas que lo usan.

En la página Diseño. La parte superior de la tarjeta Diseño lista el diseño de la tienda y todos los diseños guardados. Elige uno en el selector para editarlo, haz clic en Nuevo diseño para empezar otro como copia del que tienes abierto, y usa los iconos del lápiz (renombrar) y la papelera (eliminar) a su lado para renombrar o eliminar el diseño abierto. Cada oferta puede tener un diseño propio, y una tienda puede conservar hasta 50 más aquí.

Qué abarca un diseño. El diseño y el diseño de paquete, los colores, la forma, el espaciado, los elementos, la Ubicación y el CSS personalizado. Las Etiquetas y la configuración de complementos son comunes a todos los diseños. Las etiquetas se editan en el diseño de la tienda: mientras hay un diseño guardado abierto, la nota debajo de su configuración tiene un botón Editar el diseño de la tienda que te lleva allí. La tarjeta Configuración de complementos también se queda en la página mientras hay un diseño guardado abierto, marcada como compartida, y un cambio ahí se aplica al diseño de la tienda y a todos los diseños guardados. Las traducciones siguen el diseño del layout igual que en el diseño de la tienda.

En la página de producto. El widget de suscripción de un producto usa el diseño de la primera oferta que muestra. Qué oferta va primero se configura en Configuración de complementos > Orden de ofertas en esta página. Cuando las ofertas apuntan a variantes distintas del mismo producto, cada variante usa el diseño de la primera oferta que tiene, y el widget cambia de diseño cuando el cliente elige una variante: una variante de botella de cristal vendida en tu club premium puede verse como el club, mientras que la lata de al lado conserva tu diseño de siempre. Cada opción de paquete sigue el diseño de su propia oferta. Eliminar un diseño devuelve sus ofertas al diseño de la tienda.

Guardar los cambios

Nada de esta página se guarda sobre la marcha. Cambia lo que quieras, míralo todo en la vista previa y luego usa la barra de guardado de la parte superior de la página para guardarlo todo de una vez, o descártalo y empieza de nuevo. Tras guardar, vuelve a cargar una página de producto de tu tienda para ver el resultado.

Esta página escribe un valor en todos los diseños a la vez. Si personalizaste tus widgets en el antiguo editor por diseño, tu primer guardado aquí es el momento en que tu tienda pasa a la experiencia de widget unificada: un mensaje Tus widgets mejoran te pregunta antes de ese primer guardado, y antes hacemos una copia de cómo se veían tus widgets.

Restaurar tu diseño anterior

Esta sección es para tiendas que personalizaron sus widgets en el antiguo editor por diseño, antes de que esta página lo sustituyera. Si instalaste Supr Bundles & Subscriptions después, no hay ningún diseño anterior al que volver y tu página no tiene la tarjeta Restaurar diseño anterior.

Antes de que tu tienda pase a la experiencia de widget unificada, guardamos una copia de cómo se ven sus widgets. Esa copia no caduca, y la tarjeta indica la fecha en que se hizo.

A partir de entonces, una tarjeta Restaurar diseño anterior aparece cerca de la parte inferior de esta página. Úsala y tus widgets vuelven exactamente a como estaban justo antes de pasar. Puedes volver a personalizarlos después y restaurar de nuevo.

Restaurar sustituye todo lo que hayas cambiado en esta página desde que se hizo esa copia. No afecta a tus ofertas, a tus precios ni a tus suscriptores.

La línea Powered by Supr

Algunas tiendas ven una pequeña línea Powered by Supr debajo del widget de suscripción, o dentro de su información emergente. Que se muestre depende de tu plan: se quita automáticamente en los planes de pago, y no hay ningún interruptor para ella en la página Diseño. Los planes están en nuestra página de precios y en Facturación dentro de la app.

Después de cambiar de plan, abre la app una vez y vuelve a cargar tu página de producto, y la línea desaparece. Si sigue apareciendo, escríbenos por chat y lo revisaremos por ti.

La misma línea puede aparecer al pie de los correos de suscripción que enviamos por ti, y sigue la misma regla.

Obtener ayuda con tu diseño

La tarjeta ¿Quieres ayuda para adaptarlo a tu marca? de la parte inferior de la página tiene un botón Chatear con un experto. Nuestro equipo puede ayudarte a elegir un diseño, igualar los colores y las fuentes de tu tema, ajustar el espaciado en móvil o escribir CSS personalizado para un cambio que los controles no cubren. Cuéntanos cómo quieres que se vea el widget (una captura ayuda) y lo configuraremos contigo.

Consejos y buenas prácticas

• Define primero tu color, forma y espaciado y luego elige un diseño. Se trasladan a todos los diseños, así que probar diseños no te cuesta nada.
• Deja los colores de los elementos en predeterminado salvo que tengas un motivo. Cuantas menos excepciones hagas, mejor se verá un diseño nuevo cuando pruebes uno.
• Haz la vista previa con un producto real para ver tus propios precios y descuentos.
• Si un diseño muestra un desplegable que no quieres, cambiar a Classic o Panel es la forma más rápida de quitarlo.
• Para opciones una junto a otra en lugar de apiladas, usa Panel o Panel+ en suscripciones y el diseño de paquete Cards.

Preguntas frecuentes

¿Pueden dos ofertas de mi tienda verse distintas?
Sí. Crea un diseño guardado y elígelo para una de las ofertas; consulta Diseños por oferta.

¿Cómo cambio los colores para que combinen con mi marca?
Elige tu color en Colores y luego cambia partes concretas en Elementos solo donde deban ser distintas. Guarda con la barra de guardado y vuelve a cargar una página de producto.

Un ajuste que cambié no se ve en mi tienda. ¿Por qué?
Comprueba que guardaste y vuelve a cargar la página de producto. Si sigue sin verse, lo más probable es que el CSS de tu propio tema esté sobrescribiendo el widget ahí. Escríbenos por chat con el enlace del producto y lo arreglaremos sin tocar tu tema.

¿Pueden distintas ofertas usar diseños distintos?
No. Hay un diseño de suscripción y un diseño de paquete activos por tienda, y todas las ofertas los usan. El estilo de los demás se conserva, así que cambiar no te cuesta nada.

¿Cómo oculto el precio, el precio tachado o la insignia de descuento?
Desactiva Precio, Precio tachado o Precio por unidad en Elementos, por separado para las opciones de suscripción y para las opciones de paquete. La insignia de descuento tiene su propia fila en Ambos widgets.

¿Cómo pongo el widget de suscripción encima de las opciones de paquete?
Desactiva Elementos > Diseño de la página > Paquete arriba y guarda.

¿Cómo cambio "Suscríbete y ahorra", "Compra única", "Ahorra un 15 %" o "/cada uno"?
En la tarjeta Etiquetas. El encabezado encima de las opciones de suscripción es Título de la sección, que imprime el Nombre de la suscripción de la oferta dondequiera que diga {{subscription_name}} (su valor inicial), y el encabezado de paquete es el Nombre del paquete de la oferta. Consulta Cómo cambiar o traducir los textos del idioma principal.

El desplegable de entrega abierto se ve distinto en Windows y en Mac. ¿Puedo darle estilo?
El desplegable cerrado se personaliza en Elementos > Desplegable de entrega. La lista abierta la dibuja el navegador y el sistema operativo del comprador, así que no se puede cambiar. Elige Classic o Panel si prefieres no tener desplegable.

¿Puedo agregar mi propio HTML, o copiar un diseño que vi en otro sitio?
Los widgets no admiten HTML propio. Elige aquí el diseño más parecido y personalízalo, y luego usa Chatear con un experto y nuestro equipo te ayudará a acercarte lo máximo posible.

¿Cómo quito la línea Powered by Supr?
Se quita automáticamente en los planes de pago. Consulta La línea Powered by Supr.

Guías relacionadas

• Complementos de la página de producto
• Qué pasó con el editor del widget
• Guía para principiantes de las ofertas de suscripción
• Cómo cambiar o traducir los textos del idioma principal
• Traducciones
• Qué ven los compradores en el carrito y en la pantalla de pago
• El widget de suscripción no se muestra en mi tienda

Actualizado el: 24/10/2026