---
title: "Mostrar un precio tachado con una insignia de descuento"
description: "Tacha el precio del plan mensual junto al precio mensual efectivo del plan anual para que el descuento sea visible de un vistazo."
---

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 \{#before-you-start\}

- Crea una pantalla de paywall con productos; por ejemplo, sigue la guía [Crea una pantalla de paywall básica](basic-paywall-screen). Esta receta asume que el paywall ofrece un producto anual y uno mensual.
## 1. Añadir filas de precio apiladas \{#1-stack-the-price-rows\}

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 Context menu 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 \{#2-split-the-monthly-row-into-two-prices\}

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

:::important
El selector de variables solo ofrece los precios de los productos presentes en una pantalla del flow. Para referenciar un producto que no está en el flow, crea una pantalla vacía, añade un elemento **Products** y asígnale el producto. Asegúrate de que ninguna acción de navegación conduzca a esa pantalla.
:::
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 Variable icon, 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** Strikethrough (consulta [Estilo de elementos — Decoration](builder-styling#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 \{#tone-down-the-yearly-price\}

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 \{#add-the-discount-badge\}

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 \{#next-steps\}

- [Guarda y publica tu flow](builder-save-publish).
- [Añade el flow a un placement](create-placement) para empezar a mostrárselo a los usuarios.