Shopify将banner-image修改为banner-video

呆淋

已于 2024-08-06 17:19:52 修改

阅读量307

点赞数 5

文章标签：前端

于 2024-08-06 16:51:26 首次发布

本文链接：https://blog.csdn.net/qq_55046209/article/details/140958331

版权

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

步骤 1：准备视频

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

步骤 2：备份主题

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

步骤 3：编辑主题代码

1. 进入在线商店主题编辑器

- 在 Shopify 管理员页面中，点击“在线商店 > 主题 > 操作 > 编辑代码”。

2. 找到image-banner相关文件

- 在`sections`文件夹中，image-banner.liquid文件（image-banner组件块代码）

- 在`assets`文件夹中，section-image-banner.css文件（image-banner组件块样式）

3. 替换代码，敲重点

- image-banner.liquid文件修改

1）下滑找到{% schema %}{% endschema %}代码块添加以下代码，要在settings[]里添加

{
      "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;
  }
}