Как вам помочь ?

Фотографии товара

Актуально для версии магазина: 8.0 | 6.5-6.0 | 5.0

 

Рекомендации по размеру изображений

В магазине на базе ADVANTSHOP формируется четыре физически отдельных изображения из одного загруженного оригинала.

Одно мини-изображение для корзины, одно - чуть поменьше - для показа в каталоге, одно среднее для показа в карточке товара и одно большое для показа при клике на фото в карточке товара.

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

В стандартном шаблоне дизайна используются следующие размеры изображений по умолчанию:

По умолчанию размеры "Большая фотография":

Ширина 1000 (px)
Высота 1000 (px)

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

По умолчанию размеры "Средняя фотография":

Ширина 400 (px)
Высота 400 (px)

Средняя фотография товара - это изображение, которое показывается в карточке товара. Пример на рисунке 1, слева.


Рисунок 1. Размеры изображения.

По умолчанию размеры для  "Маленькая фотография":

Ширина 200 (px)
Высота 200 (px)

Маленькая фотография - это, собственно, фото, которое показывается в каталоге в списке товаров. Посмотрите пример на рисунке ниже (рис. 2).


Рисунок 2.

По умолчанию размеры "Самая маленькая фотография":

Ширина 60 (px)
Высота 60 (px)

Самая маленькая фотография отображается, когда товар добавляют в корзину, и в карточке товара под основным фото, показывая тем самым, что есть ещё фотографии и какие они (рис. 3).


Рисунок 3.

Рекомендуем

Загружать изображения, размер которых не меньше, чем размер у "Средней фотографии" и не больше, чем размер у "Большой фотографии".

Если загрузить изображение, размеры которого меньше, чем размер у "Средней фотографии" - на сайте оно будет выглядеть "пиксельно".

Если загрузить изображение, размеры которого больше, чем размер у "Большой фотографии" - оно всё равно будет сжато до размеров "Большой фотографии".

 

Как изменить размер изображений?

Для того чтобы изменить размер, необходимо перейти в панель администрирования, пункт меню "Каналы продаж"->"Интернет-магазин"->"Параметры магазина", в открывшейся странице вкладка "Категории товаров" (рис.4).


Рисунок 4.

Раздел "Размеры изображения" и 4 настройки для изменения картинки: "Товар. Самая маленькая фотография", "Товар. Маленькая фотография", "Товар. Большая фотография", "Товар. Средняя фотография" (рис.5).


Рисунок 5.

Измените размеры и нажмите "Сохранить".

Внимание!

Новые параметры будут действовать только для вновь загруженных изображений.

Для того, чтобы применить измененные размеры для изображений, загруженных ранее, необходимо пережать фотографии после изменений размера и сохранения настроек. Для этого в пункте меню "Каналы продаж"->"Интернет-магазин"->"Параметры магазина", вкладка "Категории товаров", раздел "Размеры изображения", нажмите "Пережать фотографии товаров" (рис.6).


Рисунок 6.

Откроется окно, Вы нажимаете "Ок" (рис. 7).


Рисунок 7.

Внимание!

Установленные размеры - это максимально допустимые размеры. Это означает, что если загрузить картинку размерами более, чем указано в настройке, то картинка будет пропорционально сжата, чтобы соответствовать размерам одной из сторон.

 

Изменение фотографии товара в зависимости от цвета

Чтобы ассоциировать цвет с фото, необходимо сделать 2 шага. 

Справочник цветов

Чтобы добавить новые цвета в справочник, перейдите в панели администрирования в пункт меню "Настройки -> Товары, в открывшейся странице вкладка "Цвета", здесь Вы можете добавлять, редактировать и удалять цвета, которые затем будут использованы для ассоциации с фотографиями товара. Подробнее в инструкции.

Ассоциация цвета и фотографии

Чтобы ассоциировать цвет с фото, необходимо зайти в панель администрирования и перейти в режим редактирования карточки товара.

В панели слева выбираем вкладку "Цены и наличие" (отмечена красным слева на картинке). В открывшейся вкладке добавляем вариации нужного цвета (рис. 8).


Рисунок 8.

После того как для вариантов товара добавлены цвета, сохраните изменения и перейдите во вкладку "Фотографии".

Во вкладке "Фотографии" необходимо подгрузить фотографии товара тех цветов, которые были добавлены на шаге 1. Есть несколько способов загрузки: загрузить с компьютера или найти в интернете. Подробнее в инструкции (рис. 9).


Рисунок 9.

После загрузки фотографии товара с разными цветами появится возможность ассоциировать фотографии с цветом (рис. 10).


Рисунок 10.

Под каждой фотографией есть выпадающий список тех цветов, которые добавлены в комбинациях на вкладке “Цена и наличие”. Чтобы добавить фотографии цвет, кликаем по выпадающему меню и выбираем подходящий цвет данной фотографии. Таким образом добавим цвет для каждой фотографии (рис.11).


Рисунок 11.

В карточке товара будет выглядеть вот так (рис. 12)


Рисунок 12.

На один цвет может быть несколько фотографий.

Фотографии не показываются все сразу. Выводятся фотографии только того цвета, который выбрал пользователь. Если пользователь выбирает, к примеру, цвет красный, то будут показаны только красные фотографии, если выбирает черный, будут отображены черные.

Готово.

Как подгрузить иконки для цвета

Начнем с того, в каком случае нужна подгружать свою картинку для кубика цвета?

Если для Вашего товара нужно указать цвет, но не один из стандартных вариантов не подходит для этой задачи. Например у вас платье цвета хаки (зеленые пятна) или в кружочек, а цвета "в кружочек" как такового нет. Чтобы решить такой вопрос, можно воспользоваться функцией загрузки изображения для кубика цвета. 

Также вы можете заменить иконку уже существующего цвета на Ваш вкус. Потенциальный покупатель сможет увидеть ее в указанном поле на (рис.13)


Рисунок 13.

Чтобы добавить картинку к цвету, нам нужно перейти в панель администрирования. Затем выбрать в меню "Настройки->Товары" (рис.14), на открывшейся странице выбрать вкладку "Цвета", нажать "Добавить цвет", далее написать название и выбрать необходимый файл с картинкой. Затем сохранить новый цвет (рис. 15).


Рисунок 14.


Рисунок 15.

К примеру, добавим цвет "Хаки", в итоге, у товара, получим вот так (рис 16)


Рисунок 16.

Размеры картинки для кубика цвета

Из подгружаемой вами картинки будет сделано 2 варианта, один для каталога, другой для карточки товара. Размер по умолчанию для двух вариантов одинаков и равен 18px на 18px.

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

Также, вы можете изменить размеры кубиков цвета (Пункт меню "Кааналы продаж"->"Интернет-магазин"->"Параметры магазина", вкладка "Категория товаров", раздел "Размер и цвет" (рис.17). Однако, после сохранения все загруженные картинки для цветов нужно будет загрузить повторно, чтобы они пережались с учётом изменённых размеров.


Рисунок 17.

Всё готово.

 

 

Обзор товара в 360 градусов

Для того чтобы сделать 360 градусный обзор товара необходимо сделать 3 вещи:

1) Сделать фотосъемку товара со всех сторон.

От количества фотографий и шага в градусах будет зависеть плавность анимации вращения, мы рекомендуем порядка 30-40 фотографий на один товар, т.е. примерный шаг в 10-12 градусов вокруг товара. Если фотографии уже есть, данный шаг можно пропустить и идти далее. Обратите внимание, что изображение должны быть хорошего качества, чтобы при просмотре у клиента не возникал дискомфорт при просмотре.

2) Дать цифровые номера фотографиям, в соответствии с тем, в каком порядке они должны отображаться при вращении (т.е. 1, 2, 3 и т.д.). При вращении одна фотография незаметно подменяется другой, поэтому если вы выставите порядок неверно, то может получиться так, что при ракурсе, скажем в 240гр, следующим случайно пойдет ракурс с 10 гр, из-за этого эффект вращения пропадет.

Необходимо соблюсти требования для фото:

Нумерация строго по порядку, а именно 1.jpg, 2.jpg, 3.jpg и т.д, начиная с 1 (не с "01") и без пропусков нумерации.

Формат картинок только *.jpg (не png, gif, jpeg)

3) Включить опцию и загрузить изображения.

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


Рисунок 18.

Далее перейдем в раздел "фотографии - фотографии для просмотра 360", и включить возможность просмотра 360. Нажать на кнопку загрузить (рис. 19).


Рисунок 19.

После этого необходимо выбрать все ваши подготовленные фотографии в появившемся окне, и подтвердить выбор.

Внимание!

На один товар возможно только одно 360 отображение.

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

Если Вы всё сделали верно, то у вас появиться вот такая иконка в карточке товара (рис. 20).


Рисунок 20.

И затем появиться возможность просматривать фото 360 (рис. 21)


Рисунок 21.

Готово.

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: фотография, изображение, маленькая, большая, средняя, самая маленькая, изменение размеров, размеры, 360 градусов, цвет, размер