Shopify将banner-image修改为banner-video 1. 在Shopify中，将首页的banner

1. 在Shopify中，将首页的banner从图片修改为视频需要进行一些主题代码的修改。以下是步骤指南：

步骤 1：准备视频

需要准备一个视频文件，确保其格式和尺寸适合你的需求。将视频文件上传到 Shopify 的文件库中，路径为“管理 > 设置 > 文件”。（主要是要文件链接之后要用）

步骤 2：备份主题

在进行任何代码更改之前，建议备份主题，以防出现问题。通过复制当前主题来创建一个备份。（切记）

步骤 3：编辑主题代码

进入在线商店主题编辑器
- 在 Shopify 管理员页面中，点击“在线商店 > 主题 > 操作 > 编辑代码”。
找到image-banner相关文件
- 在sections文件夹中，image-banner.liquid文件（image-banner组件块代码） - 在assets文件夹中，section-image-banner.css文件（image-banner组件块样式）
替换代码，敲重点

- mage-banner.liquid文件修改

1）下滑找到{% schema %}{% endschema %}代码块添加以下代码编辑

{
      "type": "checkbox",
      "id": "video_background",
      "default": false,
      "label": "Has Video Background"
    },

2）找到id为Banner的div，在div中class样式上，右滑到最后的分号位置，添加代码

编辑

{% if section.settings.video_background %} video-background{% endif %}

3）之后在id为Banner的div标签里添加以下代码，视频链接为你的实际文件链接

编辑

{%- if section.settings.video_background -%}
    <div class="banner__media media video-background">  
      <video autoplay muted loop id="myVideo">
        <source src="视频链接" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
    </div>                                                                                                                      
  {%- endif -%}

4）找到 {%- elsif section.settings.image_2 == blank -%}，添加以下代码（注意是在标签内加）

编辑

and section.settings.video_background == false

- section-image-banner.css文件修改：添加以下样式（响应式）

.media.video-background>*:not(.zoom):not(.deferred-media__poster-button) {
  height: auto;
}

@media screen and (max-width: 749px) {
  .banner--large.video-background:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
      min-height: 27rem;
  }
}
  
@media screen and (min-width: 750px) {
  .banner--large.video-background:not(.banner--adapt) {
      min-height: 39rem;
  }
}
  
@media screen and (min-width: 990px) {
  .banner--large.video-background:not(.banner--adapt) {
      min-height: 52rem;
  }
}

  
@media screen and (min-width: 1320px) {
  .banner--large.video-background:not(.banner--adapt) {
      min-height: 62rem;
  }
}

步骤 4：保存和预览

保存对代码的更改。
回到Shopify商店预览页面，刷新以查看更改后的效果。
没问题后将副本的代码块加入live theme，并保存

编辑

总结

通过这些步骤，你可以将Shopify首页的banner从图片修改为视频，缺点是，不能在模块里自定义上传视频，需要手动在后台修改视频链接