Как добавить форму "Уведомление о бесплатной доставке в карточках товара для конкретного региона"

Для запуска этой формы требуется интеграция по инструкции.

Выберите шаблон встроенного блока:

Снимок экрана 2021-03-09 в 17.03.30.png

Укажите сайт:

Снимок экрана 2023-01-23 в 03.42.10.png

Определяемся с наполнением формы

В разделе «Встроенный блок» нажмите «Изменить», затем — «Редактировать»:

Снимок экрана 2023-01-23 в 03.47.58.png

Адаптируем шаблон под сайт

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

1. Меняем картинку на форме:

Сайты с иконками, где можно бесплатно скачать подходящую:

2. Настраиваем отступы и размеры для мобильных устройств и десктопа;
3. Подбираем шрифты для формы:

Здесь можно указать настройки для шрифта или использовать свой шрифт с сайта - по ссылке интсрукция как добавить свой шрифт в поп-ап

Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно из-за того, что у нас в системе этого уникального шрифта может не быть.

4. Выбираем цвета формы:

Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper или же использовать номер цвета с брендбука компании.

Настраиваем таргетинг

1. Страницы показа

Если вам нужно показывать форму только на тех страницах товаров, стоимость которых больше какой-то суммы,создайте сегмент по продуктам (пересчитываемый или статический) и укажите его через условие "Страницы показа - Страница продукта - Сегмент":

Снимок экрана 2022-08-01 в 16.18.49.png

2. География

Введите нужные условия. Например, если нужно показывать ярлык о доставке только по Москве добавьте "Город" – "Одно из значений" – "Москва".

Снимок экрана 2022-08-01 в 16.20.32.png

Общие настройки

Снимок экрана 2022-08-01 в 14.46.08.png

Задайте частоту показа.

Место отображения

Встроенную форму нужно "встроить" в текущую страницу сайта. Это можно сделать 2 способами:

  • выбрать селектор на сайте, куда вставить блок;

  • привлечь разработку и поставить div-блок в нужное место страницы сайта.

    Снимок экрана 2021-03-04 в 20.46.40.png

Попробуем вставить форму без привлечения разработки на сайт https://demoshop.mindbox.cloud/.

Как найти нужный селектор, чтобы вставить форму:
1. Заходим на страницу любого товара, например https://demoshop.mindbox.cloud/catalog/dlya_malchikov/tolstovki-3/2427/.
2. Подводим курсор к тому месту, где хотим поместить встроенную форм. Например, я хочу встроить блок с уведомлением после блока "Found cheaper?".
3. Нажимаем правой кнопкой мыши – "Посмотреть код" для Google Chrome и "Проверить объект" для Safari.

Снимок экрана 2021-03-04 в 18.20.12.png

4. Находим этот элемент в коде и копируем селектор. Для этого по выделенной строчке нажимаем правой кнопкой мыши, нажимаем "Скопировать" - "Путь селектора".

quantity_block_wrapper

5. У нас для элемента Found cheaper получился такой селектор:

#bx_117848907_2427 > div.right_info > div > div.middle_info.main_item_wrapper > div.prices_block > div.quantity_block_wrapper

В настройках формы вставляем полученное значение. Далее можно протестировать форму.

Далее в форме нажимаем "Сохранить" и "Запустить".

Подборка механик — как компании повышают эффективность рассылок