Документация по приложению Shopify
Всё, что нужно для настройки и кастомизации конвертации валют в вашем магазине Shopify
Содержание
1 Установка
Установить из магазина приложений Shopify
- Перейдите на страницу приложения Currency.Wiki в магазине Shopify
- Нажмите 'Добавить приложение' и подтвердите установку
- Приложение откроется и проведет вас через мастер настройки
- Завершите мастер настройки, чтобы начать конвертацию цен
Совет: Мастер настройки занимает около 2 минут и проведет вас по всем шагам.
2 Мастер настройки
Мастер настройки поможет правильно сконфигурировать приложение. Он проведет вас через обновление формата валюты и включение встраивания приложения.
Шаг 1: Добро пожаловать
Ознакомьтесь с процессом настройки и нажмите 'Начать'.
Шаг 2: Обновление формата валюты
Перейдите в Shopify Admin → Настройки → Общие → Настройки магазина. Найдите вашу валюту и нажмите меню с тремя точками → 'Изменить формат валюты'. Обновите HTML-поля с нашим классом-оберткой:
HTML с валютой:
<span class="cwiki">${{amount}} USD</span>
HTML без валюты:
<span class="cwiki">${{amount}}</span>
Важно: Класс-обертка cwiki необходим. Он сообщает нашему приложению, какие элементы на странице являются ценами, чтобы конвертировать только их, а не, например, номера телефонов или заказов.
Шаг 3: Включение встраивания приложения
Включите приложение в разделе App Embeds вашей темы:
- Перейдите в Интернет-магазин → Темы → Настроить
- Найдите 'App embeds' в левой панели
- Найдите 'Currency.Wiki App' и включите его
- Нажмите Сохранить в редакторе темы
Шаг 4: Проверка настройки
Нажмите 'Сканировать мой магазин', чтобы убедиться, что настройка завершена. Мастер проверит наличие класса-обертки cwiki и встраивания приложения. Если всё успешно — вы готовы к работе!
3 Стили виджета
Выберите один из 6 стилей виджета, чтобы он соответствовал дизайну вашего магазина. Каждый стиль можно настроить под цвета вашего бренда.
Минималистичный выпадающий список
Компактная интеграция в шапку с простым выпадающим списком. Лучше всего подходит для размещения в правом верхнем углу.
Плавающая кнопка
Мобильная плавающая кнопка с расширяемой панелью. Отлично подходит для мобильных магазинов. Размещается в углах.
Боковая панель
Панель на всю высоту с функцией поиска. Идеально для магазинов с большим выбором валют.
Модальное окно
Центрированное всплывающее окно с сеткой валют. Делает выбор валюты более удобным.
Встроенный переключатель вкладок
Горизонтальные вкладки для популярных валют. Быстрое переключение без открытия меню.
Угловой бейдж
Минималистичная иконка в углу, раскрывается по клику. Наименее навязчивый вариант для чистого дизайна.
Совет: Используйте страницу настроек виджета в админ-панели приложения для предпросмотра всех стилей с цветами вашего магазина.
4 Админ-панель
Админ-панель дает полный контроль над работой конвертации валют в вашем магазине.
Главная панель
Включайте/выключайте виджет, смотрите статистику конверсий и просматривайте живой предпросмотр виджета.
Настройки виджета
Выберите стиль, позицию, цвета, размер, скругление углов и отображение флагов.
Управление валютами
Включайте/отключайте валюты, меняйте порядок, настраивайте автоопределение и параметры курсов.
Аналитика
Просматривайте графики конверсий, топ используемых валют и распределение международных клиентов.
Тема и внешний вид
Выберите режим темы (авто, светлая, темная, кастом), настройте цвета, включите эффекты стекла и задайте поведение темной темы.
Сообщение при оформлении заказа
Включите сообщение на страницах корзины/оформления заказа, чтобы информировать клиентов о валюте оплаты.
5 Расширенные настройки
Расширенные настройки дают пользователям Pro больше контроля над форматированием цен и поведением конвертации.
Форматирование цен (Pro)
- Десятичные знаки - Управляйте количеством знаков после запятой (0-6).
- Формат числа - Выберите стиль формата (Авто, US, EU, Индийский, Пробел•Точка, Пробел•Запятая).
- Позиция символа - Размещайте символ валюты до или после суммы, либо автоматически по валюте.
- Округление - Стандартное, всегда вверх, всегда вниз или без округления. Есть опция округления до .99.
Интеграция с темой (Pro)
Встраивайте виджет или уведомление о корзине вручную в любую часть темы с помощью этих HTML-фрагментов:
Встраивание виджета (добавьте в header.liquid или любой раздел):
<div class="cwiki-widget"></div>
Встраивание уведомления в корзину (добавьте в cart.liquid):
<div class="cwiki-banner"></div>
Опции для разработчиков (Pro)
- Переопределение стилей - Добавляйте собственный CSS для тонкой настройки стиля виджета.
- Слушатели кликов - Повторная конвертация цен при клике на определённые элементы (например, выбор размера, опции товара).
- Дополнительные элементы цен - Нацельтесь на дополнительные элементы цен помимо стандартного .cwiki.
- Шаблоны URL - Повторное сканирование цен, если URL содержит определённые строки (для AJAX-контента, бесконечной прокрутки).
- Задержка конвертации - Ожидание перед конвертацией цен (для контента, который загружается после готовности страницы).
Внимание: Эти опции предназначены для опытных пользователей. Тестируйте на предварительном просмотре темы перед публикацией.
6 Устранение неполадок
Цены не конвертируются?
Убедитесь, что класс-обертка cwiki добавлен в настройки формата валюты. Перейдите в Настройки → Общие → Настройки магазина и проверьте HTML-форматирование. Также убедитесь, что встраивание приложения включено в редакторе темы.
Виджет не отображается?
Проверьте, что встраивание приложения включено в разделе App Embeds вашей темы. Откройте редактор темы, найдите App Embeds и убедитесь, что Currency.Wiki включен. Сохраните и обновите магазин.
Цены мерцают при загрузке?
Наше приложение разработано для загрузки без мерцания. Если вы видите мерцание, проверьте, не мешают ли плагины кэширования. Также убедитесь, что встраивание приложения загружается в head вашей темы.
Определяется неверная валюта?
Определение валюты основано на IP-адресе посетителя. VPN или корпоративные сети могут влиять на определение. Посетители всегда могут выбрать валюту вручную. Вы также можете задать валюту по умолчанию в настройках.
Виджет не соответствует моей теме?
Используйте настройки Темы и внешнего вида для кастомизации цветов или включите Авто-режим для автоматического определения цветов темы. Также можно использовать пользовательский CSS в расширенных настройках.
Нужна помощь?
Наша поддержка готова помочь с любыми вопросами по настройке и конфигурации.
