Создание Web Shop для мобильных игр

Web Shop — это решение, позволяющее продавать виртуальные товары, виртуальную валюту и бандлы с помощью платежного интерфейса Xsolla и интерфейса магазина на вашем сайте. При этом пользователям будет доступно более 700 способов оплаты.

На странице ниже описано, как создать базовый сайт для решения Web Shop. Чтобы узнать больше о решении и использовать все его возможности, изучите документацию.

Чтобы создать Web Shop:

1. Создайте проект в Личном кабинете.
2. Создайте сайт.
3. Настройте основные блоки.
4. Настройте корзину.

Создание сайта

1. Откройте проект в Личном кабинете.
2. В боковом меню нажмите Site Builder.
3. Нажмите Создать сайт.
4. Выберите шаблон Web Shop.
5. Добавьте ссылку на игру в Google Play или App Store для предварительной настройки интерфейса магазина (логотип, фоновое изображение, цвета, текст в футере). Если вы не хотите использовать данные игры, установите переключатель Использовать данные игры из Google Play или App Store в положение Выкл.

6. Нажмите Создать.
7. Выберите:
   • тему сайта;
   • цвета основных элементов;
   • степень скругления кнопок;
   • шрифты заголовков и основных текстов.
8. В основной части конструктора:
   • Загрузите изображения и видео в блоки.
   • Отредактируйте тексты, которые будут видны пользователям.

Настройка ключевых блоков

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

Настройка блока Хедер

Блок в верхней части сайта. Хедер отображает информацию о пользователе и содержит элементы навигации по сайту. Вы можете зафиксировать блок, чтобы при прокрутке сайта блок оставался в зоне видимости экрана.При необходимости кастомизируйте блок:

1. Установите соответствующие переключатели в положение Вкл:
   • Кнопка входа. Кнопка аутентификации пользователя отобразится в хедере сайта.
   • Зафиксировать. Функция позволяет хедеру оставаться видимым при перемещении страницы.
   • Пользовательский фон. Фон хедера изменится на пользовательский.
2. Настройте кнопки в блоке.

Основной блок

Блок с основной информацией о вашем Web Shop — для какой игры создан сайт и кто является ее разработчиком. Если вы не добавляли ссылку на Google Play или App Store при создании сайта, настройте следующие элементы Основного блока в основной части конструктора:

1. Добавьте иконку игры.
2. Укажите название игры.
3. Укажите разработчика игры.

При необходимости кастомизируйте блок:

1. Добавьте фоновое изображение.
2. Настройте карточки с информацией о сайте, для этого установите соответствующие переключатели в положение Вкл:
   • карточки с описанием;
   • иконки карточек;
   • заголовки карточек;
   • описание карточек.

Быстрый вход

Блок Быстрого входа предоставляет пользователям возможность аутентифицироваться на сайте. Вы можете использовать блок в дополнение к кнопке входа в хедере или вместо нее. Внешний вид блока и его возможности зависят от выбранного способа аутентификации.Если вы используете аутентификацию с помощью ID пользователя, мы рекомендуем добавить инструкцию по поиску ID в игре. Для этого:

1. Установите переключатель Инструкция по поиску ID в положение Вкл.
2. Нажмите на появившуюся строку внизу блока.
3. Замените текст инструкции для пользователей.

При необходимости кастомизируйте блок:

1. Настройте отображение заголовка и описания блока.
2. Замените тексты, которые установлены по умолчанию.

Чтобы настроить блок при использовании авторизации с помощью ID пользователя:

1. Настройте отображение заголовка и описания блока. Вы также можете заменить тексты, которые установлены по умолчанию.
2. Чтобы отображать инструкцию по поиску ID в игре, установите переключатель Инструкция по поиску ID в положение Вкл. Нажмите на появившуюся строку внизу блока и замените текст, который будет виден пользователям.

Настройка блока Магазин

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

1. При необходимости кастомизируйте блок:
   • добавьте заголовок;
   • включите отображение названий групп товаров;
   • включите вкладки для быстрой навигации в магазине;
   • добавьте пользовательский фон;
   • настройте кнопку призыва к авторизации.

2. В разделе магазина в раскрывающемся списке выберите тип товара, который вы хотите продавать на сайте, и его группу.

3. В разделе магазина выберите Стиль карточки товара:
   • Особый. Этот стиль карточки позволяет привлечь внимание пользователей к товарам или специальным предложениям. Мы рекомендуем использовать этот стиль карточки для продвижения бонусных и скидочных акций, товаров и акций с заданными ограничениями на пользователя или по времени отображения в каталоге и бандлов.
     В настройках этого стиля карточки вы можете:
     • скрывать или показывать изображение и описание товара;
     • вписать или растянуть изображение товара;
     • изменять цвет текста;
     • применять пользовательский фон для карусели.

• Горизонтальный. Этот стиль карточки позволяет размещать название, описание и цену товара справа от изображения.
  В настройках этого стиля карточки вы можете:
  • скрыть или показать описание товара;
  • вписать или растянуть изображение товара;
  • включать или выключать горизонтальную прокрутку на мобильных устройствах;
  • добавлять пользовательский фон для раздела с товарами.

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

• Большой. Этот стиль карточки рекомендуется использовать для бандлов и товаров с бонусом. Пользователь увидит состав карточки на лендинге, не нажимая на карточку.
  В настройках этого стиля карточки вы можете:
  • скрывать или показывать описание товара;
  • вписать или растянуть изображение товара;
  • включать или выключать горизонтальную прокрутку на мобильных устройствах;
  • добавлять пользовательский фон для раздела с товарами

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

5. Вы можете Скрывать раздел, если он пуст. Для этого переведите соответствующий переключатель в положение Вкл.

Настройка блока Футер

При необходимости кастомизируйте блок:

1. Выберите стиль блока.
2. Добавьте пользовательский фон.
3. Добавьте кнопки Поделиться, настройте иконки социальных сетей.
4. Добавьте ссылки на социальные сети.
5. Добавьте возрастной рейтинг.

Настройка корзины

Вы можете использовать корзину на сайте. Для этого:

1. В основной части конструктора перейдите к блоку Настройки корзины.
2. Установите переключатель Использовать корзину в положение Вкл.
3. Настройте дополнительные функции корзины (опционально). Для этого установите соответствующие переключатели в положение Вкл:
   • Показывать поле для промокода — позволяет пользователям использовать промокод или купон в интерфейсе корзины;
   • Авторизация пользователя до открытия корзины — открывает окно авторизации при переходе к корзине, если пользователь не был ранее авторизован.

Полезные ссылки

• Руководство по интеграции Web Shop
• Все блоки Site Builder
Была ли статья полезна?
Да
Нет
Спасибо!
Что может сделать страницу еще лучше? Сообщение Отправить
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение Отправить
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Последнее обновление: 14 августа 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.