Customer StoriesYespo Blog
Guides
Request DemoLogin

Price and Discount Blocks

Use the following blocks in the Yespo editor as additional components of the Products block:

  • Price — synchronizes the price with the website, allowing you to distinguish between the current price and the old one.
  • Discount — clearly shows the benefit to the user in percentage.

Using these blocks together makes the offer more attractive, as subscribers can immediately see the benefit and the amount of savings.

🚧

Important

The Price and Discount blocks are available when you have at least one order in your account.

Blocks Configuration

Drag the blocks to the pre-created product card and click on those you want to edit — a settings panel will open.

Email editor showing the block panel on the left, product cards with Buy now buttons in the center, and the message settings panel with name and subject fields on the right

Price Block

The block lets you configure the following settings:

Show old price

This is the default option. Deactivate the toggle to display only the current price.

Price block settings panel with the Show old price toggle enabled and highlighted, and the crossed-out old price displayed on the product card

Distance between prices

Set the distance between the price and old price in pixels. The maximum value is 20 px.

Price block settings panel with the Distance between prices field highlighted, set to 20 pixels

When selecting the Maximum option, the prices within the block will be spaced as far apart as possible.

Price block settings panel with the Maximum option selected and highlighted for the distance between prices

Alignment

Set the alignment of the prices: left, center or right.

Price block settings panel with the Alignment section highlighted, showing right alignment selected

Format

Set the price display format: choose the thousands separator (1000, 1 000, 1,000, 1.000) and specify whether to show the decimal part (cents) or hide it when it is not used.

Price block settings panel with the Format section highlighted, showing the comma thousands separator selected and decimal values hidden

Price

You can set the following options in the Price and Old price sections:

  1. Color, size and style font.
Price block settings panel with the Price section highlighted, showing font, size, and color options for the price and old price text
  1. Positioning the old price in relation to the new price: left, right, below or above.
Price block settings panel with the Position section highlighted, showing four old-price placement options with the old-price-above option selected

Currency

Price block settings panel with the Currency section highlighted, showing text size set to 25 pixels and the currency symbol highlighted on the price
📘

Note

If the prices' text sizes are different, changes to the currency font will only apply to the Price.

Paddings

Price block settings panel with the Paddings on desktop section highlighted, showing equal padding of 15 pixels on all sides around the price

Discount Block

Changing the settings is similar to the Price block.
You can configure the following block settings:

  • Alignment
  • Font size and style
  • Text color
  • Background color
  • Rounding corners
  • Internal and external paddings around the block for mobile and desktop versions
Discount block settings panel showing alignment, font, text color, background color, and rounding options, with the red discount badge displayed on the product card

Saving the Product Card

After making changes, save the product card with the blocks as a separate module. Learn more >

Updated 12 days ago

Did this page help you?