**TL;DR.** Чудові PDP оптимізують три речі: (1) швидкість (LCP < 1.8s, INP < 200ms), (2) ясність (галерея, варіант, кнопка покупки), і (3) довіру (відгуки, політика повернення, доставка, соціальне підтвердження). Кожен елемент має вимірювальний вплив на конверсію. Ставте їх навмисно.

## Воронка PDP

Типова воронка електронної комерції (галузеві орієнтири 2025–2026):

| Крок                                   | Медіанна конверсія | Топ-квартиль     |
| -------------------------------------- | ------------------- | ---------------- |
| Перегляд PDP → додати до кошика        | 8–15%               | 20–30%           |
| Додати до кошика → оформлення замовлення | 50–65%              | 70–80%           |
| Оформлення замовлення → покупка       | 50–70%              | 75–90%           |
| **Загальний перегляд PDP → покупка**  | **2–4%**            | **8–15%**        |

Магазини, які переходять з медіанної до топ-квартиль на кожному етапі, подвоюють або потроюють дохід за сесію.

## Швидкість

Детально розглянуто в [посібнику Core Web Vitals](/guides/core-web-vitals-ecommerce-2026). Ключові пороги для PDP:

- LCP ≤ 1.8s (ціль), ≤ 2.5s (добре).
- INP ≤ 150ms (ціль), ≤ 200ms (добре).
- CLS < 0.05 (ціль), ≤ 0.1 (добре).

Один секундний приріст LCP на PDP зазвичай забезпечує підвищення конверсії на 5–15%.

## Галерея та основне зображення

Перше зображення продукту — це ваш LCP. Шаблони:

| Елемент            | Найкраща практика                                                    |
| ------------------ | ------------------------------------------------------------------- |
| Розмір основного зображення | 800×800px до 1200×1200px на десктопі; повна ширина екрана на мобільному  |
| Формат             | AVIF (з резервним варіантом WebP/JPEG)                             |
| Попереднє завантаження LCP | Так, `<link rel="preload" as="image" fetchpriority="high">`          |
| Позиція мініатюри  | Вертикальна смуга на десктопі (ліворуч або праворуч); горизонтально під основним на мобільному |
| Зум при стисненні  | Так на мобільному                                                  |
| Зум при наведенні   | Опціонально на десктопі; не блокувати перехід до деталей          |
| Кількість зображень | 4–8 типово; 12+ для моди або складних продуктів                   |
| 360° вид           | Висока цінність для продуктів з високою AOV; ліньке завантаження (не блокувати LCP) |
| Відео              | Під галереєю, автоматичне відтворення без звуку, ліньке завантаження |

## Вибір варіантів

Два універсальні типи варіантів:

**Колір**: використовуйте кольорові зразки (візуальні кола або квадрати фактичного кольору).

```html
<div role="group" aria-label="Color">
  <button aria-pressed="true" aria-label="Коричневий">
    <span style="background: #5C3A21" />
  </button>
  <button aria-pressed="false" aria-label="Чорний">
    <span style="background: #1A1A1A" />
  </button>
  <!-- ... -->
</div>
```

**Розмір**: використовуйте кнопки з міткою розміру.

```html
<div role="group" aria-label="Size">
  <button aria-pressed="false">S</button>
  <button aria-pressed="true">M</button>
  <button aria-pressed="false">L</button>
  <button aria-disabled="true">XL (Немає в наявності — сповістіть мене)</button>
</div>
```

Правила:

- Використовуйте `aria-pressed` для вибраного стану.
- Візуально відключайте варіанти, яких немає в наявності; пропонуйте "Сповістити, коли буде доступно."
- Оновлюйте URL, щоб включити вибраний варіант для можливості поділитися (`?variant=size-m`).
- Оптимістичний інтерфейс для зміни варіантів (розглянуто в [посібнику INP](/guides/inp-optimization-product-pages)).

## Додати до кошика

Основний CTA. Найкращі практики:

| Елемент                | Шаблон                                                              |
| ---------------------- | -------------------------------------------------------------------- |
| Текст кнопки           | "Додати до кошика" або "Додати до сумки" (ваша брендова термінологія) |
| Колір                  | Основний колір бренду; високий контраст з фоном сторінки           |
| Розмір                 | Повна ширина на мобільному; мінімум 48×48px для натискання          |
| Липкий на мобільному   | Так, закріплений внизу при прокрутці після початкового перегляду    |
| Стан завантаження      | Спінер на кнопці, поки сервер підтверджує; ніколи не блокувати сторінку |
| Шаблон підтвердження   | Висувний міні-кошик або тост; не повне переривання сторінки         |
| Терміновість запасу    | "Лише 3 залишилося", якщо це правда; ніколи не фальшувати          |
| Ціна біля кнопки       | Так, велика і чітка                                                  |

Антипатерни:

- Кілька основних CTA ("Додати до кошика" + "Купити зараз" + "Швидка покупка") — розпорошують увагу.
- Модальне переривання після додавання до кошика ("Продовжити покупки чи оформлення замовлення?") — додає крок.
- Схована ціна (примушує прокрутити вгору, щоб побачити).

## Сигнали довіри

Кластер сигналів біля кнопки покупки:

1. **Поріг безкоштовної доставки**: "Безкоштовна доставка при замовленні від $50" — підвищує розмір кошика.
2. **Резюме політики повернення**: "Безкоштовне повернення протягом 30 днів" — зменшує тертя при покупці.
3. **Оцінка доставки**: "Прибуде в середу, 15 травня" — конкретні дати переважають діапазони.
4. **Знаки безпеки**: індикатор "Безпечна оплата" в стилі Stripe — незначний, але накопичувальний.
5. **Сумарні зірки відгуків + кількість**: "4.7 ★ з 218 відгуків" — основний сигнал довіри.

## Соціальне підтвердження

Ефективні шаблони соціального підтвердження:

- **Витяги з перевірених відгуків**: 2–3 відгуки над складом з оцінкою зірок, автором, датою.
- **Кількість відгуків**: велика кількість (218 відгуків) є більш переконливою, ніж просто зірки.
- **"X людей переглядали це сьогодні"**: низький тиск на дефіцит. Використовуйте реальні дані, а не випадкові.
- **Сповіщення про нещодавні покупки**: спливаюче вікно, що показує "Сара з Лондона купила це 3 години тому." Реально, за згодою покупця. Частота: кожні 30–60 секунд, максимум.
- **Фотографії, створені користувачами**: сітка в стилі Instagram з клієнтами, які носять/використовують продукт.

Уникайте:

- Фальшивих відгуків.
- Фальшивої терміновості запасу ("Лише 1 залишилося!", коли їх 200).
- Агресивних таймерів зворотного відліку ("Пропозиція закінчується через 3:21!").

Це призводить до негативних наслідків — сучасні покупці їх розпізнають, і довіра знижується.

## Часто купують разом

Справжній важіль конверсії. Шаблон:

```
Цей продукт: Коричнева шкіряна сумка через плече       $149
+ Пояс з латунною пряжкою                              $89
+ Шкіряний тримач для карток                           $49
─────────────────────────────────────────────────────
Загальна вартість набору:                              $287
[ Додати набір до кошика  →  $258 ] (економить $29)
```

Впровадження:

- Попередньо обчисліть пари "часто купують разом" на основі співпадіння товарів + косинусної схожості на `descriptionEmbedding`.
- Реальні `<a>` теги, що вказують на рекомендовані продукти (доступні для SEO).
- Додавання набору в один клік.

## Схожі продукти

Під частинами, які часто купують разом. Використовуйте:

- pgvector косинус на `descriptionEmbedding`, щоб знайти схожі в тій же категорії.
- За бажанням фільтруйте за ціновим діапазоном.
- Реальні `<a>` теги з `rel="related"`.

## Специфікації та опис

Довгий контент корисний для SEO і для покупок з високим рівнем розгляду. Структура:

```markdown
## Опис
[Повний маркетинговий текст — 2-4 абзаци]

## Специфікації
| Матеріал       | Шкіра вищого гатунку |
| ---------------- | --------------------- |
| Розміри         | 13" × 11" × 4"       |
| Вага            | 1.8 lbs              |
| Фурнітура       | Масивна латунь       |
| Походження      | Виготовлено в Італії |

## Що в коробці
- Сумка
- Знімний плечовий ремінь
- Пилозахисний мішок
- Інструкція по догляду

## Догляд
[Інструкції по догляду]
```

Цей контент також потрапляє в поле `description` JSON-LD продукту, покращуючи глибину багатих результатів.

## Розділ відгуків

Під розділом специфікацій. Найкращі практики:

- Яскраво показуйте середню оцінку за весь час + кількість.
- Гістограма розподілу (5 зірок: 67%, 4 зірки: 22%, 3 зірки: 8%, 2 зірки: 2%, 1 зірка: 1%).
- Сортування та фільтрація (найновіші, найкорисніші, за зірками).
- Пагінація або безкінечний прокрут (ліниве завантаження).
- Відповідайте на відгуки, де це доречно.
- Значок перевіреної покупки.

## Як побудовано стандартний PDP Ordiko

- Серверне рендеринг з компонентами сервера React.
- Основне зображення LCP попередньо завантажено з `priority` і `fetchPriority="high"`.
- Вибірник варіантів з `useOptimistic` для миттєвого зворотного зв'язку.
- Липке мобільне додавання до кошика при прокрутці після початкового перегляду.
- Підтвердження міні-кошика, що висувається (без переривання сторінки).
- Сигнали довіри (безкоштовна доставка, повернення, безпечна оплата), рендеряться на сервері.
- Резюме перевірених відгуків і список відгуків (топ 5 у JSON-LD).
- Часто купують разом через косинусну схожість pgvector.
- Схожі продукти в тій же категорії, доступні для переходу.
- Повний опис + специфікації + відгуки під складом.

Стандартний INP < 200ms p75 з цією конфігурацією.

## FAQ

**Яка найменш оцінена оптимізація PDP?**
Липка кнопка "Додати до кошика" на мобільному, яка залишається видимою під час прокрутки. На довгих PDP (які повинні бути для SEO) користувачі, що прокручують відгуки або специфікації, потребують одного натискання, щоб купити. Магазини, які додають липкий CTA, зазвичай бачать підвищення конверсії на мобільних на 10–20%.

**Чи слід ховати варіанти, яких немає в наявності?**
Ні. Показуйте їх візуально відключеними, але все ще присутніми. Сховані варіанти створюють непослідовний UX і сигналізують, що повертаючі клієнти не можуть знайти продукт, який вони купили раніше. Відключайте + 'Сповістіть мене, коли буде доступно', щоб перетворити клієнтів на підписників електронної пошти.

**Скільки соціального підтвердження є занадто багато?**
Одне спливаюче сповіщення про нещодавні покупки кожні 30–60 секунд виглядає корисним. Кожні 5 секунд виглядає маніпулятивно. Постійне 'X людей переглядали це за останні 24 години' є прийнятним. Надмірне соціальне підтвердження є основною причиною зниження довіри.

**Як Ordiko підходить до UX PDP?**
Стандартний PDP Ordiko включає липкий мобільний CTA, попередньо завантажене основне зображення LCP, кольорові/розмірні зразки з оптимістичним інтерфейсом, резюме перевірених відгуків, часто купують разом (косинус pgvector на векторних описах) і хлібні крихти + JSON-LD за замовчуванням. INP < 200ms p75 з темою за замовчуванням.