К основному содержимому
Видео на странице товара

Как добавить видео в фотогалерею и описание товара на сайте

Обновлено больше недели назад

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

Для размещения видео:

  1. На странице видео в сервисе скопируйте код iframe для вставки.

  2. Разместите полученный код в поле Фото, Галерея или Описание товара согласно инструкции.

 

Получение кода для вставки на страницу товара

Рассмотрим получение кода для вставки видео на примере YouTube. Видео для товаров лучше размещать на собственном канале, так как в роликах чужих каналов может присутствовать реклама, которая будет мешать вашим покупателям.

  1. На странице видеоролика в YouTube нажмите ПоделитьсяВстроить.

  2. Скопируйте код. Пример того, как он должен выглядеть можно увидеть ниже.

Получение кода для вставки на страницу товара — Хорошоп


Пример кода для вставки видео:

<iframe width="560" height="315" src="https://www.youtube.com/embed/tiyKAnPb82A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Получение кода Shorts video

Вертикальные видео длительностью до 60 секунд при загрузке на YouTube попадают в раздел Shorts.

Чтобы получить код такого видео:

  1. На странице просмотра видео в YouTube нажмите правую клавишу мыши.

  2. Выберите пункт Копировать HTML-код. Пример такого кода приведен ниже.

Получение кода Shorts video — Хорошоп

Пример кода для вставки Shorts-видео:

<iframe width="473" height="841" src="https://www.youtube.com/embed/ueoC8XJ8QN4" title="Хорошоп" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 
​ 

Размещение видео в блоках Фото и Галерея

Перейдите на страницу редактирования товара в админке сайта:

  1. В поле Фото или Галерея выберите изображение, которое станет превью видео.

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

Размещение видео в блоках Фото и Галерея — Хорошоп

Блок Видео на странице товара

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

Блок Видео на странице товара — Хорошоп

Блок Видео на странице товара 

Для включения/выключения блока и изменения его расположения на странице товара перейдите в раздел админ-панели Сайт Дизайн Редактор дизайна, разверните раздел Страница товара, перейдите на вкладку Структура страницы и настройте элемент Видео.
​  

Стикер Видео в карточке товара

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

Стикер видео в миникарточке товара&nbsp;— Хорошоп

Стикер видео в миникарточке товара 


Как настроить стикер:

  1. В админке перейдите в раздел Сайт → Стикеры для товаров.

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

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

  4. Снимите отметку с чекбокса Отображать, если вы хотите выключить стикер, и нажмите Сохранить.

Как настроить стикер Видео — Хорошоп

Быстро включить и выключить стикер можно при помощи чекбокса в общем списке стикеров.

Читайте также

   

Размещение видео в описании товара

Также видео можно разместить в блок описания товара. Для этого:

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

  2. Разместите код в нужном месте описания и нажмите Сохранить.

Размещение видео в описании товара — Хорошоп


Нажмите Товар на сайте, чтобы проверить корректность отображения видео на странице товара на сайте.

Нашли ответ на свой вопрос?