Как добавить всплывающее окно на Shopify
Опубликовано: 2021-11-26Зачем добавлять всплывающие окна в магазин Shopify?
Это просто.
Вы можете достичь многих целей электронной коммерции, например:
- Конвертируйте до 10% трафика сайта
- Восстановление брошенных корзин
- Генерируйте тысячи потенциальных клиентов каждый месяц
- Привлекайте трафик на страницы с распродажами и акциями
Похоже ли это на цели роста бизнеса, которых вы пытаетесь достичь? Если да, то давайте узнаем, как добавлять всплывающие окна на Shopify.
Перейти к разделам контента:
- Типы всплывающих окон Shopify
- Как добавить всплывающее окно в Shopify
Типы всплывающих окон для добавления на Shopify
Существует множество типов всплывающих окон, которые вы можете использовать для конвертации посетителей вашего магазина Shopify. Каждый тип предназначен для достижения определенной цели.
В приложениях для всплывающих окон Shopify есть готовые всплывающие окна для разных целей, поэтому вам просто нужно выбрать подходящие, настроить их и добавить в свой магазин.
К наиболее популярным типам всплывающих окон относятся:
- Всплывающие окна электронной почты . Просите электронные письма в обмен на поощрение
- Всплывающие окна опроса . Собирать отзывы/ответы от посетителей
- Всплывающие окна с купонами . Дайте купоны со скидками, чтобы увеличить ваши продажи
- Всплывающие окна новостной рассылки . Попросите пользователей подписаться на рассылку новостей по электронной почте.
- Всплывающие всплывающие окна . Пригласите посетителей сыграть в игру
- Всплывающие окна для мобильных устройств . Оптимизирован для просмотра на мобильных устройствах
- Всплывающие окна рекламных акций . Делитесь информацией об акциях, чтобы стимулировать продажи
- Всплывающие окна восстановления корзины . Уменьшите количество отказов от корзины с помощью напоминаний и/или поощрений, таких как скидки и бесплатная доставка.
Есть и другие всплывающие окна Shopify. Но хорошая новость заключается в том, что вам нужен только один всплывающий инструмент Shopify, чтобы иметь возможность использовать все эти типы и многое другое.
| Нужна дополнительная информация о различных типах всплывающих окон? Взгляните на другие наши руководства: 40 примеров всплывающих окон электронной почты Как создавать всплывающие окна Spin-to-Win Примеры всплывающих окон для SMS + как их создать |
Как добавить всплывающее окно на Shopify
Теперь вы знаете, что такое всплывающие окна и какие преимущества они приносят магазинам Shopify, давайте создадим их.
Шаг 1: Добавьте всплывающее приложение Shopify в свой магазин [бесплатно]
В этом уроке мы будем использовать Wisepops .
С помощью этого всплывающего приложения Shopify вы можете использовать все типы всплывающих окон. Но самое главное, Wisepops имеет рейтинг 4,9 звезды (из 5) от пользователей Shopify.
Чтобы добавить всплывающее окно в Shopify, перейдите на страницу Wisepops в магазине приложений Shopify . Нажмите Добавить приложение , чтобы начать установку.

Если вы вышли из своего магазина, нажав « Добавить приложение », вы попадете на страницу входа в Shopify. Введите свои данные, чтобы завершить установку.
Следующий -
После того, как вы войдете в систему, вы увидите окно, уведомляющее вас об установке Wisepops в вашей административной панели Shopify. Нажмите «Установить приложение» .

Нажав кнопку « Установить приложение », вы перейдете на страницу регистрации Wisepops Shopify .
Теперь давайте перейдем к следующему шагу: добавлению ваших данных в Wisepops.
Шаг 2: Получите бесплатную учетную запись Wisepops
Приложение Wisepops имеет два простых шага регистрации.
Вы можете зарегистрироваться двумя способами: со своим Gmail или своим именем, адресом электронной почты и паролем. Выберите предпочтительный способ регистрации, чтобы продолжить.

В следующем окне –
Добавьте свой веб-сайт, название и размер компании, а также другую информацию, связанную с бизнесом. Эти ответы помогут Wisepops сделать ваше приложение более актуальным.

Нажмите «Начать бесплатную пробную версию», чтобы завершить регистрацию и интегрировать свой магазин Shopify с Wisepops.
Это займет три секунды, так что теперь вы можете приступить к созданию своей первой всплывающей кампании для конвертации ваших посетителей!
| Примечание . Вы также можете добавить Wisepops в свой магазин с помощью кода установки . Шаг 1 : Получите бесплатную учетную запись на сайте Wisepops. Шаг 2. В Wisepops перейдите в « Настройки » > «Веб- сайты », щелкните значок с тремя точками. Шаг 3: Выберите « Код установки» в появившемся меню, чтобы открыть код. Шаг 4: Добавьте код непосредственно перед тегом </body> в теме вашего магазина. | ![]() |
| Нужна помощь с добавлением Wisepops в ваш магазин Shopify? Напишите в нашу службу поддержки, используя кнопку чата на сайте. Посетите наш Справочный центр (этот раздел о встраивании кода Wisepops должен быть полезен) |
Шаг 3. Создайте всплывающую кампанию
Вернемся к приборной панели Wisepops.
Чтобы создать новое всплывающее окно для вашего магазина Shopify, нажмите «Новая кампания».

В меню есть две опции: Campaign Assistant и Custom Campaign .

Если вы создаете кампанию впервые, выберите помощника кампании. Таким образом, вы будете получать подсказки на протяжении всего процесса, поэтому добавление всплывающего окна в ваш Shopify будет еще проще.
Итак, нажмите «Ассистент кампании» , чтобы продолжить.
Шаг 4. Выберите цель кампании
Пришло время определиться с целью нашего первого всплывающего окна Shopify.
Давайте перейдем к увеличению продаж , потому что, ну, какой владелец магазина Shopify не хотел бы этого?

Нажмите Увеличить продажи .
Затем Wisepops покажет вам способы стимулирования продаж: бесплатная доставка, купоны на первый заказ, предложения с ограниченным сроком действия и другие.
Давайте выберем бесплатную доставку .
Это означает, что мы предоставим вашим клиентам бесплатную доставку при покупках на определенную сумму. Этот метод может помочь увеличить продажи, поскольку бесплатная доставка — главная причина, по которой люди делают покупки в Интернете.

Шаг 5: Выберите шаблон всплывающего окна
Выбрав « Бесплатная доставка », вы автоматически будете перенаправлены в библиотеку шаблонов. Там вы можете выбрать формат всплывающего окна Shopify.

Выберем третий шаблон (см. ниже). Это ненавязчивое всплывающее окно веб-сайта, которое может отображаться в углу экрана.

Вот предварительный просмотр этого всплывающего окна в Wisepops (для просмотра необходимо войти в систему).
Примечание. Вы можете увидеть, как каждый шаблон будет выглядеть в вашем магазине Shopify. Просто нажмите кнопку предварительного просмотра, которая появляется при наведении курсора на шаблон. ![]() |
Шаг 6. Настройте кампанию
Выбрав шаблон всплывающего окна, вы будете перенаправлены в редактор кампании.
Давайте сделаем кампанию естественной частью вашего магазина Shopify. Сделать это просто: просто наведите курсор на элемент, чтобы просмотреть параметры редактирования.
Как и здесь, параметры появляются, когда я навожу указатель мыши на основной заголовок всплывающего окна.

Советы по настройке:
- Добавьте оригинальное изображение
- Используйте фирменные цвета для единообразия дизайна
- Дайте кнопке CTA контрастный цвет, чтобы она выделялась.
- Добавьте ссылку на страницу продукта или страницу категории продукта в текстовое меню CTA, чтобы привести посетителей к покупкам.
Кроме того, вот совет: попробуйте установить порог бесплатной доставки в размере 100 долларов США. Это сумма денег, которую посетители должны потратить, чтобы активировать бесплатную доставку.
Национальная федерация розничной торговли предполагает, что 65% покупателей обращают внимание на пороговые значения, прежде чем добавлять товары в корзину. На ваш порог, очевидно, повлияет стоимость ваших товаров.
| Хотите, чтобы примеры красивых всплывающих окон вдохновляли вас? 25 примеров красивых всплывающих окон Shopify Примеры дизайна всплывающих окон электронной почты + Советы по профессиональному дизайну 20 великолепных примеров дизайна всплывающих окон + лучшие практики |
Шаг 7. Настройте сценарий отображения всплывающего окна
Время появления всплывающих окон играет решающую роль в максимизации конверсии.
В этом случае мы хотим, чтобы все посетители видели наше всплывающее окно Shopify. Вот почему мы можем захотеть показать кампанию, когда они загружают ваш магазин. Чтобы настроить время, перейдите в раздел « Триггер ».
вкладку в меню « Экран ».
Там выберите On Landing .

После того, как вы установили время, давайте добавим 10-секундную задержку.
Это означает задержку отображения всплывающего окна на 10 секунд. Так как немедленное отображение всплывающих окон может разочаровать некоторых посетителей, задержка позволит им сначала быстро осмотреться.
Чтобы добавить задержку, найдите раздел « Время » на вкладке « Триггер ». Там нажмите После задержки .

После того, как вы нажмете « После задержки », вы увидите поле ввода и раскрывающийся список.
Добавьте «10» в поле и выберите « Секунды на странице» в раскрывающемся меню (как на изображении ниже). Нажмите +Добавить правило , когда закончите.

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

| Подробнее о том, как время появления всплывающих окон влияет на конверсию: как определить лучшее время для показа вашего предложения . |
Шаг 8: Активируйте всплывающую кампанию Shopify
Единственный шаг между вами и активной кампанией — это активация.
Давайте сделаем это сейчас.
Перейдите на панель инструментов (нажмите на логотип Wisepops в верхнем левом углу) и убедитесь, что вы находитесь на вкладке « Кампании ».
Там установите тумблер в положение «включено» (правое положение, как показано ниже). Как только вы это сделаете, кампания будет запущена!

| Учебное пособие по всплывающим окнам Spin-to-Win Как насчет создания всплывающего окна, которое ежемесячно генерирует 5000 лидов? В этом кейсе Faguo найдите руководство, чтобы воспроизвести самую успешную кампанию всплывающих окон бренда. ![]() |
Узнайте больше о всплывающих окнах Shopify
С Wisepops вы можете запустить практически любую всплывающую кампанию Shopify для достижения своих целей роста. Это означает, что вы найдете множество функций, ориентированных на конверсию, великолепные шаблоны всплывающих окон и профессиональные советы по маркетингу внутри Wisepops.
Отсюда мы рекомендуем вам изучить эти варианты:
- Поэкспериментируйте с функциями главного меню
- Ознакомьтесь с обзором продукта , чтобы узнать больше о типах всплывающих окон и их преимуществах.
- Прочтите тематическое исследование Asphalte и тематическое исследование OverstockArt, чтобы узнать, как предприятия ежемесячно генерируют тысячи потенциальных клиентов с помощью Wisepops.
Главное меню в Wisepops содержит множество настроек для ваших всплывающих кампаний. Например, с помощью разделов « Всплывающие окна» и « Блоки » вы можете создавать всплывающие окна разных размеров, форматов, макетов и добавлять разные кнопки.

Кроме того, наш блог является источником всплывающих подсказок, историй успеха и лучших практик. Эти сообщения должны быть интересны владельцам магазинов Shopify, таким как вы:
- 5 стратегий всплывающих окон, чтобы повысить уровень подписки
- Как увеличить продажи на Shopify: 12 советов + примеры
- 15 лучших практик всплывающих окон для привлечения потенциальных клиентов и продаж
Последний, но тем не менее важный -
Поздравляем, вы сделали это!
Вы присоединились к клубу магазинов Shopify, которые конвертируют посетителей с помощью всплывающих окон. Создавайте кампании, экспериментируйте с предложениями и развивайте свой бизнес.
Как добавить всплывающие окна в Shopify: резюме
Всплывающие окна Shopify могут стать вашим ведущим методом локального маркетинга и лидогенерации. Создайте свою первую кампанию, попробуйте различные методы и стимулы для посетителей и наблюдайте, как ваш бизнес растет, как никогда раньше.
Попробуйте, и вы увидите, что всплывающие окна Shopify позволяют генерировать тысячи лидов на автопилоте.



