Shopify手机端和电脑端显示不同的海报banner以及产品尺寸和位置

{% schema %}
{
  "name": "Hotends_Bulk_Sale_hengfu",
  "tag": "section",
  "class": "promotional-banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "custom_background",
      "label": "上传背景图片"
    },
    {
      "type": "image_picker",
      "id": "mobile_background",
      "label": "上传手机端背景图片"
    },
    {
      "type": "range",
      "id": "section_height",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "模块高度",
      "default": 400
    },
    {
      "type": "range",
      "id": "mobile_section_height",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "手机端模块高度",
      "default": 280
    },
    {
      "type": "select",
      "id": "background_position",
      "label": "背景图片位置",
      "options": [
        { "value": "top left", "label": "左上" },
        { "value": "top center", "label": "顶部居中" },
        { "value": "top right", "label": "右上" },
        { "value": "center left", "label": "左中" },
        { "value": "center center", "label": "正中" },
        { "value": "center right", "label": "右中" },
        { "value": "bottom left", "label": "左下" },
        { "value": "bottom center", "label": "底部居中" },
        { "value": "bottom right", "label": "右下" }
      ],
      "default": "center center"
    },
    {
      "type": "select",
      "id": "background_size",
      "label": "背景图片尺寸",
      "options": [
        { "value": "cover", "label": "填充" },
        { "value": "contain", "label": "适应" },
        { "value": "auto", "label": "原始大小" }
      ],
      "default": "cover"
    },
    {
      "type": "range",
      "id": "background_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "背景透明度",
      "default": 100
    }
  ],
  "presets": [
    {
      "name": "Hotends_Bulk_Sale_hengfu"
    }
  ]
}
{% endschema %}

<style>
.promotional-banner {
  position: relative;
  width: 100%;
  height: {{ section.settings.section_height }}px;
  overflow: hidden;
}
.promotional-banner__background,
.promotional-banner__background-mobile {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: {{ section.settings.background_size }};
  object-position: {{ section.settings.background_position }};
  opacity: {{ section.settings.background_opacity | divided_by: 100.0 }};
  z-index: 1;
  display: block;
}
.promotional-banner__background-mobile {
  display: none;
}

@media screen and (max-width: 749px) {
  .promotional-banner {
    height: {{ section.settings.mobile_section_height }}px;
  }
  .promotional-banner__background {
    display: none !important;
  }
  .promotional-banner__background-mobile {
    display: block !important;
  }
}
</style>

<div class="promotional-banner">
  {% if section.settings.custom_background %}
    {{ section.settings.custom_background | image_url: width: 2000 | image_tag: 
      class: 'promotional-banner__background',
      loading: 'lazy',
      sizes: '100vw'
    }}
  {% endif %}
  {% if section.settings.mobile_background %}
    {{ section.settings.mobile_background | image_url: width: 1000 | image_tag: 
      class: 'promotional-banner__background-mobile',
      loading: 'lazy',
      sizes: '100vw'
    }}
  {% endif %}
</div>

重点说明

• 电脑端只显示 custom_background，手机端只显示 mobile_background。
• 高度分别用 section_height 和 mobile_section_height 控制。
• 所有文字内容已删除，只保留背景图片。
• 你可以在 Shopify 后台分别上传 PC 和手机端图片，并设置不同高度。