shopify.designmodeに関するメモ

認識が甘かったのでメモとして。

前提

• Shopifyのテーマファイル内にJSを記載し、エディタでは動作させないようにする

手法

• JavaScriptで対応: if (Shopify.designMode) {}
• liquidで対応: {% if request.design_mode %}{% endif %}

上記2種類が考えられ、いずれも以下ページで確認できます。

• Integrate sections with the theme editor

JavaScriptのShopify.designMode使用時の留意点

JSのShopify.designModeを使用する場合には以下のような留意点があります。

• テーマエディタ以外での戻り値はfalseではなくundefined
• {{ content_for_header }}より下に記述する必要がある

1つ目はドキュメントを読めば書かれていますが、2つめの方はおそらく記載がないように思います。

{{ content_for_header }}の上に記載したところ意図した動作にならず、値を出力して確認したところshopifyオブジェクト自体が取得できていないようでした。
この点から{{ content_for_header }}より下に記述する必要があると思います。

結び

head内にJSを書くことはあると思いますが、shopifyオブジェクトを利用する場合は記載位置に多少の注意が必要かもしれません。