SWATCHES & OPTIONS - приложение для тех, кто хочет объединять товары в удобные группы: по цвету, модели, назначению или любому другому признаку.

Пример магазина с приложением - ССЫЛКА

Руководство по установке приложения SWATCHES & OPTIONS на InSales

1. Приложение "SWATCHES & OPTIONS" устанавливается так же, как любое приложение в inSales:

Перейдите в раздел Расширения → Каталог расширений:

2. Найдите приложение “SWATCHES & OPTIONS” в разделе «Маркетинг - Рекомендации» или можно найти через поиск, вбив “SWATCHES" -> и нажмите «Установить».

3. Вы попадете снова в административное меню вашего сайта, где вам нужно нажать “Установить” и подтвердить действие.

Вход в расширение

4. Вы окажетесь на странице установленных приложений.
   
   В разделе Настройки - InSales, нужно скопировать этот код.
   
   
   

Если нужно, чтобы приложение заработало на всех темах, установленных в InSales, то вставляем этот код в бэк-офисе вашего аккаунта InSales в разделе “Сайт” - “Дизайн” - “Счетчики и Коды”

Выбираем “Блоки кода для вставки на все страницы сайта”

Нажимаем “Добавить еще”

Оставляем выбранным “В раздел head” и вставляем скопированный код из приложения Настройки — InSales. Далее нажимаем “Сохранить””

Если нужно, чтобы приложение работал в определенной теме, то код вставляется непосредственно в код темы:

Раздел “Сайт” - “Дизайн” - у нужной темы выбираем “действий” - “редактировать код”

Находим сниппет head - вставляем код:

В темах, в которых нет виджетов (шаблоны второго поколения) тоже ищем сниппет head и копируем код туда.

На этом установка закончена. Приступаем к настройке. На странице установленных приложений кликните по ссылке «SWATCHES & OPTIONS»:

5. Вы переместитесь в ваш личный кабинет «SWATCHES & OPTIONS» на домене теперь вы можете настроить свой магазин

6. ДАШБОРД - Вы можете увидеть ваше ИМЯ, количество пользователей USER “1”, статус вашего приложения STATUS “ОК” - означает оплачен и приложение готово к работе, количество добавленных товаров “PRODUCT” 22

СОЗДАНИЕ ГРУПП ТОВАРОВ & ОБЪЕДИНЕНИЕ ПО ЦВЕТАМ

7. Перейдите в раздел ГРУППЫ для объединение товаров по цветам и создания вариантов товаров

8. Для создания нажимаем на СОЗДАТЬ

9. В окне вводим НАЗВАНИЕ 1 - его используем для внутренней работы и вашего удобства, чтобы вы могли быстро найти товар и внести изменения

Второе НАЗВАНИЕ - это непосредственно название того, что вы планируйте добавить: ЦВЕТ, ВАРИНАТ, ОБЪЕМ

10. Переходим к выбору товаров - надо выделить все товары, которые вы хотите объединить

Введите артикул или название товара и добавьте их в группу ADD ITEM

НАСТРОЙКА ОТОБРАЖЕНИЯ ВАРИАНТОВ И ЦВЕТОВ ТОВАРА НА ПРИМЕРЕ “ЦВЕТ”

11. Страница товаров и страница коллекций разделены между собой и вы можете им назначить разные стили либо скрыть и не отображать на странице коллекции либо на мобильной/десктопной версиях

12. Вы можете задать вид вариантов или цветов как для карточки товара так и для страницы коллекций:

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

13. Не пропустите раздел Страница товара. Источник изображения/Страница коллекций. Источник изображения - вы должны выбрать подходящий для вас вариант отображения: Это может быть: первое фото загруженное в карточке товара, второе фото загруженное в карточке товара, последнее фото из карточки товара, а так же вы можете выбрать Цвет/Пользовательское изображение и добавить то, что код HEX или ваше кастомное изображение

14. Ввести номер цвета #HEX вы можете в данном поле, либо загрузить его изображение.

15. После того, как вы добавили всю информацию и выбрали стиль нажмите СОХРАНИТЬ внизу экрана

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

Если вы разбираетесь в коде (шаблонизатор liquid, html, css) то в личном кабинете приложения можно указать классы, куда должен выводится блок:

Далее открываем код нашего шаблона и вставляем пустой , именно в нем и будет выводится наш блок с товарами.

ДЛЯ ШАБЛОНОВ ВТОРОГО ПОКОЛЕНИЯ

Для корректной работы приложения нужно внести изменения в код шаблона

Для вывода групп в карточке товара нужно добавить класс "product" к тегу form

Для вывода групп в категориях, нужно добавить класс "product-preview" к тегу "родительскому тегу" и атрибут "data-product-id=""

Чтобы изменить код шаблона, нужно открыть редактор кода.

Открываете в бэк-офисе раздел "Дизайн"

Можно сделать копию тему с основного шаблона, можно работать в основной. Рекомендуем вносить изменения в копию темы.

Нажимаем на "Действия", выбираем из списка "Редактировать код"

Для изменения кода товара открывает product.liquid

Обычно форма покупки находится в сниппетах include "product_info или include "product_form"

Для изменения кода категории открываем collection.liquid

Ищем строку кода for product in collection.products или for product in products

Иногда нужно найти сниппет

Для вывода групп в категориях, нужно добавить класс "product-preview" к тегу "родительскокму тегу" и атрибут "data-product-id=""

Выбираем есто, где должны отображаться группы. Пишем пустой div с классом из настроек приложения

ВНИМАНИЕ: Для всех пользователей второго поколения шаблонов, эта процедура обязательна. Рекомендуем обратиться за настройкой нам на почту support@two-g.ru для помощи в настройке приложения.

ГОТОВО!

ПОЗДРАВЛЯЕМ, ВЫ УСПЕШНО СГРУППИРОВАЛИ ТОВАРЫ ИЛИ ДОБАВИЛИ ВАРИАНТ ДЛЯ ВАШИХ ПОЛЬЗОВАТЕЛЕЙ.

Если у вас остались вопросы, напишите нам на почту: support@two-g.ru или по телефону: +7-906-379-6000