쇼피파이_2_Edit theme

자사에서 쇼피파이를 사용하는 US,SG 국가의 브랜드들은 대부분 프로모션 때 메인배너와 최상단의 띠배너, 상세페이지에 이벤트 배너를 삽입하는 수준의 이벤트를 진행중인데, 이 작업을 코드로 일일이 셋팅을 진행해왔다

하지만! 마케터나 기획자 분들이 본인들이 이미지 삽입, 이벤트 기간을 설정을 손쉽게 할 수 있도록 쇼피파이 내부의 ‘Edit theme’에 기능을 셋팅을 해보았다!

메인비쥬얼 / 띠배너

<liquid>
{{ 'main_visual.css' | asset_url | stylesheet_tag }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="main_slide promotion_vis main_prm {{ section.settings.swiper_class }}">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
          {%- liquid
            assign start_str = block.settings.start_year | append: '-' | append: block.settings.start_month | append: '-' | append: block.settings.start_day | append: ' ' | append: block.settings.start_hour | append: ':' | append: block.settings.start_min | append: ':00'
            assign end_str   = block.settings.end_year   | append: '-' | append: block.settings.end_month   | append: '-' | append: block.settings.end_day   | append: ' ' | append: block.settings.end_hour   | append: ':' | append: block.settings.end_min   | append: ':00'
          -%}
          <div class="swiper-slide {{ block.settings.prm_class }}"
            data-promo-start="{{ start_str }}"
            data-promo-end="{{ end_str }}"
            data-promo-use="{{ block.settings.use_schedule }}">
            <a href="{{ block.settings.slide_url }}" title="main_slide">
                <div class="promotion_pc" style="background: url('{{ block.settings.prm_pc_img | image_url }}')no-repeat 100%/cover;"></div>
                <div class="promotion_mo" style="background: url('{{ block.settings.prm_mo_img | image_url }}')no-repeat 100%/cover;"></div>
                {%- if block.settings.promotion_more != blank -%}
                <div class="promotion_txt_box">
                  <p class="promotion_t01 degular">{{block.settings.promotion_t01}}</p>
                  <p class="promotion_t02 degular">{{block.settings.promotion_t02}}</p>
                  <span class="promotion_more degular">{{block.settings.promotion_more}}</span>
                </div>
                {%- endif -%}
            </a>
          </div>           
        {%- endfor -%}
      </div>
      <div class="swiper-pagination"></div>
    </div>
</div>
</liquid>

<script>
  setTimeout(function(){

    // ① 한국 현재 시간 문자열 생성
    var now = new Date();
    var krTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
    var krTimeStr = krTime.getFullYear() + "-" +
      String(krTime.getMonth() + 1).padStart(2, "0") + "-" +
      String(krTime.getDate()).padStart(2, "0") + " " +
      String(krTime.getHours()).padStart(2, "0") + ":" +
      String(krTime.getMinutes()).padStart(2, "0") + ":" +
      String(krTime.getSeconds()).padStart(2, "0");

    // ② 각 슬라이드마다 기간 체크
    $('.main_slide .swiper-slide').each(function() {
      var useSchedule = $(this).data('promo-use');

      // 기간 설정 사용 안 함이면 항상 노출
      if (!useSchedule) return;

      var promoStart = $(this).data('promo-start');
      var promoEnd   = $(this).data('promo-end');

      var isActive = krTimeStr >= promoStart && krTimeStr < promoEnd;
      if (!isActive) {
        $(this).remove();
      }
    });

    // ③ Swiper 초기화
    var main_bnr = new Swiper(".main_slide .swiper-container", {
      speed: 1000,
      loop: false,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.main_slide .swiper-pagination',
        clickable: true,
      }
    });

  }, 1000);
</script>

{% schema %}
{
  "name": "promotion_rolling_slide",
  "settings": [
    {
      "type": "text",
      "id": "swiper_class",
      "label": "swiper_class"
    },
    {
      "type": "text",
      "id": "thumb_class",
      "label": "thumb_class"
    },
    {
      "type": "text",
      "id": "slide_title",
      "label": "slide_title"
    },
    {
      "type": "text",
      "id": "slide_txt",
      "label": "slide_txt"
    },
    {
      "type": "url",
      "id": "slide_url_comm",
      "label": "slide_url"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 10,
      "settings": [
        {
          "type": "image_picker",
          "id": "prm_pc_img",
          "label": "prm_pc_img"
        },
        {
          "type": "image_picker",
          "id": "prm_mo_img",
          "label": "prm_mo_img"
        },
        {
          "type": "textarea",
          "id": "promotion_t01",
          "label": "promotion_t01"
        },
        {
          "type": "textarea",
          "id": "promotion_t02",
          "label": "promotion_t02"
        },
        {
          "type": "text",
          "id": "promotion_more",
          "label": "promotion_more"
        },
        {
          "type": "url",
          "id": "slide_url",
          "label": "slide_url"
        },
        {
          "type": "text",
          "id": "prm_class",
          "label": "prm_class"
        },
        {
          "type": "header",
          "content": "🎉 프로모션 기간 설정"
        },
        {
          "type": "checkbox",
          "id": "use_schedule",
          "label": "기간 설정 사용",
          "default": false,
          "info": "체크 시 아래 설정한 기간에만 노출됩니다. 미체크 시 상시 노출"
        },
        {
          "type": "header",
          "content": "📅 노출 시작 일시 (한국 시간)"
        },
        {
          "type": "select",
          "id": "start_year",
          "label": "시작 년도",
          "default": "2026",
          "options": [
            { "value": "2025", "label": "2025" },
            { "value": "2026", "label": "2026" },
            { "value": "2027", "label": "2027" },
            { "value": "2028", "label": "2028" }
          ]
        },
        {
          "type": "select",
          "id": "start_month",
          "label": "시작 월",
          "default": "01",
          "options": [
            { "value": "01", "label": "1월" },
            { "value": "02", "label": "2월" },
            { "value": "03", "label": "3월" },
            { "value": "04", "label": "4월" },
            { "value": "05", "label": "5월" },
            { "value": "06", "label": "6월" },
            { "value": "07", "label": "7월" },
            { "value": "08", "label": "8월" },
            { "value": "09", "label": "9월" },
            { "value": "10", "label": "10월" },
            { "value": "11", "label": "11월" },
            { "value": "12", "label": "12월" }
          ]
        },
        {
          "type": "select",
          "id": "start_day",
          "label": "시작 일",
          "default": "01",
          "options": [
            { "value": "01", "label": "1일" },
            { "value": "02", "label": "2일" },
            { "value": "03", "label": "3일" },
            { "value": "04", "label": "4일" },
            { "value": "05", "label": "5일" },
            { "value": "06", "label": "6일" },
            { "value": "07", "label": "7일" },
            { "value": "08", "label": "8일" },
            { "value": "09", "label": "9일" },
            { "value": "10", "label": "10일" },
            { "value": "11", "label": "11일" },
            { "value": "12", "label": "12일" },
            { "value": "13", "label": "13일" },
            { "value": "14", "label": "14일" },
            { "value": "15", "label": "15일" },
            { "value": "16", "label": "16일" },
            { "value": "17", "label": "17일" },
            { "value": "18", "label": "18일" },
            { "value": "19", "label": "19일" },
            { "value": "20", "label": "20일" },
            { "value": "21", "label": "21일" },
            { "value": "22", "label": "22일" },
            { "value": "23", "label": "23일" },
            { "value": "24", "label": "24일" },
            { "value": "25", "label": "25일" },
            { "value": "26", "label": "26일" },
            { "value": "27", "label": "27일" },
            { "value": "28", "label": "28일" },
            { "value": "29", "label": "29일" },
            { "value": "30", "label": "30일" },
            { "value": "31", "label": "31일" }
          ]
        },
        {
          "type": "select",
          "id": "start_hour",
          "label": "시작 시간",
          "default": "00",
          "options": [
            { "value": "00", "label": "00시" },
            { "value": "01", "label": "01시" },
            { "value": "02", "label": "02시" },
            { "value": "03", "label": "03시" },
            { "value": "04", "label": "04시" },
            { "value": "05", "label": "05시" },
            { "value": "06", "label": "06시" },
            { "value": "07", "label": "07시" },
            { "value": "08", "label": "08시" },
            { "value": "09", "label": "09시" },
            { "value": "10", "label": "10시" },
            { "value": "11", "label": "11시" },
            { "value": "12", "label": "12시" },
            { "value": "13", "label": "13시" },
            { "value": "14", "label": "14시" },
            { "value": "15", "label": "15시" },
            { "value": "16", "label": "16시" },
            { "value": "17", "label": "17시" },
            { "value": "18", "label": "18시" },
            { "value": "19", "label": "19시" },
            { "value": "20", "label": "20시" },
            { "value": "21", "label": "21시" },
            { "value": "22", "label": "22시" },
            { "value": "23", "label": "23시" }
          ]
        },
        {
          "type": "select",
          "id": "start_min",
          "label": "시작 분",
          "default": "00",
          "options": [
            { "value": "00", "label": "00분" },
            { "value": "10", "label": "10분" },
            { "value": "20", "label": "20분" },
            { "value": "30", "label": "30분" },
            { "value": "40", "label": "40분" },
            { "value": "50", "label": "50분" }
          ]
        },
        {
          "type": "header",
          "content": "📅 노출 종료 일시 (한국 시간)"
        },
        {
          "type": "select",
          "id": "end_year",
          "label": "종료 년도",
          "default": "2026",
          "options": [
            { "value": "2025", "label": "2025" },
            { "value": "2026", "label": "2026" },
            { "value": "2027", "label": "2027" },
            { "value": "2028", "label": "2028" }
          ]
        },
        {
          "type": "select",
          "id": "end_month",
          "label": "종료 월",
          "default": "01",
          "options": [
            { "value": "01", "label": "1월" },
            { "value": "02", "label": "2월" },
            { "value": "03", "label": "3월" },
            { "value": "04", "label": "4월" },
            { "value": "05", "label": "5월" },
            { "value": "06", "label": "6월" },
            { "value": "07", "label": "7월" },
            { "value": "08", "label": "8월" },
            { "value": "09", "label": "9월" },
            { "value": "10", "label": "10월" },
            { "value": "11", "label": "11월" },
            { "value": "12", "label": "12월" }
          ]
        },
        {
          "type": "select",
          "id": "end_day",
          "label": "종료 일",
          "default": "01",
          "options": [
            { "value": "01", "label": "1일" },
            { "value": "02", "label": "2일" },
            { "value": "03", "label": "3일" },
            { "value": "04", "label": "4일" },
            { "value": "05", "label": "5일" },
            { "value": "06", "label": "6일" },
            { "value": "07", "label": "7일" },
            { "value": "08", "label": "8일" },
            { "value": "09", "label": "9일" },
            { "value": "10", "label": "10일" },
            { "value": "11", "label": "11일" },
            { "value": "12", "label": "12일" },
            { "value": "13", "label": "13일" },
            { "value": "14", "label": "14일" },
            { "value": "15", "label": "15일" },
            { "value": "16", "label": "16일" },
            { "value": "17", "label": "17일" },
            { "value": "18", "label": "18일" },
            { "value": "19", "label": "19일" },
            { "value": "20", "label": "20일" },
            { "value": "21", "label": "21일" },
            { "value": "22", "label": "22일" },
            { "value": "23", "label": "23일" },
            { "value": "24", "label": "24일" },
            { "value": "25", "label": "25일" },
            { "value": "26", "label": "26일" },
            { "value": "27", "label": "27일" },
            { "value": "28", "label": "28일" },
            { "value": "29", "label": "29일" },
            { "value": "30", "label": "30일" },
            { "value": "31", "label": "31일" }
          ]
        },
        {
          "type": "select",
          "id": "end_hour",
          "label": "종료 시간",
          "default": "23",
          "options": [
            { "value": "00", "label": "00시" },
            { "value": "01", "label": "01시" },
            { "value": "02", "label": "02시" },
            { "value": "03", "label": "03시" },
            { "value": "04", "label": "04시" },
            { "value": "05", "label": "05시" },
            { "value": "06", "label": "06시" },
            { "value": "07", "label": "07시" },
            { "value": "08", "label": "08시" },
            { "value": "09", "label": "09시" },
            { "value": "10", "label": "10시" },
            { "value": "11", "label": "11시" },
            { "value": "12", "label": "12시" },
            { "value": "13", "label": "13시" },
            { "value": "14", "label": "14시" },
            { "value": "15", "label": "15시" },
            { "value": "16", "label": "16시" },
            { "value": "17", "label": "17시" },
            { "value": "18", "label": "18시" },
            { "value": "19", "label": "19시" },
            { "value": "20", "label": "20시" },
            { "value": "21", "label": "21시" },
            { "value": "22", "label": "22시" },
            { "value": "23", "label": "23시" }
          ]
        },
        {
          "type": "select",
          "id": "end_min",
          "label": "종료 분",
          "default": "00",
          "options": [
            { "value": "00", "label": "00분" },
            { "value": "10", "label": "10분" },
            { "value": "20", "label": "20분" },
            { "value": "30", "label": "30분" },
            { "value": "40", "label": "40분" },
            { "value": "50", "label": "50분" },
            { "value": "59", "label": "59분" }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "promotion_rolling_slide",
      "category": "Hura",
      "settings": {}
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

메인비쥬얼 배너와 최상단 띠배너의 경우는 동일한 방식으로 각각 요소에 날짜와 시간을 셋팅해줄 수 있도록 하였다 (현재는 메인비쥬얼 코드)

상세페이지 배너

<liquid>
{% assign start_str = section.settings.start_year | append: '-' | append: section.settings.start_month | append: '-' | append: section.settings.start_day | append: ' ' | append: section.settings.start_hour | append: ':' | append: section.settings.start_min | append: ':00' %}
{% assign end_str   = section.settings.end_year   | append: '-' | append: section.settings.end_month   | append: '-' | append: section.settings.end_day   | append: ' ' | append: section.settings.end_hour   | append: ':' | append: section.settings.end_min   | append: ':00' %}

{% if request.page_type == 'product' and section.settings.banner_image_pc != blank %}
  <div class="promo-banner {{ section.settings.custom_class | default: 'promotion_bnr' }}"
    data-promo-use="{{ section.settings.use_schedule }}"
    data-promo-start="{{ start_str }}"
    data-promo-end="{{ end_str }}"
    style="display:none;">

    {% if section.settings.link_url != blank %}
      <a href="{{ section.settings.link_url }}">
    {% endif %}

    <picture>
      {% if section.settings.banner_image_mo != blank %}
        <source 
          media="(max-width: 990px)"
          srcset="{{ section.settings.banner_image_mo | image_url: width: 768 }}">
      {% endif %}
      <img 
        src="{{ section.settings.banner_image_pc | image_url: width: 1920 }}"
        alt="{{ section.settings.banner_alt | default: '프로모션 배너' }}"
        style="width:100%; display:block;"
      >
    </picture>

    {% if section.settings.link_url != blank %}
      </a>
    {% endif %}

  </div>
{% endif %}
</liquid>

<script>
  (function() {
    var banner = document.querySelector('.promo-banner');
    if (!banner) return;

    var useSchedule = banner.dataset.promoUse === 'true';

    if (!useSchedule) {
      // 기간 설정 미사용 → 바로 노출
      banner.style.display = 'none';
    } else {
      // 한국 현재 시간 문자열 생성
      var now = new Date();
      var krTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
      var krTimeStr = krTime.getFullYear() + "-" +
        String(krTime.getMonth() + 1).padStart(2, "0") + "-" +
        String(krTime.getDate()).padStart(2, "0") + " " +
        String(krTime.getHours()).padStart(2, "0") + ":" +
        String(krTime.getMinutes()).padStart(2, "0") + ":" +
        String(krTime.getSeconds()).padStart(2, "0");

      var promoStart = banner.dataset.promoStart;
      var promoEnd   = banner.dataset.promoEnd;

      if (krTimeStr >= promoStart && krTimeStr < promoEnd) {
        banner.style.display = 'block';
      }
    }

    // 배너 위치 이동
    if (
      document.querySelector('.celladix_yotpo') &&
      document.querySelector('.promotion_bnr') &&
      document.querySelector('.product_detail_wrap')
    ) {
      var bnr = document.querySelector('.promotion_bnr');
      var target = document.querySelector('.product_detail_wrap');
      target.parentNode.insertBefore(bnr, target);
    }
  })();
</script>

{% schema %}
{
  "name": "프로모션 배너",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image_pc",
      "label": "PC 배너 이미지"
    },
    {
      "type": "image_picker",
      "id": "banner_image_mo",
      "label": "모바일 배너 이미지"
    },
    {
      "type": "text",
      "id": "banner_alt",
      "label": "이미지 설명 (alt)"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "클릭 시 이동 링크 (선택)"
    },
    {
      "type": "text",
      "id": "custom_class",
      "label": "추가 클래스명 (미입력 시 promotion_bnr 적용)"
    },
    {
      "type": "header",
      "content": "🎉 프로모션 기간 설정"
    },
    {
      "type": "checkbox",
      "id": "use_schedule",
      "label": "기간 설정 사용",
      "default": false,
      "info": "체크 시 아래 설정한 기간에만 노출됩니다. 미체크 시 노출안됨"
    },
    {
      "type": "header",
      "content": "📅 노출 시작 일시 (한국 시간)"
    },
    {
      "type": "select",
      "id": "start_year",
      "label": "시작 년도",
      "default": "2026",
      "options": [
        { "value": "2025", "label": "2025" },
        { "value": "2026", "label": "2026" },
        { "value": "2027", "label": "2027" },
        { "value": "2028", "label": "2028" }
      ]
    },
    {
      "type": "select",
      "id": "start_month",
      "label": "시작 월",
      "default": "01",
      "options": [
        { "value": "01", "label": "1월" },
        { "value": "02", "label": "2월" },
        { "value": "03", "label": "3월" },
        { "value": "04", "label": "4월" },
        { "value": "05", "label": "5월" },
        { "value": "06", "label": "6월" },
        { "value": "07", "label": "7월" },
        { "value": "08", "label": "8월" },
        { "value": "09", "label": "9월" },
        { "value": "10", "label": "10월" },
        { "value": "11", "label": "11월" },
        { "value": "12", "label": "12월" }
      ]
    },
    {
      "type": "select",
      "id": "start_day",
      "label": "시작 일",
      "default": "01",
      "options": [
        { "value": "01", "label": "1일" }, { "value": "02", "label": "2일" },
        { "value": "03", "label": "3일" }, { "value": "04", "label": "4일" },
        { "value": "05", "label": "5일" }, { "value": "06", "label": "6일" },
        { "value": "07", "label": "7일" }, { "value": "08", "label": "8일" },
        { "value": "09", "label": "9일" }, { "value": "10", "label": "10일" },
        { "value": "11", "label": "11일" }, { "value": "12", "label": "12일" },
        { "value": "13", "label": "13일" }, { "value": "14", "label": "14일" },
        { "value": "15", "label": "15일" }, { "value": "16", "label": "16일" },
        { "value": "17", "label": "17일" }, { "value": "18", "label": "18일" },
        { "value": "19", "label": "19일" }, { "value": "20", "label": "20일" },
        { "value": "21", "label": "21일" }, { "value": "22", "label": "22일" },
        { "value": "23", "label": "23일" }, { "value": "24", "label": "24일" },
        { "value": "25", "label": "25일" }, { "value": "26", "label": "26일" },
        { "value": "27", "label": "27일" }, { "value": "28", "label": "28일" },
        { "value": "29", "label": "29일" }, { "value": "30", "label": "30일" },
        { "value": "31", "label": "31일" }
      ]
    },
    {
      "type": "select",
      "id": "start_hour",
      "label": "시작 시간",
      "default": "00",
      "options": [
        { "value": "00", "label": "00시" }, { "value": "01", "label": "01시" },
        { "value": "02", "label": "02시" }, { "value": "03", "label": "03시" },
        { "value": "04", "label": "04시" }, { "value": "05", "label": "05시" },
        { "value": "06", "label": "06시" }, { "value": "07", "label": "07시" },
        { "value": "08", "label": "08시" }, { "value": "09", "label": "09시" },
        { "value": "10", "label": "10시" }, { "value": "11", "label": "11시" },
        { "value": "12", "label": "12시" }, { "value": "13", "label": "13시" },
        { "value": "14", "label": "14시" }, { "value": "15", "label": "15시" },
        { "value": "16", "label": "16시" }, { "value": "17", "label": "17시" },
        { "value": "18", "label": "18시" }, { "value": "19", "label": "19시" },
        { "value": "20", "label": "20시" }, { "value": "21", "label": "21시" },
        { "value": "22", "label": "22시" }, { "value": "23", "label": "23시" }
      ]
    },
    {
      "type": "select",
      "id": "start_min",
      "label": "시작 분",
      "default": "00",
      "options": [
        { "value": "00", "label": "00분" }, { "value": "10", "label": "10분" },
        { "value": "20", "label": "20분" }, { "value": "30", "label": "30분" },
        { "value": "40", "label": "40분" }, { "value": "50", "label": "50분" }
      ]
    },
    {
      "type": "header",
      "content": "📅 노출 종료 일시 (한국 시간)"
    },
    {
      "type": "select",
      "id": "end_year",
      "label": "종료 년도",
      "default": "2026",
      "options": [
        { "value": "2025", "label": "2025" },
        { "value": "2026", "label": "2026" },
        { "value": "2027", "label": "2027" },
        { "value": "2028", "label": "2028" }
      ]
    },
    {
      "type": "select",
      "id": "end_month",
      "label": "종료 월",
      "default": "01",
      "options": [
        { "value": "01", "label": "1월" },
        { "value": "02", "label": "2월" },
        { "value": "03", "label": "3월" },
        { "value": "04", "label": "4월" },
        { "value": "05", "label": "5월" },
        { "value": "06", "label": "6월" },
        { "value": "07", "label": "7월" },
        { "value": "08", "label": "8월" },
        { "value": "09", "label": "9월" },
        { "value": "10", "label": "10월" },
        { "value": "11", "label": "11월" },
        { "value": "12", "label": "12월" }
      ]
    },
    {
      "type": "select",
      "id": "end_day",
      "label": "종료 일",
      "default": "01",
      "options": [
        { "value": "01", "label": "1일" }, { "value": "02", "label": "2일" },
        { "value": "03", "label": "3일" }, { "value": "04", "label": "4일" },
        { "value": "05", "label": "5일" }, { "value": "06", "label": "6일" },
        { "value": "07", "label": "7일" }, { "value": "08", "label": "8일" },
        { "value": "09", "label": "9일" }, { "value": "10", "label": "10일" },
        { "value": "11", "label": "11일" }, { "value": "12", "label": "12일" },
        { "value": "13", "label": "13일" }, { "value": "14", "label": "14일" },
        { "value": "15", "label": "15일" }, { "value": "16", "label": "16일" },
        { "value": "17", "label": "17일" }, { "value": "18", "label": "18일" },
        { "value": "19", "label": "19일" }, { "value": "20", "label": "20일" },
        { "value": "21", "label": "21일" }, { "value": "22", "label": "22일" },
        { "value": "23", "label": "23일" }, { "value": "24", "label": "24일" },
        { "value": "25", "label": "25일" }, { "value": "26", "label": "26일" },
        { "value": "27", "label": "27일" }, { "value": "28", "label": "28일" },
        { "value": "29", "label": "29일" }, { "value": "30", "label": "30일" },
        { "value": "31", "label": "31일" }
      ]
    },
    {
      "type": "select",
      "id": "end_hour",
      "label": "종료 시간",
      "default": "23",
      "options": [
        { "value": "00", "label": "00시" }, { "value": "01", "label": "01시" },
        { "value": "02", "label": "02시" }, { "value": "03", "label": "03시" },
        { "value": "04", "label": "04시" }, { "value": "05", "label": "05시" },
        { "value": "06", "label": "06시" }, { "value": "07", "label": "07시" },
        { "value": "08", "label": "08시" }, { "value": "09", "label": "09시" },
        { "value": "10", "label": "10시" }, { "value": "11", "label": "11시" },
        { "value": "12", "label": "12시" }, { "value": "13", "label": "13시" },
        { "value": "14", "label": "14시" }, { "value": "15", "label": "15시" },
        { "value": "16", "label": "16시" }, { "value": "17", "label": "17시" },
        { "value": "18", "label": "18시" }, { "value": "19", "label": "19시" },
        { "value": "20", "label": "20시" }, { "value": "21", "label": "21시" },
        { "value": "22", "label": "22시" }, { "value": "23", "label": "23시" }
      ]
    },
    {
      "type": "select",
      "id": "end_min",
      "label": "종료 분",
      "default": "00",
      "options": [
        { "value": "00", "label": "00분" }, { "value": "10", "label": "10분" },
        { "value": "20", "label": "20분" }, { "value": "30", "label": "30분" },
        { "value": "40", "label": "40분" }, { "value": "50", "label": "50분" },
        { "value": "59", "label": "59분" }
      ]
    }
  ],
  "presets": [
    {
      "name": "프로모션 배너"
    }
  ]
}
{% endschema %}

메인비쥬얼과 띠배너와 동일하지만 스크립트로
상세페이지 내부의 특정위치로 프로모션 배너가 이동하도록 추가하는 코드 생성