> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Как настроить виджеты checkout

> Полное пошаговое руководство по настройке виджетов checkout в Aftersell, включая все типы виджетов, варианты размещения и лучшие практики конверсии для мобильных и настольных устройств

Это руководство описывает, как настроить и разместить виджеты checkout в Aftersell — от включения виджетов до оптимизации их размещения в Shopify Checkout для максимальной конверсии.

**Примечание:** Виджеты checkout доступны только продавцам Shopify Plus из-за ограничений API Checkout Extensibility Shopify.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Шаг 1. Включите виджет в Aftersell
</div>

Прежде чем добавлять виджеты в checkout, их нужно включить в админ-панели Aftersell.

1. Перейдите на вкладку **Checkout** в админ-панели Aftersell
2. Выберите тип виджета, который хотите настроить ([Upsells](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images) или [Text](#text))
3. Нажмите **Create**, чтобы создать новый виджет, или выберите существующий для редактирования
4. Настройте параметры виджета (см. [Типы виджетов и настройка](#widget-types-and-configuration) ниже)
5. Нажмите переключатель **Enable** в правом верхнем углу настроек виджета
6. Для ограниченных или продвинутых апселлов не забудьте включить пользовательские триггеры перед продолжением

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Шаг 2. Откройте редактор Shopify Checkout
</div>

Есть два способа открыть редактор Shopify Checkout:

**Вариант 1: из админ-панели Shopify**

1. Перейдите в **Settings** в админ-панели Shopify
2. Нажмите **Checkout** в левой навигации
3. Нажмите **Customize** рядом с нужным профилем checkout

**Вариант 2: из Aftersell**

1. Нажмите кнопку **Open Shopify Checkout Editor** в правом нижнем углу страницы редактора Checkout в Aftersell

💡 **Совет:** Вариант 1 даёт больше контроля над тем, какой профиль checkout вы редактируете. Мы рекомендуем сначала протестировать изменения на черновой версии, прежде чем публиковать её.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Главная страница админ-панели Shopify с выделенной ссылкой Settings для открытия редактора checkout" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Шаг 3. Добавьте блок приложения в checkout
</div>

1. В редакторе Shopify Checkout нажмите **Add app block**
2. Выберите нужный виджет Aftersell из списка доступных виджетов
3. Выберите правильное размещение для виджета (см. [Доступные размещения](#available-placements) ниже)
4. Если вы хотите, чтобы виджеты отображались в checkout Shop Pay, отметьте опцию [**Include app block in Shop Pay**](/ru/aftersell/show_checkout_widgets_in_shop_pay)
5. Нажмите **Save** в правом верхнем углу

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Редактор Shopify Checkout со стрелкой, указывающей на кнопку Add block на боковой панели" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Шаг 4. Разместите виджет
</div>

1. Перетащите блок приложения в нужное место внутри выбранной области размещения
2. Нажмите **Save** в правом верхнем углу

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Список блоков редактора Shopify Checkout рядом с живым предпросмотром checkout с виджетами Aftersell" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Типы виджетов и настройка
</div>

<div id="placements">
  ## Размещения
</div>

Размещения создаются в редакторе Checkout Aftersell и позволяют запускать несколько виджетов одного типа на одной странице checkout.

Например, если вы хотите показать два апселл-предложения на одной странице, каждое должно быть назначено на отдельное размещение.

<div id="available-placements">
  ### Доступные размещения
</div>

* **Default placement**: основное размещение. Каждый тип виджета начинает здесь.
* **Additional placement 1**: второй слот размещения для показа ещё одного виджета того же типа на той же странице.
* **Additional placement 2**: третий слот размещения для дальнейшего разделения.

Вы также можете создавать новые размещения прямо из выпадающего списка размещений в Aftersell, выбрав **+ Add new placement**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Редактор Checkout Aftersell с выпадающим списком размещений над списком Upsells и предпросмотром" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Когда использовать несколько размещений
</div>

Используйте несколько размещений, когда вы хотите:

* Показать более одного виджета одного типа на одной странице checkout
* Отображать виджеты в разных секциях страницы
* Таргетировать разные аудитории разными предложениями
* Запускать виджеты с похожими или пересекающимися триггерами

Aftersell использует систему приоритетов. Нельзя запускать несколько виджетов с идентичными триггерами в одном размещении. Если два виджета имеют одинаковые условия триггеров в одном размещении, отобразится только один — по приоритету.

Чтобы использовать похожие триггеры, назначьте каждый виджет на отдельное размещение, чтобы они могли работать независимо и без конфликтов.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Соответствие размещений в редакторе Shopify Checkout
</div>

Каждое размещение в Aftersell соответствует отдельному блоку приложения в редакторе Shopify Checkout. Размещение, выбранное в Shopify, должно совпадать с размещением, заданным в Aftersell.

Например, если виджет назначен на **Additional placement 1** в Aftersell, блок приложения в Shopify также должен быть настроен на **Additional placement 1**.

Если размещения не совпадают, виджет может не появиться или отобразиться в неправильном месте.

**Важно:** Несовпадение размещений — одна из самых частых причин, по которым виджет не отображается. Если виджет не появляется, прежде чем продолжать диагностику, убедитесь, что размещение совпадает и в Aftersell, и в Shopify.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Настройки блока Upsell Widget в редакторе Shopify Checkout с выпадающим списком Placement, установленным на дополнительное размещение" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

Предлагайте товары покупателям во время оформления заказа, чтобы увеличить средний чек (AOV).

**Параметры настройки:**

**Режимы виджета:**

* **Single Product Upsell:** отображает один товар с кнопкой Add to Cart
* **Multi-Product Upsell:** показывает несколько товаров в виде стопки или карусели, позволяя покупателям принять несколько предложений
* **Checkmark Upsell:** отображает один товар с чекбоксом вместо кнопки Add to Cart (идеально для недорогих дополнений, таких как защита доставки)

**Способы подбора товаров:**

* **Specific Products:** выберите отдельные товары для апселла вручную
* **Collection:** выберите коллекцию и показывайте до 5 случайных товаров (товары, уже находящиеся в корзине, автоматически исключаются)
* **Automatic upsell(s):** автоматически рекомендуйте товары на основе содержимого корзины
* **Most Expensive Product:** автоматически предлагайте апселл самого дорогого товара из корзины
* **Spend threshold:** рекомендуйте товары, которые помогают покупателям достичь порогов вознаграждения (доступно только после включения **Show rewards bar** на том же апселл-виджете)
* **Strategy:** динамически выбирайте товар с помощью таргетинга на основе правил. Отображается только в магазинах с включёнными [Strategies](/ru/aftersell/strategies_overview)

**Дополнительные возможности:**

* Добавляйте скидки прямо в виджете
* Закрепляйте планы подписки за конкретными вариантами
* Отображайте звёзды отзывов о товаре (требуется совместимое приложение отзывов)
* Задавайте максимальное количество принятых предложений на виджет (только для типов Single и Multi)

[Подробнее об апселл-виджетах](/ru/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

Позвольте покупателям изменять корзину прямо на странице checkout.

**Доступные элементы управления:**

* **Variant selector:** смена варианта на другой, имеющийся в наличии
* **Quantity selector:** изменение количества товаров
* **Remove item:** опция Show Remove Item Button удаляет апселл-товары из корзины. Парная настройка **Allow Removal of Non-Upsell Products** (по умолчанию выключена) распространяет удаление на всё содержимое корзины
* **Subscription selector:** изменение периодичности подписки
* **Subscription upgrade:** апгрейд разовых покупок до подписок
* **Custom text:** пользовательский текст под позициями заказа

**Таргетинг товаров:**

* Применить ко всем товарам в корзине
* Применить только к выбранным товарам
* Применить ко всем товарам, кроме выбранных

**Дополнительные возможности:**

* Отображение звёзд отзывов для товаров в корзине

[Подробнее об элементах управления корзиной](/ru/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

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

**Параметры настройки:**

* Основа вознаграждения: **Cart total** или **Item count**
* Основа суммы (для Cart total): **Order total (includes shipping and tax)**, **Subtotal (before discounts)** или **Subtotal after discounts (excludes tax and shipping)**
* Сообщение и оформление вознаграждения
* Цвета и дизайн индикатора прогресса

**Лучшие практики:**

* Комбинируйте с апселл-виджетами, чтобы помочь покупателям достичь порогов вознаграждения
* Используйте тип товара spend threshold в апселлах, чтобы автоматически рекомендовать товары, закрывающие разрыв
* Создавайте вознаграждения в Shopify с помощью Automatic Discounts (для скидочных вознаграждений) или Shipping Rules (для бесплатной доставки)
* Используйте **Subtotal after discounts (excludes tax and shipping)** в качестве основы суммы при предложении бесплатной доставки, чтобы индикатор совпадал с собственной оценкой порога Shopify при применении промокодов

[Подробнее о вознаграждениях](/ru/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

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

**Параметры настройки:**

* Макет значков: вертикальный список или горизонтальное отображение
* Пользовательские иконки и текст для каждого значка
* Параметры оформления и отступов

**Лучшие практики:**

* Подчёркивайте функции безопасности (безопасный checkout, SSL-шифрование)
* Демонстрируйте гарантии (гарантия возврата денег, бесплатный возврат)
* Показывайте преимущества доставки (бесплатная доставка, быстрая доставка)

[Подробнее о значках доверия](/ru/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonials
</div>

Отображайте отзывы покупателей прямо в checkout для укрепления доверия.

**Параметры настройки:**

* **Flex Testimonials (рекомендуется):** автоматически получает реальные отзывы из вашего приложения отзывов (Judge.me, Klaviyo, Okendo или Yotpo)
* Режим выбора: Manual (выбор конкретных отзывов) или Dynamic (автоматическое получение отзывов на основе содержимого корзины)
* Тип отображения: горизонтальная карусель или вертикальный список
* Фильтр по минимальному рейтингу

**Требования к настройке:**

* Настройте учётные данные приложения отзывов в Settings > Product Reviews
* Отзывы синхронизируются автоматически в течение 24 часов, затем еженедельно

[Подробнее об отзывах](/ru/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

Позвольте покупателям добавлять примечания к заказу.

**Параметры настройки:**

* Ручные примечания: поле свободного текста для ввода покупателем
* Готовые примечания: чекбоксы для опций вроде подарочной упаковки или эко-упаковки

[Подробнее о примечаниях](/ru/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

Загружайте и отображайте пользовательские изображения в вашем checkout.

**Параметры настройки:**

* Загрузка изображения
* Ползунок регулировки ширины
* Нет требования к минимальному размеру

[Подробнее об изображениях](/ru/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Text
</div>

Вставьте баннер с пользовательским текстом в ваш checkout.

**Параметры настройки:**

* **Container Style:** **Plain Text** (по умолчанию) или **Badge**. Цвета баннера ниже появляются только после выбора Badge
* **Banner Type** (только для Badge):
  * **Info (Blue):** синий фон с иконкой информации
  * **Success (Green):** зелёный фон с иконкой галочки
  * **Warning (Yellow):** жёлтый фон с иконкой предупреждающего треугольника
  * **Critical (Red):** красный фон с иконкой восклицательного знака
* Размер текста для поля **Body** (Small или Base) — у поля Heading нет настройки размера
* Выравнивание для полей Heading и Body
* Отступы: None, Extra Tight, Tight, Base, Loose или Extra Loose

[Подробнее о тексте](/ru/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Устранение неполадок
</div>

<div id="widgets-not-displaying">
  ### Виджеты не отображаются
</div>

Если виджеты не показываются после настройки:

1. Убедитесь, что виджет включён в админ-панели Aftersell
2. Проверьте, что блок приложения добавлен в редакторе Shopify Checkout
3. Убедитесь, что блок приложения сохранён в редакторе Shopify Checkout
4. Проверьте, что выбрано правильное размещение. При добавлении блока приложения в редакторе Shopify Checkout нужно выбрать соответствующее размещение, например Default placement, Additional placement 1 или Additional placement 2. Если выбрано неправильное размещение, виджет может не появиться или отобразиться не там. Удалите блок приложения и добавьте его заново, убедившись, что выбрано нужное размещение.
5. Для Shop Pay: убедитесь, что отмечена опция «Include app block in Shop Pay»
6. Очистите кэш браузера или попробуйте режим инкогнито
7. Подождите несколько минут, пока изменения вступят в силу

<div id="shop-pay-widgets-not-showing">
  ### Виджеты Shop Pay не показываются
</div>

Чтобы отображать виджеты в checkout Shop Pay:

1. Откройте виджет в редакторе Shopify Checkout
2. Отметьте опцию **Include app block in Shop Pay** в разделе Checkout behaviour
3. Сохраните изменения

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Боковая панель редактора Shopify Checkout с блоком приложения Aftersell Upsell Widget в разделе Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Подробнее о виджетах Shop Pay](/ru/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Дальнейшие шаги
</div>

* [Узнайте о триггерах checkout](/ru/aftersell/checkout_triggers), чтобы показывать виджеты по условиям
* [Настройте A/B-тестирование checkout](/ru/aftersell/checkout_a_b_testing), чтобы оптимизировать размещения
* [Настройте брендинг checkout](/ru/aftersell/checkout_branding_settings) в соответствии с дизайном вашего магазина
* [Изучите продвинутые стратегии апселлов](/ru/aftersell/best_practices), чтобы максимизировать AOV