【Shopify】アプリ不要！管理画面からノーコードで「ご利用ガイド」を構築するマルチブロック・セクションの全貌

{% comment %}
  Shopify 万能ご利用ガイド・セクション
  - ロゴデータ内蔵により、決済設定の有無に関わらず確実に表示
  - マルチブロック設計でページを自由に構成
{% endcomment %}

<style>
  .guide-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 2rem 1.5rem; 
  }
  .guide-title-h3 { 
    background: #363636; 
    color: #fff; 
    padding: 12px 20px; 
    margin: 30px 0 10px 0; 
    font-size: 23px; 
    font-weight: normal; 
  }
  .guide-title-h4 { 
    background: #efefef; 
    color: #363636; 
    padding: 10px 15px; 
    margin: 15px 0 10px 0; 
    font-size: 16px; 
    font-weight: normal; 
    border-left: 5px solid #363636; 
  }
  .guide-text { 
    padding: 5px 15px; 
    line-height: 1.6; 
  }
  .guide-payment-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin: 20px 0; 
  }
  .guide-payment-icon { 
    width: calc((100% - (15px * 5)) / 6); 
    min-width: 50px; 
  }
  .guide-payment-icon svg { 
    width: 100%; 
    height: auto; 
    display: block; 
  }
  .guide-image-box img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 10px 0; 
  }

  @media screen and (max-width: 749px) {
    .guide-payment-icon { 
      width: calc((100% - (15px * 2)) / 3); 
    }
  }
</style>

<div class="guide-section-v2" id="guide-{{ section.id }}">
  <div class="guide-container">
    {% for block in section.blocks %}
      <div class="guide-item" {{ block.shopify_attributes }}>
        {% case block.type %}
          {% when 'title' %}
            <h3 class="guide-title-h3">{{ block.settings.title }}</h3>

          {% when 'subtitle' %}
            <h4 class="guide-title-h4">{{ block.settings.subtitle }}</h4>

          {% when 'paragraph' %}
            <div class="guide-text">{{ block.settings.paragraph }}</div>
          
          {% when 'payment_methods' %}
            <div class="guide-payment-grid">
              {% assign payment_items = block.settings.payment_list | remove: ' ' | split: ',' %}
              {%- for type in payment_items -%}
                <div class="guide-payment-icon">
                  {%- case type -%}
                    {%- when 'applepay' -%}
                      {{ 'apple_pay' | payment_type_svg_tag }}
                    {%- when 'googlepay' -%}
                      {{ 'google_pay' | payment_type_svg_tag }}
                    {%- else -%}
                      {{ type | payment_type_svg_tag }}
                  {%- endcase -%}
                </div>
              {%- endfor -%}
            </div>

          {% when 'image' %}
            <div class="guide-image-box">
              {% if block.settings.image != blank %}
                <img 
                  src="{{ block.settings.image | image_url }}" 
                  alt="{{ block.settings.image.alt }}" 
                  loading="lazy" 
                  width="{{ block.settings.image.width }}" 
                  height="{{ block.settings.image.height }}"
                >
              {% endif %}
            </div>
        {% endcase %}
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "万能ご利用ガイド",
  "blocks": [
    { 
      "type": "title", 
      "name": "大見出し", 
      "settings": [
        { "type": "text", "id": "title", "label": "タイトル", "default": "タイトル" }
      ] 
    },
    { 
      "type": "subtitle", 
      "name": "小見出し", 
      "settings": [
        { "type": "text", "id": "subtitle", "label": "サブタイトル", "default": "サブタイトル" }
      ] 
    },
    { 
      "type": "paragraph", 
      "name": "説明文", 
      "settings": [
        { "type": "richtext", "id": "paragraph", "label": "本文" }
      ] 
    },
    { 
      "type": "payment_methods", 
      "name": "支払いロゴ", 
      "settings": [
        { 
          "type": "text", 
          "id": "payment_list", 
          "label": "ロゴID", 
          "default": "visa,master,jcb,applepay,googlepay,paypay" 
        }
      ] 
    },
    { 
      "type": "image", 
      "name": "自由画像", 
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像" }
      ] 
    }
  ],
  "presets": [
    { "name": "万能ご利用ガイド" }
  ]
}
{% endschema %}