【Shopify】オリジナルバナーセクションを実装してリッチなストアにする方法

<style>
  .custom-banner__section {
    padding: {{ section.settings.custom_padding }}px 0;
    background-color: {{ section.settings.custom_color }};
  }
  .custom-banner {
    display: flex;
    justify-content: space-between;
    max-width: var(--page-width);
    margin-inline: auto;
    padding: 0 5rem;
  }
  .custom-banner__item {
    position: relative;
    width: 48%;
    height: {{ section.settings.custom_range }}px;
  }
  .custom-banner__item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    transition: opacity 0.7s;
  }
  .custom-banner__item a:hover {
    opacity: 0.8;
  }
  .custom-banner__item a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .custom-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .custom-banner__text {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: {{ section.settings.custom_size }}px;
    z-index: 2;
  }
  @media screen and (max-width: 749px) {
    .custom-banner {
      flex-direction: column;
      row-gap: 40px;
      padding: 0 1.5rem;
    }
    .custom-banner__item {
      width: 100%;
      height: calc({{ section.settings.custom_range }}px * 0.8);
    }
    .custom-banner__text {
      font-size: calc({{ section.settings.custom_size }}px * 0.8);
    }
  }
</style>
<div class="custom-banner__section">
  <div class="custom-banner">
    <div class="custom-banner__item">
      <a href="{{ section.settings.link1 }}">
        <img
          src="{{ section.settings.image1 | img_url: 'master' }}"
          alt=""
          class="custom-banner__img">
        <p class="custom-banner__text" style="color: {{ section.settings.text_color1 }};">{{ section.settings.text1 }}</p>
      </a>
    </div>
    <div class="custom-banner__item">
      <a href="{{ section.settings.link2 }}">
        <img
          src="{{ section.settings.image2 | img_url: 'master' }}"
          alt=""
          class="custom-banner__img">
        <p class="custom-banner__text" style="color: {{ section.settings.text_color2 }};">{{ section.settings.text2 }}</p>
      </a>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "カスタムバナー",
    "settings": [
      {
        "type": "range",
        "max": 100,
        "min": 0,
        "step": 10,
        "default": 50,
        "id": "custom_padding",
        "label": "セクションの上下の余白"
      },
      {
        "type": "range",
        "max": 40,
        "min": 10,
        "step": 1,
        "default": 16,
        "id": "custom_size",
        "label": "PCテキストサイズ※spは*0.8"
      },
      {
        "type": "color",
        "id": "custom_color",
        "label": "背景色",
        "default": "#fff"
      },
      {
        "type": "range",
        "max": 600,
        "min": 150,
        "step": 50,
        "default": 300,
        "id": "custom_range",
        "label": "画像の高さ"
      }, {
        "type": "image_picker",
        "id": "image1",
        "label": "画像1を選択してください"
      }, {
        "type": "url",
        "id": "link1",
        "label": "画像1のリンク先URL"
      }, {
        "type": "text",
        "id": "text1",
        "label": "画像1のテキスト"
      }, {
        "type": "color",
        "id": "text_color1",
        "label": "画像1のテキスト色",
        "default": "#ffffff"
      }, {
        "type": "image_picker",
        "id": "image2",
        "label": "画像2を選択してください"
      }, {
        "type": "url",
        "id": "link2",
        "label": "画像2のリンク先URL"
      }, {
        "type": "text",
        "id": "text2",
        "label": "画像2のテキスト"
      }, {
        "type": "color",
        "id": "text_color2",
        "label": "画像2のテキスト色",
        "default": "#ffffff"
      }
    ],
    "presets": [
      {
        "name": "カスタムバナー",
        "category": "カスタム"
      }
    ]
  }
{% endschema %}