Как добавить видео (YouTube Video With Text)

Пошаговая инструкция по добавлению YouTube-видео в блок "Image with Text" в теме Dawn от Shopify с помощью кода — бесплатно и без приложений.

Актуально для версии темы Dawn 15.3.0

---

Если вы хотите избежать настройки кода, попробуйте тему Shrine.

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

Shrine − 15% скидка

Ваш промокод: VECOMLAB

1. Перейдите в редактор кода

Online Store → Themes → Edit code.

2. Откройте файл image-with-text.liquid в папке sections

Найдите image_picker и вставьте код.

{
  "type": "video_url",
  "id": "youtube_video_url",
  "accept": [
    "youtube"
  ],
  "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
  "label": "YouTube Video Url",
  "placeholder": "Paste your YouTube video link here",
  "info": "t:sections.video.settings.video_url.info"
},

Найдите section.settings.image и вставьте код.

{%- elsif section.settings.youtube_video_url.type == 'youtube' -%}
  <iframe src="https://www.youtube.com/embed/{{ section.settings.youtube_video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>

Найдите class="image-with-text__grid" и вставьте код.

{% if section.settings.youtube_video_url  %}image-with-text__youtube-container{% endif %}

Найдите строку с class="image-with-text__media" и вставьте код сразу после image-with-text__video{% endif %}.

{% if section.settings.youtube_video_url %}image-with-text__youtube-inner-container{% endif %}

Если вы уже выполнили эти настройки:

Как добавить видео (Video With Text)

3. Откройте файл component-image-with-text.css в папке assets

В конец файла вставьте стили.

/*
  YouTube Video With Text
*/
.image-with-text__youtube-container {
  display: flex;
  align-items: center;
}

.image-with-text__youtube-inner-container {
  min-height: unset;
  padding-bottom: 56.25%;
  position: relative;
}

.image-with-text__youtube-inner-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  border: 0;
}

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

---

Нужна помощь с настройкой? Свяжитесь с нами — мы всё сделаем за вас.