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

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

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

В статье рассмотрим, как изменить размеры фотографии у товаров, как настроить изменение фотографий товара в зависимости от цвета и как настроить обзор товара в 360 градусов.

 

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

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

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

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

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

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

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

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

Фотографии товара - 6240
Рисунок 1.

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

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

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

Фотографии товара - 1984
Рисунок 2.

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

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

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

Фотографии товара - 1848
Рисунок 3.

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

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

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

Фотографии товара - 9111
Рисунок 4.

Рекомендуем

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

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

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

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

Для того чтобы изменить размер, необходимо перейти в панель администрирования, пункт меню "Мои сайты" - "Редактировть" (рис.5).

Фотографии товара - 5340
Рисунок 5.

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

Фотографии товара - 5538
Рисунок 6.

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

Внимание!

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

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

Фотографии товара - 1738
Рисунок 7.

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

Фотографии товара - 4654
Рисунок 8.

Внимание!

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

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

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

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

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

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

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

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

Фотографии товара - 7404
Рисунок 9.

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

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

Фотографии товара - 8571
Рисунок 10.

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

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

Фотографии товара - 9936
Рисунок 11.

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

Фотографии товара - 1576
Рисунок 12.

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

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

Готово.

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

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

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

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

Фотографии товара - 2432
Рисунок 13.

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

Фотографии товара - 5022
Рисунок 14.

Фотографии товара - 9749
Рисунок 15.

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

Фотографии товара - 6690
Рисунок 16.

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

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

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

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

Фотографии товара - 1673
Рисунок 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) Включить опцию и загрузить изображения.

Для этого нужно в панели администрирования перейти в режим редактирование товара.

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

Фотографии товара - 1039
Рисунок 18.

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

Внимание!

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

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

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

Фотографии товара - 3453
Рисунок 19.

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

Фотографии товара - 2314
Рисунок 20.

Готово.

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...
0