Создание кнопки оформления заказа

• Для чего это нужно:

На странице с описанием Вашего продукта необходимо создать кнопку, нажав на которую, Ваши пользователи перейдут к оформлению заказа и оплате. Многочисленные результаты тестов и соответствующие кейсы интернет-бизнесменов (как отечественных, так и зарубежных) показывают, что кнопка оформления заказа (или СТА-кнопка) — важнейший элемент в системе онлайн-продаж. От ее внешнего вида и текстового содержания в большой мере зависит вероятность совершения покупки. Поэтому команда АвтоВебОфис неустанно совершенствует функционал данной опции.

• Видеоурок:

Создание кнопки «Заказать» oDQbpxTgY_U?medium

PopUp-формы оформления заказа

7irvBskq4tk?medium

• Как добавить кнопку оформления заказа:

  1. Выберите подраздел «Товары» в разделе «Продажи».



  2. Выбираем товар, переходим на вкладку «Кнопки оформления заказа». Нажимаем кнопку «Создать».



  3. Ниже представлены блоки редактора:
    1. В первом мы можем увидеть, как будет выглядеть сама кнопка заказа. кнопки_оформления_заказа3.jpg

    2. Ниже находится блок с кодом этой кнопки, который мы будем использовать для размещения кнопки на сайте. кнопки_оформления_заказа4.jpg

    3. Сбоку находится панель по управлению данной кнопкой, здесь мы можем применить различные настройки: кнопки_оформления_заказа5.jpg

      1. Цвет. Задаем диапазон оттенков нашей кнопки. в первом окошке выбираем посветлее, во втором потемнее.
      2. Текст. В этом поле можно ввести надпись, которая будет отображаться на самой кнопке. По умолчанию введено «Заказать», Вы можете ввести «Заказать сейчас», «Оформить заказ», «Купить» и т.д.
      3. Цвет текста. Можно задать цвет надписи, которая будет отображаться на самой кнопке.
      4. Всплывающая подсказка. В этом поле можно задать текст подсказки, которая будет всплывать при наведении курсора на кнопку оформления заказа, например, продублировать название товара.

        кнопки_оформления_заказа14.jpg

      5. Округление. Придает округлость краям кнопки. Выберите число в диапазоне от 0 до 20, где 0-без применения округления, а 20-круглые края. кнопки_оформления_заказа6.jpg

      6. Размер шрифта, Шрифт. В этих полях можно задать стиль шрифта надписи, которая отображается на кнопке, и его размер.
      7. Высота, Ширина. Ширина и высота кнопки в пикселях, по умолчанию стоит 220х40px.
      8. Одиночный заказ. Данная опция позволяет очищать корзину, т.е. если пользователь уже добавлял какой-либо товар в корзину, но не завершил оформление заказа, то когда он нажимает кнопку оформления заказа повторно, предыдущий товар не попадает в список товаров в корзине.
      9. Открывать в новом окне. Данная настройка позволяет автоматически проставлять в генерируемый код кнопки заказа HTML-тег target=«_blank». После этого, нажатие на кнопку «Заказать» будет приводить к формированию корзины заказа в новом окне, т.е. изначальная страница с описанием товара или услуги закрываться не будет.
      10. По центру. Если поставить галочку, то кнопка заказа будет располагаться по центру страницы.
      11. Скрывать столбцы: Цена, Количество, Сумма, Х (удалить). В этом поле Вы можете настроить столбцы страницы оформления заказа, если поставить галочку, данный столбец не будет выводиться. Данный функционал естественным образом отражает специфику продажи эксклюзивных и информационных товаров: маловероятно, что покупатель захочет приобрести сразу два (или больше) совершенно одинаковых диска (или набора файлов) с одинаковым курсом или тренингом. Поэтому в данном случае нет необходимости выводить на странице заказа поля с ценой и количеством, которое в 99,9% случаев будет соответствовать единице. Как показывают исследования, лишняя информация может негативно отражаться на конверсии.
      12. Кнопка возврата к товарам. После оплаты заказа будет выводиться кнопка, нажав на которую, пользователь вернется к списку товаров магазина.
        1. Использовать. Поставьте галочку, если хотите использовать данную кнопку.
        2. Текст на кнопке. Введите надпись, которая будет отображаться на кнопке, например «Вернуться на сайт».
        3. Url возврата. В этом поле необходимо ввести адрес страницу, на которую будет перенаправлен пользователь, нажав на кнопку.
      13. Когда все настройки заданы, нажимаем кнопку «Сохранить». кнопки_оформления_заказа7.jpg

  4. Далее необходимо разместить кнопку у себя на сайте, для этого:
    1. Скопируйте код кнопки из второго блока (b.)
    2. Зайдите в панель управления своим сайтом. Здесь находим нужную страницу с описанием товара (услуги), для которого мы создаем кнопку заказа. Во всех популярных конструкторах сайтов используются графические редакторы, где мы можем вводить описание наших товаров и услуг не зная html. Такой графический редактор позволяет вводить тексты, но по умолчанию не позволяет вставлять html-код. Поэтому чтобы создать кнопку, выберите место на странице, где будет располагаться кнопка, введите большими буквами слово, по которому мы сможем ориентироваться, например, «ЗАКАЗАТЬ». кнопки_оформления_заказа8.jpg

    3. Сверху в редакторе выбираем вкладку «Текст», она также в разных редакторах может называться «Источник», «Html-код» и т.д. Переходим на вкладку «Текст», открывается html-код данной страницы, здесь находим наше слово «ЗАКАЗАТЬ». кнопки_оформления_заказа9.jpg

    4. Удаляем слово «ЗАКАЗАТЬ» и на его место вставляем скопированный ранее код нашей кнопки. кнопки_оформления_заказа10.jpg

    5. Возвращаемся на вкладку «Визуально». Кнопка появилась на сайте. При необходимости откорректируйте положение кнопки. Нажать кнопку «Обновить». кнопки_оформления_заказа11.jpg

    6. Заходим на сайт на страницу описания товара )если была открыта, то нажимаем «Обновить», кнопка должна появиться. кнопки_оформления_заказа12.jpg

    7. Чтобы проверить, как работает кнопка, нажимаем на нее. Если ссылка была указана верно, то мы попадем на страницу оформления заказа в CRM АвтоВебОфис.

Поздравляем, кнопка оформления заказа успешно добавлена!

Если у Вас еще остались какие-либо вопросы, пожалуйста, обращайтесь в нашу Службу поддержки по email zakaz@autoweboffice.com или в окне консультанта на сайте http://autoweboffice.com


Успехов Вам и до новых встреч!
Служба заботы о клиентах сервиса АвтоВебОфис


Инструменты страницы