Price Block
The Price block is used in the eSputnik editor as an additional component of the Product block to display the cost of products.
A unique feature of this block is its ability to synchronize the price with the website, allowing you to distinguish between the current price and the old one. This makes the offer more attractive, as customers can immediately see their savings.
Let's look at how to work with the Price block in the eSputnik email editor.
Block Configuration Options
Drag the block into the product card in the message and click on it — a settings panel will open on the left.
![Drag the block into the product card Drag the block into the product card](https://files.readme.io/08243eb-price-block-01.gif)
Show Old Price
This is the default option. Deactivate the slider to display only the current price.
![Show old price Show old price](https://files.readme.io/fdb68bc-price-block-02.webp)
Distance Between Prices
Set the distance between the price and the old price in pixels. The maximum value is 20 px.
![Distance between prices Distance between prices](https://files.readme.io/249f0e7-price-block-04.webp)
When selecting the Maximum option, the prices within the block will be spaced as far apart as possible.
![Maximum option Maximum option](https://files.readme.io/45cdf70-price-block-05.webp)
Alignment
Set the alignment of the prices to the left, right, or center.
![Alignment Alignment](https://files.readme.io/fcd62b8-price-block-06.webp)
Price
You can set the following options in the Price and Old price sections:
- Color, size, and font style.
![Price Color, size, style](https://files.readme.io/2e53752-price-block-007.webp)
- Positioning the old price in relation to the new price: left, above, or below.
![Old price Positioning](https://files.readme.io/3dcc8b4-old_price_position_en22.png)
Currency
Specify the font size separately in pixels, or match it to the price size.
Note
If the prices' text sizes are different, changes to the currency font will only apply to the Price.
![Currency Currency](https://files.readme.io/b039c62-price-block-09.webp)
Paddings
The Paddings options allow adjustment of space around the desktop or mobile versions.
You can set all margin values at once or individually for each side of the block. The maximum value is 40 px.
To set up the individual value for each side of the block, enable the More toggle button and set the value.
![Individually values for each side Individually values for each side](https://files.readme.io/13c3840-price-block-11.webp)
Select the smartphone icon to set the paddings for the mobile version.
![Paddings Paddings](https://files.readme.io/fe37ffe-price-block-10.webp)
Saving the Block
Save the product card as a module after configuring the block:
- Click on the product card, then hover over the three dots on the left.
![Save the block Save the block](https://files.readme.io/477d513-price-block-12.webp)
- Click on the Save as module icon.
![Save as module Save as module](https://files.readme.io/d8bd408-price-block-13.webp)
- Enter the module name and choose the Product cards category from the dropdown menu.
- Add an ID and click the Update button.
![Enter the module parameters Enter the module parameters](https://files.readme.io/1bab223-price-block-14.webp)
The saved product card will appear in the Module library. You can use it in other messages.
![The saved product card](https://files.readme.io/dd0ebd7-price-block-15.webp)
Updated 23 days ago