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

Пошаговая инструкция по добавлению видео в блок "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": "url",
  "id": "video_url",
  "label": "Video Url"
},
{
  "type": "url",
  "id": "video_image_url",
  "label": "Video Image Url"
},
{
  "type": "checkbox",
  "id": "autoplay",
  "label": "Autoplay if no sound"
},
{
  "type": "checkbox",
  "id": "show_controls",
  "label": "Show Controls"
},
{
  "type": "checkbox",
  "id": "loop_video",
  "label": "Loop Video"
},

Найдите {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} и вставьте код.

{%- elsif section.settings.video_url -%}
  <video {% if section.settings.autoplay %} autoplay muted {% endif %} {% if section.settings.show_controls %} controls {% endif %} {% if section.settings.loop_video %} loop {% endif %} playsinline poster="{{ section.settings.video_image_url }}">
    <source src="{{ section.settings.video_url }}" type="video/mp4">
  </video>

Найдите строку с class="image-with-text__media-item" и замените её.

class="image-with-text__media{% if section.settings.video_url != blank %} image-with-text__video{% endif %} image-with-text__media--{{ section.settings.height }}{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank or section.settings.video_url != blank %} global-media-settings{% endif %}{% if section.settings.image != blank %} media{% elsif section.settings.video_url == blank %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"

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

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

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

.image-with-text__video video {
  width: 100%;
}

---

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