Why doesn't my preview update when I change blocks from the customization screen?

Store Design

Topic summary

ユーザーが自作セクションを作成中に、カスタマイズ画面でブロックに変更を加えると、テーマエディタの該当セクション部分が白アウトする問題に直面しています。

現在の状況：

  • 保存すると変更は正しく反映される
  • リアルタイムプレビューが機能していない

目標：
カスタマイズ画面での変更を保存前にリアルタイムでプレビュー確認したい

提供された情報：

  • MVセクションのコードスニペットが含まれている
  • ビデオとイメージを使用したスライダー機能を実装
  • PC/SP用の異なる設定とレスポンシブ対応

コードの一部が破損または不完全な状態で投稿されており、スキーマ設定やスタイル、スクリプト部分が正しく表示されていません。この問題はShopifyのテーマエディタとセクションの動的レンダリングに関連している可能性があります。

ステータス： 解決策を求めて質問中、回答待ち

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

初めまして。

現在セクションを自作しています。

セクションは作成できましたが、カスタマイズ画面からブロックに変更を加えると

テーマエディタの該当するセクションの部分が白アウトしてしまいます。

※保存することを一見すると正しく表示された変更も反映されています。

目標として、カスタマイズ画面での変更を、保存していない状態でリアルタイムにプレビューで確認したいです。

お力を貸してください。よろしくお願い致します。

<section class="mv">
  <div class="mv__item__wrapper">
    {% assign i = 1 %}
    {% for block in section.blocks %}
      <div {{ block.shopify_attributes }} class="mv__item mv__item--{{ block.settings.color }} mv__item--sp-{{ block.settings.color_sp }}" data-color="{{ block.settings.color }}" data-color-sp="{{ block.settings.color_sp }}">
        <div class="mv__item__image">
          {% if block.settings.video != blank %}
            <video class="video_pc" loop muted playsinline autoplay style="width: 100%; height: calc( 100vh - 78px ); object-fit: cover;" poster="{{ block.settings.image | img_url: '1430x686' }}">
              <source src="{{block.settings.video }}" type="video/mp4" />
            </video>
          <video class="video_sp" loop muted playsinline autoplay style="width: 100%; height: calc( 100vh - 78px ); object-fit: cover;" poster="{{ block.settings.image | img_url: '750x1134' }}">
              <source src="{{block.settings.video_sp }}" type="video/mp4" />
            </video>
          {% else %}
          <img
            src="{{ 'transparent.png' | asset_img_url }}"
            data-pc-src="{{ block.settings.image | img_url: '1430x686' }}"
            data-sp-src="{{ block.settings.image_sp | img_url: '750x1134' }}"
            alt="{{ block.settings.image.alt }}"
          >
          {% endif %}

        </div>
        <div class="mv__item__text mv__item__text{{ forloop.index }}">
          <style>
            @media screen and (min-width:768px) {
              .mv__item__text{{ forloop.index }} {
                position: absolute;
                top: {{ block.settings.pctopheight }}%;
                left: {{ block.settings.pctopleft }}%;
                text-align: {{ block.settings.pctextalign }};
              }

              .mv__item__text h2 {
                text-align: {{ block.settings.pctextalign }};
              }
            }

            @media screen and (max-width:767px) {
              .mv__item__text{{ forloop.index }} {
                position: absolute;
                top: {{ block.settings.mobiletopheight }}%;
                left: {{ block.settings.mobiletopleft }}%;
                text-align: {{ block.settings.mobiletextalign }};
              }

              .mv__item__text h2 {
                text-align: {{ block.settings.mobiletextalign }};
              }
            }
          </style>
          <p class="mv__item__no"><span class="mv__item__no__current">{{ i | prepend: '00' | slice: -2, 2 }}</span> / {{ section.blocks.size | prepend: '00' | slice: -2, 2 }}</p>
          <div class="mv__item__title">
			{% assign headingall = block.settings.heading_all | strip_html %}
            {% assign heading = block.settings.heading | strip_html %}
            <h2 data-text="{% if block.settings.heading_all != blank %} {{ headingall }} {% else %}} {{heading}} {% endif %}">{{ block.settings.heading | newline_to_br }}</h2>
            {% if block.settings.titlethumb != blank %}
            <div class="mv__item__titlethumb"><img src="{{ block.settings.titlethumb | img_url: '1000x' }}" /></div>
            {% endif %}
          </div>
          <p class="mv__item__lead">{{ block.settings.lead | newline_to_br }}</p>
          <div class="mv__item__btn">
            <a href="{{ block.settings.url }}" class="btn btn--more"><span>{% include 'icon-arrow' %}</span><span>MORE</span></a>
          </div>
        </div>
      </div>
      {% assign i = i | plus: 1 %}
    {% endfor %}
  </div>

  <div class="mv__nav d-flex justify-content-between">
    <div class="mv__nav__control">
      <div class="mv__nav__control__bar">
        <div class="mv__nav__control__line">
        </div>
      </div>
      
      <div class="mv__nav__control__btn d-flex justify-content-between">
        <a href="javascript&colon;;" class="btn btn--prev" id="slide_prev">{% include 'icon-arrow' %}</a>
        <span class="mv__nav__dots">
          {% for block in section.blocks %}
            <a href="javascript&colon;;"></a>
          {% endfor %}
        </span>
        <a href="javascript&colon;;" class="btn btn--next" id="slide_next">{% include 'icon-arrow' %}</a>
      </div>
    </div>
  </div>

  <script>window.sliderconfig = {speed: {{section.settings.slidespeed}}, animationspeed: {{section.settings.animationspeed}}};</script>
</section>

<style>
  @media screen and (max-width:767px) { 
    /*　画面サイズが７６7px以下からはここを読み込む　*/
.video_pc { 
display:none;
}
  }
    
@media screen and (min-width:768px) { 
   /*　画面サイズが７６８pxからはここを読み込む　*/
  .video_sp { 
    display:none;
  }
}
</style>

{% schema %}
 {
    "name": "TOP MV",
    "max_blocks": 12,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Slider"
      },
      {
        "type": "range",
        "min":1,
        "max":20,
        "step":1,
        "id": "slidespeed",
        "label": "スライド速度(秒)",
        "default": 6
      },
      {
        "type": "range",
        "min":0.1,
        "max":2,
        "step":0.1,
        "id": "animationspeed",
        "label": "スライド切替アニメーション速度(秒)",
        "default": 0.7
      }
    ],
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "range",
            "min":1,
            "max":100,
            "step":1,
            "id": "pctopheight",
            "label": "【PC画面】テキストの高さ(％)",
            "default": 14
          },
          {
            "type": "range",
            "min":1,
            "max":100,
            "step":1,
            "id": "pctopleft",
            "label": "【PC画面】テキストの左右(％)",
            "default": 5
          },
          {
            "type": "range",
            "min":1,
            "max":100,
            "step":1,
            "id": "mobiletopheight",
            "label": "【SP画面】テキストの高さ(％)",
            "default": 14
          },
          {
            "type": "range",
            "min":1,
            "max":100,
            "step":1,
            "id": "mobiletopleft",
            "label": "【SP画面】テキストの左右(％)",
            "default": 5
          },
          {
             "type": "select",
             "id": "pctextalign",
             "options": [
                { "value": "-webkit-right", "label": "右揃え"},
                { "value": "-webkit-center", "label": "中央揃え"},
                { "value": "-webkit-left", "label": "左揃え"}
             ],
             "label": "テキスト揃え(PC)"
          },
          {
             "type": "select",
             "id": "mobiletextalign",
             "options": [
                { "value": "-webkit-right", "label": "右揃え"},
                { "value": "-webkit-center", "label": "中央揃え"},
                { "value": "-webkit-left", "label": "左揃え"}
             ],
             "label": "テキスト揃え(SP)"
          },
          {
            "type": "textarea",
            "id": "heading",
            "label": "見出し"
          },
          {
            "type": "image_picker",
            "id": "titlethumb",
            "label": "見出し下部の画像"
          },
          {
            "type": "textarea",
            "id": "heading_all",
            "label": "見出し(画像含めたテキスト)",
            "info": "画像に Mens'Ex などを使う場合 Debut Collection Exclusive by Mens'Ex までを入れる"
          },
          {
            "type": "textarea",
            "id": "lead",
            "label": "リード文",
            "default": "リード文"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "画像(PC 1430 x 686)"
          },
          {
            "type": "image_picker",
            "id": "image_sp",
            "label": "画像(SP 750 x 1134)"
          },
          {
            "type": "text",
            "id" : "video",
            "label": "動画(PC 1430 x 686)"
          },
{
            "type": "text",
            "id" : "video_sp",
            "label": "動画(SP 750 x 1134)"
          },
          {
             "type": "url",
             "id": "url",
             "label": "URL"
          },
          {
             "type": "select",
             "id": "color",
             "options": [
                { "value": "black", "label": "黒"},
                { "value": "white", "label": "白"}
             ],
             "label": "文字色(PC)"
          },
          {
             "type": "select",
             "id": "color_sp",
             "options": [
                { "value": "black", "label": "黒"},
                { "value": "white", "label": "白"}
             ],
             "label": "文字色(SP)"
          }
        ]
      }
    ]
  }
{% endschema %}