# Добавление товара

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

### Как создать товар <a href="#add" id="add"></a>

* Перейдите в магазин и нажмите на кнопку **«Добавить товар»**.
* Напишите название и описание товара/услуги, добавьте изображения.

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FGHN1SXtZUqu5dWd8CBte%2Fadd%20product%20ru.png?alt=media&#x26;token=22584c1e-ad85-4189-a590-684c2b0312ab" alt="" width="563"><figcaption></figcaption></figure>

* Выберите способ оплаты:

1. **Онлайн-оплата** — если вы хотите принимать платежи на сайте. Не забудьте подключить [платежную систему](https://docs.wfolio.pro/shop/payment/payment-systems).
2. **Оплата наличными** — клиент сделает заказ, а вы свяжетесь с ним лично.

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FwncLqS03ZEOtqy6b8NLc%2Fchoose%20payment%20options%20ru.png?alt=media&#x26;token=2ee5bef0-bb0c-46ae-a4cb-99e13790b0df" alt="" width="563"><figcaption></figcaption></figure>

* Укажите цену товара или услуги. Можно добавить несколько цен для разных версий: [#variations](#variations "mention").
* Включите переключатель **«Разрешить выбор количества»** для заказа нескольких позиций товара сразу.
* Нажмите на кнопку **«Добавить»**, чтобы сохранить товар. Если нужно, настройте сбор контактов или действия после заказа по инструкциям ниже.

### Варианты цены для товара <a href="#variations" id="variations"></a>

Перейдите во вкладку **«Цена за варианты»**, чтобы установить разные цены в зависимости от версии товара или услуги. Это могут быть разные размеры для печати, пакетов услуг и т.д.

Можно добавить до 7-ми вариантов.

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FThfo4B54ctHF9YlKCaTO%2Fadd%20product%20variations%20ru.png?alt=media&#x26;token=fa07afb7-a3b4-4b97-9ff8-16cdd6272417" alt="" width="563"><figcaption></figcaption></figure>

Посмотрите страницу с примером такого товара:

{% embed url="<https://demo.wfolio.pro/fotokartiny>" %}

### Как настроить сбор данных в форме заказа <a href="#form" id="form"></a>

Форма заказа позволяет собирать нужную информацию от клиента. По умолчанию запрашивается **имя клиента** (и **email** при онлайн-оплате).

Чтобы получить дополнительную информацию о клиенте, перейдите во вкладку **«Настройки формы заказа»** и добавьте другие поля:

* Телефон.
* Текстовое поле — для коротких ответов (например, страница клиента в соцсетях).
* Выпадающий список — если клиенту нужно выбрать одну из опций.
* Комментарий — для развернутого сообщения от клиента.

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FFJS5VWVkfY5tGwsu2kpX%2Fproduct%20form%20settings%20ru.png?alt=media&#x26;token=82d3af50-567f-4597-9e71-73560764370d" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FMVLhUPiGL1L9f3p0C7WJ%2Fproduct%20form%20settings%20example%20ru.png?alt=media&#x26;token=69bbb5e4-cc5c-4142-ab41-56e62e35667c" alt="" width="563"><figcaption></figcaption></figure>

### Как настроить действие после заказа <a href="#actions" id="actions"></a>

✔ Можно перенаправить покупателя на нужную страницу или специальный адрес (где можно что-то скачать или посмотреть).\
✔ Или отправить письмо с подтверждением заказа и дополнительной информацией.

Для этого в карточке перейдите во вкладку **«После заказа»**.

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FB0VpfBh3FC17EiUbputV%2Fafter%20order%20settings%20ru.png?alt=media&#x26;token=08b47597-36c2-44fd-9a08-2ddf12f6969e" alt="" width="563"><figcaption></figcaption></figure>

* **Переход на страницу**:
  * На внешний адрес — вставьте любую ссылку. Например: на [файл](https://docs.wfolio.pro/site/content/add-file), на закрытый чат в Telegram, на другой сайт.
  * На страницу сайта — выберите уже созданную страницу. Доступно на тарифах с [конструктором сайта](https://docs.wfolio.pro/billing/plans#site-and-drive).

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2Fne1YXawg2HKtmbX5kuyf%2Fmove%20to%20page%20after%20order%20setting%20ru.png?alt=media&#x26;token=badb2f05-e564-4316-850d-64792135c987" alt="" width="563"><figcaption></figcaption></figure>

* **Письмо после оплаты.** Напишите текст письма, которое будет направлено клиенту после покупки. Используйте панель форматирования текста, чтобы сделать текст жирным <mark style="background-color:blue;">**(B)**</mark>, курсивом <mark style="background-color:blue;">**(I)**</mark>, подчеркнутым <mark style="background-color:blue;">**(U)**</mark>, зачеркнутым <mark style="background-color:blue;">**(S)**</mark> или [вставить ссылку](https://docs.wfolio.pro/site/content/links#text).

<figure><img src="https://355501785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtZOPvCqrx5oWXGbl7B-887967055%2Fuploads%2FVI4w6LYuQc3KkkSThzfb%2Fletter%20after%20order%20settings%20ru.png?alt=media&#x26;token=b2bcbbd6-5eb8-4ad0-8498-99f045c1da2f" alt="" width="563"><figcaption></figcaption></figure>

### Где разместить товар или услугу?

✔ **На странице сайта**. Смотрите подробнее здесь: [products](https://docs.wfolio.pro/shop/site/products "mention")

✔ **В галерее на диске**. Смотрите инструкцию: [products](https://docs.wfolio.pro/shop/gallery/products "mention")

✔ А ещё можно **поделиться ссылкой на отдельную страницу с товаром**. Для этого после добавления товара нажмите на стрелку возле нужного товара и скопируйте ссылку на него.

#### Похожие статьи

{% content-ref url="../gallery" %}
[gallery](https://docs.wfolio.pro/shop/gallery)
{% endcontent-ref %}

{% content-ref url="../site" %}
[site](https://docs.wfolio.pro/shop/site)
{% endcontent-ref %}

{% content-ref url="../site/client-account" %}
[client-account](https://docs.wfolio.pro/shop/site/client-account)
{% endcontent-ref %}

{% content-ref url="../site/certificates" %}
[certificates](https://docs.wfolio.pro/shop/site/certificates)
{% endcontent-ref %}

{% content-ref url="../site/thank-you-page" %}
[thank-you-page](https://docs.wfolio.pro/shop/site/thank-you-page)
{% endcontent-ref %}

{% content-ref url="../../site/content/add-file" %}
[add-file](https://docs.wfolio.pro/site/content/add-file)
{% endcontent-ref %}