Un precio tachado junto al precio real hace que el descuento sea visible de un vistazo. Esta receta transforma una tarjeta de producto anual para mostrar lo que costaría la suscripción por mes con el plan mensual — tachado — junto al precio mensual efectivo del plan anual, coronado con una insignia de descuento. El formato de tachado se aplica a un elemento de texto completo: no puedes tachar una variable dentro de un texto más largo. Por eso, el precio tachado vive en su propio elemento de texto, junto al precio con descuento, dentro de un contenedor horizontal.

Antes de empezar

• Crea una pantalla de paywall con productos; por ejemplo, sigue la guía Crea una pantalla de paywall básica. Esta receta asume que el paywall ofrece un producto anual y uno mensual.

1. Añadir filas de precio apiladas

La tarjeta anual comienza con una sola línea de precio: la variable prod_price del producto anual seguida de /year, que se muestra, por ejemplo, como $29.99/year. Añade una segunda línea encima para el precio mensual.

1. En el panel Layers, selecciona el texto del precio dentro de la tarjeta del producto anual. Ya está dentro del contenedor vertical de la tarjeta, así que la copia se apilará debajo.
2. Haz clic en el menú de tres puntos de la capa y elige Duplicate. La copia aparece debajo del original. En el siguiente paso, el texto superior se convierte en la fila del precio mensual; el inferior mantiene el precio anual.

2. Divide la fila mensual en dos precios

La fila mensual contiene dos elementos de texto: el precio tachado del plan mensual y el precio por mes del plan anual.

1. Selecciona el elemento de texto superior, haz clic en su menú de tres puntos y elige Wrap > Wrap in Horizontal Container.

2. Haz clic en el menú de tres puntos de la capa de texto dentro del nuevo contenedor y elige Duplicate.

   

3. Selecciona el primer elemento de texto y borra el campo Content. Haz clic en el icono de variable , elige el producto mensual y luego su atributo prod_price_per_month. Escribe /month después de la variable.

4. En la pestaña Design, dentro de Typography, establece Decoration en Strikethrough (consulta Estilo de elementos — Decoration).

5. Selecciona el segundo elemento de texto y reemplaza su contenido de la misma forma, pero elige el atributo prod_price_per_month del producto anual. Escribe /month después de la variable.

3. Atenúa el precio anual

Los precios mensuales duplicados heredaron el estilo del precio original, así que los tres precios comparten el mismo tamaño y grosor. Haz el precio anual más discreto para que la fila mensual destaque.

1. En el canvas, selecciona el elemento de texto inferior: el precio anual.
2. En la barra de herramientas sobre el elemento, abre el desplegable de estilo de texto y elige un estilo más sutil, por ejemplo, Caption. O bien, selecciona un estilo diferente en Typography en la pestaña Design.

4. Añade el distintivo de descuento

El distintivo resalta el ahorro junto a los precios.

1. Haz clic en + > Badge.
2. En el panel Layers, arrastra el distintivo dentro del producto anual, entre el contenedor vertical con los precios y el botón de opción.
3. Selecciona la capa de texto del distintivo y edita el campo Content — por ejemplo, Save 75%.

No hay ninguna variable para el porcentaje de descuento — calcúlalo a partir de tus precios e introdúcelo como texto estático.

Ahora la tarjeta anual ancla su precio al plan mensual: el precio mensual tachado, el precio mensual efectivo del plan anual y la insignia de descuento aparecen en una misma línea, con el precio anual completo debajo.

Próximos pasos

• Guarda y publica tu flow.
• Añade el flow a un placement para empezar a mostrárselo a los usuarios.