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

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

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

 

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

Для того чтобы изменить размер, необходимо перейти в панель администрирования, пункт меню "Дизайн", далее нажмите на кнопку "Настройки шаблона" (рис.1).

Для того чтобы изменить размер, необходимо перейти в панель администрирования, пункт меню "Дизайн", далее нажмите на кнопку "Настройки шаблона"
Рисунок 1. Переход к настройкам размеров фотографий.

Откроется окно, в котором находите раздел "Товар" и 4 настройки для изменения картинки: "Товар. Самая маленькая фотография", "Товар. Маленькая фотография", "Товар. Большая фотография", "Товар. Средняя фотография" (рис.2).

Настройка размеров фотографий.
Рисунок 2. Настройка размеров фотографий.

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

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

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

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

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

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

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

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

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

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

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

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

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

Маленькая фотография.
Рисунок 4. Маленькая фотография.

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

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

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

 Самая маленькая фотография.
Рисунок 5. Самая маленькая фотография.

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

Внимание!

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

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

Пережатие фотографий.
Рисунок 6. Пережатие фотографий.

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

Подтверждение пережатия фотографий.
Рисунок 7. Подтверждение пережатия фотографий.

Внимание!

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

Рекомендуем

Загружать изображения, которые точь-в-точь по своим размерам соответствуют заданным размерам в настройках.

 

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

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

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

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

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

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

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

Добавление комбинаций товаров, добавление цвета к товару
Рисунок 8. Добавление комбинаций товаров, добавление цвета к товару

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

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

Добавление фотографий
Рисунок 9. Добавление фотографий

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

Загруженные изображения
Рисунок 10. Загруженные изображения

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

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

Добавление цвета для фотографии
Рисунок 11. Добавление цвета для фотографии

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

Представление в карточке товара.
Рисунок 12. Представление в карточке товара.

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

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

Готово.

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

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

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

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

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

Рисунок 13.

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

Затем выбрать в меню "Каталог - Справочник - Справочник цветов", на открывшейся странице нажать "Добавить цвет" , далее написать название и выбрать необходимый файл с картинкой. Затем сохранить новый цвет

Рисунок 14.

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

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

Рисунок 15.

Отлично. 

 

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

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

В верху страницы  "Каталог - Справочник - Справочник цветов" написаны актуальные для текущего момента размеры изображения.

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

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

Всё готово.

 

 

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

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

Редактирование товара.
Рисунок 16. Редактирование товара.

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

Загрузка фотографий 360.
Рисунок 17. Загрузка фотографий 360.

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

Внимание!

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

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

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

Иконка с возможностью просмотра фото 360.
Рисунок 18. Иконка с возможностью просмотра фото 360.

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

Просмотр фото 360,
Рисунок 19. Просмотр фото 360,

Готово.

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

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

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

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

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

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

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