Как сделать цены на сайте: блок, прайс и проверка

Чтобы сделать цены на сайте, сначала определите, можно ли назвать итоговую стоимость заранее. Для фиксированного предложения покажите одну цену рядом с составом и кнопкой, для нескольких вариантов соберите сравнимые карточки, а для услуги с неизвестным объёмом укажите правило расчёта и запросите данные для сметы. Ниже есть рабочая структура, HTML-пример и проверка перед публикацией.

Выберите формат по способу расчёта

Цена должна отвечать без догадок: что входит и при каком условии действует. Если товар меняет стоимость из-за размера или комплектации, варианты нужно различать возле переключателя. Если услуга оценивается после брифа, не подменяйте неизвестную сумму случайным числом.

• Одна фиксированная цена: название, состав, единица продажи, цена и кнопка.
• Несколько пакетов: одинаковые строки сравнения и отдельная цена каждого варианта.
• Цена «от»: условия минимальной комплектации и факторы доплаты находятся рядом.
• Индивидуальная смета: форма собирает объём, срок и обязательные параметры.
• Каталог товаров: цена на карточке без расхождений повторяется в корзине.

Правило выбора: если два человека с одинаковыми исходными данными должны получить одну сумму, показывайте фиксированную цену. Если сумма зависит от неизвестных параметров, сначала соберите их и только потом считайте.

Карта результата до дизайна

Исходная ситуация: товар, услуга или пакеты уже определены, но посетителю трудно понять итог. Результат: человек видит стоимость, состав, ограничения и следующий шаг в одном экране. Обязательные части: название, цена, валюта, единица расчёта, включённые работы, существенные доплаты и действие. Проверка: выбранный вариант даёт ту же сумму на следующем шаге.

Частые сбои: старая цена остаётся в шаблоне, мобильная карточка обрезает сумму, переключатель меняет подпись без пересчёта, форма теряет выбранный пакет. Способ не подходит, если итог зависит от обследования, юридической проверки или отсутствующих данных. Тогда покажите диапазон только при подтверждённой методике, либо предложите расчёт после брифа.

Что написать внутри карточки

Сначала дайте название результата, затем цену и единицу расчёта. После этого перечислите состав, границы и то, что оплачивается отдельно. Кнопка называет следующий шаг: «Выбрать пакет», «Получить расчёт» или «Перейти к оформлению». Слова вроде «выгодно» не заменяют условия.

1. Назовите предложение теми же словами, что используются в договоре или корзине.
2. Покажите основную цену крупнее второстепенных пояснений.
3. Подпишите валюту и единицу: за товар, за месяц, за страницу или за пакет.
4. Перечислите включённые элементы одинаковой грамматической формой.
5. Отдельно укажите ограничения и обязательные доплаты.
6. Свяжите кнопку с вариантом, чтобы выбор не потерялся в форме.

Если вы только проектируете предложение, сначала соберите страницы по карте контента сайта. Для услуг сверяйте карточку с планом каталога, цен и записи.

По теме: Как сделать сайт-форум: движок, разделы и модерация

Минимальный HTML блока цен

Для пакетов подойдут самостоятельные элементы article внутри секции. Заголовок пакета остаётся заголовком, цена обычным текстом, преимущества списком. Такой HTML сохраняет смысл без JavaScript и не заставляет раскрывать каждую цену отдельно.

<section class="prices" aria-labelledby="prices-title">
  <h2 id="prices-title">Варианты работы</h2>
  <article class="price-card">
    <h3>Базовый пакет</h3>
    <p class="price">{{price}} ₽ <span>за пакет</span></p>
    <ul>
      <li>Структура страницы</li>
      <li>Адаптация под телефон</li>
      <li>Проверка формы</li>
    </ul>
    <a href="/order?plan=base">Выбрать пакет</a>
  </article>
</section>

Замените {{price}} значением из одного источника данных, не копируйте сумму в шаблоны вручную. Переключатель должен одновременно обновлять видимую цену, скрытое поле формы и итог перед отправкой. Страница остаётся понятной, даже если скрипт не загрузился.

Сравните варианты по одинаковым строкам

Если у одного пакета указано число страниц, у другого срок, а у третьего поддержка, выбрать невозможно. Составьте общий набор строк и для каждого варианта напишите значение или «не входит». Заметный вариант можно выделить цветом, но выбор опирается на задачу, а не на плашку.

• Короткий выбор: карточки в строку на широком экране и в колонку на телефоне.
• Подробное сравнение: таблица с заголовками строк и столбцов.
• Много товаров: карточки каталога и фильтры вместо огромного прайса.
• Переменная услуга: калькулятор после объяснения формулы и входных данных.

Увеличьте масштаб и проверьте, что цена не выходит за карточку, кнопки не меняют порядок, а перечень читается без цвета. Общий маршрут есть в статье как сделать сайт читаемым.

По теме: Как сделать сайт бронирования: слоты без двойной записи

Когда нужна разметка Product и Offer

Структурированные данные не заменяют видимую цену. Для страницы конкретного товара Google описывает Product и вложенный Offer; у предложения указываются price и priceCurrency, валюта записывается трёхбуквенным кодом. Требования есть в документации Google по Product snippets.

Не ставьте Product на общий прайс услуг только ради расширенного результата: Google рекомендует такую разметку для страницы одного товара или вариантов одного товара. Значения JSON-LD совпадают с видимым текстом. После правки проверьте разметку в Rich Results Test и страницу в обычном браузере.

Проверьте цену по всему пути

Для интернет-магазина цена должна быть согласована между источником данных, посадочной страницей и оформлением. Google Merchant Center требует последовательную цену на всём пути к оплате и предупреждает о сборах, которые появляются только на финальном шаге: требования Google к checkout. Даже без Merchant Center это полезный контроль качества.

1. Откройте страницу в приватном окне и запишите цену выбранного варианта.
2. Переключите варианты и проверьте название, валюту, единицу и состав.
3. Добавьте предложение в корзину или отправьте тестовую форму.
4. Сравните цену в карточке, форме, корзине и сообщении менеджеру.
5. Проверьте телефон, увеличенный масштаб и вариант без JavaScript.
6. Сравните JSON-LD или товарный фид с видимой ценой.
7. Измените цену в каноническом источнике и найдите старое значение по сайту.

По теме: Как сделать CMS-сайт: пошаговый план в 2026 году

Диагностика по симптому

• На странице одна цена, в корзине другая: найдите два источника и оставьте один канон.
• Кнопка отправляет не тот пакет: проверьте параметр или скрытое поле формы.
• На телефоне сумма обрезана: уберите фиксированную ширину и разрешите перенос.
• Старая цена видна поисковику: проверьте HTML, JSON-LD, кеш и товарный фид.
• Люди спрашивают, что входит: перенесите состав и ограничения в карточку.
• «От» вызывает спор: покажите минимальную комплектацию и факторы роста стоимости.

Когда блок цен не подходит

Не публикуйте точную сумму, если без осмотра или исходных файлов она окажется неверной. Не используйте калькулятор, если формула не объяснима и заявки считают вручную. Для сложных проектов покажите этапы оценки, данные для брифа и срок ответа без выдуманной точности.

Частые вопросы

Можно ли написать «цена по запросу»?

Можно, если стоимость зависит от параметров. Рядом перечислите данные для расчёта и результат после отправки формы.

Как показать скидку?

Активная цена заметнее старой, условия и срок действия понятны. Не оставляйте зачёркнутую цену без объяснения.

Нужен ли знак валюты?

Да, если без него сумма неоднозначна. Для структурированных данных дополнительно укажите код в priceCurrency.

Карточки или таблица?

Карточки подходят для коротких пакетов, таблица для сравнения одинаковых параметров. На телефоне проверьте порядок чтения.