> ## 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.

# Создание вашего первого виджета для страницы оформления заказа

> Руководство по настройке виджета для страницы оформления заказа в Aftersell — от выбора и создания виджета до настройки его стиля и поведения.

В этой статье мы проведём вас через процесс настройки виджета для страницы оформления заказа в Aftersell. Чтобы узнать о доступных типах виджетов, [нажмите здесь](/ru/aftersell/checkout_widget_types).

Приступим.

***

<div id="step-1-selecting-your-widget">
  ## Шаг 1: выбор виджета
</div>

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

В этом руководстве мы выберем виджет апселла.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3302868c50e12461761e6a1300820bd7" alt="Страница Checkout в Aftersell с карточками виджетов Upsells, Cart Controls, Rewards и Testimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## Шаг 2: создание виджета
</div>

Нажмите «Create Upsell», чтобы начать создание виджета апселла.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e89c35b59c09c6fd858e910f46d9fcc0" alt="Панель Upsells в Checkout Editor со стрелкой, указывающей на кнопку Create upsell" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## Шаг 3: выбор пресета
</div>

Выберите один из оптимизированных пресетов виджета или начните с нуля.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-new-campaign-preset-options.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d64607da81a3a4b43e9d5c7c9a7420c2" alt="Экран создания новой кампании с вариантами пресетов, такими как апселлы с одним и несколькими товарами" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## Шаг 4: настройка стиля и поведения
</div>

Пора довести детали до совершенства. Настройте стиль и поведение вашего виджета. Отрегулируйте логику срабатывания, уточните выбор товаров или добавьте финальный штрих в дизайн.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-single-product-upsell-editor.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e9560a037ceb877ea2d47d261278934b" alt="Редактор апселла с одним товаром, показывающий настройки триггера, товара и стиля с предпросмотром в реальном времени" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## Шаг 5: включение статуса виджета
</div>

Убедитесь, что статус виджета установлен в активное состояние.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7f9cedd5ace808ad47a077090be3e29d" alt="Checkout Editor с включённым переключателем Status апселла для активации виджета" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

Теперь, когда ваш виджет для страницы оформления заказа активен в Aftersell, остаётся последний шаг — разместить виджет в вашем Shopify checkout. Хотите узнать, как это сделать? Нажмите ниже, чтобы подробнее ознакомиться с процессом.

[Подробнее](/ru/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)