Place ready-made icons on the product cards WebAsyst v.300

You don't need to paint anything. All the elements are drawn. You need to put them on the cards of goods.
You need to add 3 new icons to the products in the catalogs, and to modify 2 already existing ones. When you hover over any of them, you need to pop up a hint like on a layout.
1. Action. Something needs fixing.
2. It's the same with a gift.
3. I recommend the badge. Ready. We leave it as it is, but add a hint to it when hovering.
4. We need 2 new icons. “Free pre-sales preparation” is the one where the key is drawn. When hovering, a hint should pop up, like in a layout. When clicking, open a new tab page. Adding an icon should be done by choosing a tick in the admin.
5. "Discount." And like the rest of us, when we hover, we get a hint. When clicking, you need to make a pop-up window, as in the layout. In the window you need to display a photo of the product, its name, the field for entering the phone number, and the button for ordering a call. You need to make the number contained in the heading "Your discount on goods ***%" can be changed for each product.

Perform a field check for the number for fullness. If not filled, then highlight in red, as it is done in our reviews about the product. If the field is full, we send it to the post office. The type of letter can be taken from the purchase in 1 click from the product page, but be sure to add that the goods are ordered at a discount. Adding this icon should also be organized in the admin. I think you can take an existing unused field or create a new one. The number entered in the field will equal the percentage of the discount and will be displayed in the header, if the field is simply empty, then the icon should not appear.
On the layout, it is drawn that there is a percentage discount on the button. If it is somehow simple to do, then you can make it add to it, as well as in the title. In general, you can simply reduce it to “Get a discount” and not bother.
The icons should be placed in the following sequence:
Far right - Discount
To the left, second from the right - Pre-sales preparation
3rd from right - Action
4th - Gift
5th - Recommended
The fact that all the icons will be at one product is extremely unlikely, but it is desirable to keep their sequence, in the absence of any. The 1st and second right will always be in their place. The rest, I think, are now lined up in the right order. You just need to make 2 new ones to the right.