Иконки на изображение товара (+видео)

Словарь

Иконка на изображении товара – опция, позволяющая прикрепить к изображению товара иконку, которая может носить информативный характер.

Назначение иконок

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

Работа с иконками

Добавленные иконки будут отображаться:

  • При просмотре товара в его карточке;

  • В списке товаров стиля «Большие картинки»;

  • В гаджете «Список товаров» стиля «Большие картинки».

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

Для изменения значения по умолчанию, пройдем в каталог. Через меню редактирования зайдем в настройки каталога (Рисунок 1).

Меню редактирования каталога. Настройки каталога

Рисунок 1 — Меню едактирования каталога. настройки каталога

В конце всех настроек определим позицию размещения иконки и отступы (Рисунок 2).

Доступны следующие позиции размещения:

  • Верхний левый угол

  • Сверху в центре

  • Верхний правый угол

  • Середина слева

  • По центру

  • Середина справа

  • Нижний левый угол

  • Снизу по центру

  • Нижний правый угол

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

Настройка каталога. Определение позиции и отступа у иконки

Рисунок 2 — Настройки каталога. определение позиции и отступа иконки

Теперь загрузим иконку. Пройдем в любой товар каталога с изображением. Через меню редактирования товара пройдем по ссылке «Редактировать товар» (Рисунок 3).

Меню редактирования товара. Редактировать товар

Рисунок 3 — Меню редактирования товара. Редактировать товар

В конце редактирования станут доступны пункты для работы с иконкой товара (Рисунок 4). Загрузить иконку можно нажав на кнопку «Выберите файл», затем в появившемся окне, найти нужное изображение и открыть его для прикрепления к товару (Рисунок 5). Слишком большие изображения адаптируются под размеры изображения товара. Также можно выбрать позицию иконку, отличную от позиции по умолчанию. Сохраняем изменения.

Редактирование товара. Настройка иконки

Рисунок 4 — Редактирование товара. Настройка иконки

 

Выбор изображения иконки на компьютере

Рисунок 5 - Выбор изображения иконки на компьютере

После сохранения при просмотре товара в его карточке (Рисунок 6), в списке товаров стиля «Большие картинки» (Рисунок 7), а также в гаджете «Список товаров» также стиля «Большие картинки» (Рисунок 8), на изображении товара появится загруженная иконка в определенной нами позиции.

Карточка товара

Рисунок 6- Карточка товара

Список товаров, стиль «Большие картинки»

Рисунок 7 — Список товаров, стиль «Большие картинки»

 

Гаджет «Список товаров», стиль «Большие картинки»

Рисунок 8 - Гаджет «Список товаров», стиль «Большие картинки»

При желании удалить или изменить иконку (Рисунок 9), надо снова вернуться в режим редактирования товара:

  • Если хотим ее изменить, просто выбираем другое изображение для иконки на компьютере и сохраняем сделанные изменения;

  • Если же хотим удалить изображение иконки, то ставим галочку в пункте «Удалить» под ним и также сохраняем изменения.

Редактирование товара. Удаление или изменение иконки

Рисунок 9 - Редактирование товара. Удаление или изменение иконки

Бывает, что иконка не заменится, в таком случае, надо обновить кеш-память браузера нажатием сочетания клавиш «Ctrl + F5». В любом случае, после нескольких обновления страниц, картинки заменится.

Таким образом, можно загрузить иконки на изображение товара, которая будет наглядно информировать пользователей о какой-либо акции или отнести товар к новинкам.

Варианты использования иконок

Применение на сайте иконок для товаров позволяет:

  • Наглядно показать, что товар относится к распродажному или что идет по определенной скидке;

  • Отнести товар к новой коллекции или к определенному сезону;

  • Показать принадлежность изображения товара компании (например, можно загрузить лейбл компании с прозрачным фоном).

Вернуться к разделу