一部のテーマでは、テーマエディタからTimePortのブロックを追加しようとすると、次のようなエラーが表示されて追加できないことがあります。
"delivery_estimate" not added. Liquid templates don't support sections and blocks.
こちらでは、その原因と、テーマのコードにスニペット（コード片）を直接貼り付けて設置する方法をご案内します。
エラーの原因
このエラーは、テーマ（またはそのページのテンプレート）がShopifyの新しいテンプレート形式「Online Store 2.0」に対応していない場合に表示されます。アプリのブロックはOnline Store 2.0形式（JSONテンプレート）のページにのみ追加できるという、Shopify側の仕様によるものです。
お使いのテーマが対応しているかどうかは、Shopify管理画面 → オンラインストア → テーマ → 「コードを編集」を開き、左側の「templates」フォルダをご確認ください。
product.json・cart.jsonがある → 対応済みです（このエラーは別の原因の可能性があるため、サポートへお問い合わせください）。product.liquid・cart.liquidしかない → 旧形式のため、ブロックは追加できません。以下の手動設置をご利用ください。
作業前のご注意
- 作業前に、必ずテーマの複製（バックアップ）を作成してください（テーマ一覧の「⋯」→「複製」）。
- テーマのコード編集に不慣れな場合は、テーマの制作会社や開発者の方への依頼をおすすめします。有償となりますが、弊社でも対応できますので、お気軽にご相談ください。
- 手動設置とテーマエディタのブロックを同じページに併用すると二重に表示されます。どちらか一方のみをご利用ください。
商品ページ：最短お届け日時の設置
「コードを編集」で商品ページのテンプレート（templates/product.liquid、またはそこから読み込まれているセクション/スニペットファイル）を開き、表示したい位置（「カートに追加」ボタンの下など）に以下を貼り付けます。
{%- comment -%} ▼ TimePort 最短お届け日時 ここから ▼ {%- endcomment -%}
{%- assign product_tags = product.tags | join: "," -%}
<link rel="stylesheet" href="/apps/delivery-picker/embed/delivery-date-picker.css">
<div
class="psyve-delivery-estimate"
data-shop="{{ shop.permanent_domain | escape }}"
data-tags="{{ product_tags | escape }}"
data-api-base="/apps/delivery-picker"
data-date-color="#008060"
data-date-font-size="16"
data-text-color="#202223"
data-text-font-size="14"
data-note-color="#6d7175"
data-note-font-size="12"
data-show-border="false"
data-border-color="#dfe3e8"
data-border-width="1"
data-border-radius="8"
data-show-background="false"
data-background-color="#ffffff"
data-padding-vertical="14"
></div>
<script src="/apps/delivery-picker/embed/delivery-date-picker.js" defer></script>
{%- comment -%} ▲ TimePort 最短お届け日時 ここまで ▲ {%- endcomment -%}
表示する文言（「最短%date%にお届け」のテンプレートや注釈など）は、コードではなくTimePortの「商品詳細ページの設定」画面で設定します。
なお、最短お届け日時は同じページに複数設置しても問題ありません。
見た目の設定（data-属性）
以下の属性の値を書き換えることで、テーマエディタの設定パネルと同じ調整ができます。
| 属性 | 説明 | 初期値 |
|---|---|---|
| data-date-color | 日付のカラー | #008060 |
| data-date-font-size | 日付のフォントサイズ(px) | 16 |
| data-text-color | テキストのカラー | #202223 |
| data-text-font-size | テキストのフォントサイズ(px) | 14 |
| data-note-color | 注釈のフォントカラー | #6d7175 |
| data-note-font-size | 注釈のフォントサイズ(px) | 12 |
| data-show-border | 枠線を表示する（true/false） | false |
| data-border-color | 枠線のカラー | #dfe3e8 |
| data-border-width | 枠線の太さ(px) | 1 |
| data-border-radius | 角丸(px) | 8 |
| data-show-background | 背景色を表示する（true/false） | false |
| data-background-color | 背景色 | #ffffff |
| data-padding-vertical | 上下の余白(px) | 14 |
カートページ：配送日時選択の設置
「コードを編集」でカートページのテンプレート（templates/cart.liquid、またはそこから読み込まれているセクション/スニペットファイル）を開き、表示したい位置（チェックアウトボタンの上など）に以下を貼り付けます。
ご注意：この手動設置コードはカートページ専用で、1ページに1箇所のみ設置できます（2箇所以上設置した場合、2つ目以降は自動的に無効になります）。カートドロワーではコードを貼り付けず、テーマエディタの「アプリ埋め込み」で「配送日時選択（カートドロワー）」を有効にしてください。
{%- comment -%} ▼ TimePort 配送日時選択 ここから ▼ {%- endcomment -%}
{%- assign cart_tags = "" -%}
{%- for item in cart.items -%}
{%- for tag in item.product.tags -%}
{%- unless cart_tags contains tag -%}
{%- if cart_tags == "" -%}
{%- assign cart_tags = tag -%}
{%- else -%}
{%- assign cart_tags = cart_tags | append: "," | append: tag -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endfor -%}
{%- assign seen_product_ids = "" -%}
{%- assign cart_product_list = "" -%}
{%- for item in cart.items -%}
{%- assign pid = item.product.id | append: "" -%}
{%- unless seen_product_ids contains pid -%}
{%- if seen_product_ids == "" -%}
{%- assign seen_product_ids = pid -%}
{%- else -%}
{%- assign seen_product_ids = seen_product_ids | append: "," | append: pid -%}
{%- endif -%}
{%- assign p_title_json = item.product.title | json -%}
{%- assign p_tags_json = item.product.tags | json -%}
{%- assign product_entry = '{"title":' | append: p_title_json | append: ',"tags":' | append: p_tags_json | append: '}' -%}
{%- if cart_product_list == "" -%}
{%- assign cart_product_list = product_entry -%}
{%- else -%}
{%- assign cart_product_list = cart_product_list | append: "," | append: product_entry -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- assign cart_products_json = "[" | append: cart_product_list | append: "]" -%}
<link rel="stylesheet" href="/apps/delivery-picker/embed/delivery-date-picker.css">
<div
id="psyve-delivery-picker"
data-shop="{{ shop.permanent_domain | escape }}"
data-tags="{{ cart_tags | escape }}"
data-api-base="/apps/delivery-picker"
data-cart-count="{{ cart.item_count }}"
data-cart-attrs="{{ cart.attributes | json | escape }}"
data-cart-products="{{ cart_products_json | escape }}"
data-accent-color="#008060"
data-font-size="14"
data-heading-color="#202223"
data-heading-font-size="16"
data-label-font-size="14"
data-shortest-date-color="#008060"
data-shortest-date-font-size="12"
data-note-color="#6d7175"
data-note-font-size="12"
data-show-background="false"
data-background-color="#ffffff"
data-border-color="#c9cccf"
data-border-radius="4"
></div>
<script src="/apps/delivery-picker/embed/delivery-date-picker.js" defer></script>
{%- comment -%} ▲ TimePort 配送日時選択 ここまで ▲ {%- endcomment -%}
見出しなどの文言は、コードではなくTimePortの「配送日時設定 → 基本設定」内の「表示のカスタマイズ」で設定します。
見た目の設定（data-属性）
| 属性 | 説明 | 初期値 |
|---|---|---|
| data-accent-color | アクセントカラー（選択中のボタン背景・フォーカス枠） | #008060 |
| data-font-size | 基本のフォントサイズ(px) | 14 |
| data-heading-color | 見出しのカラー | #202223 |
| data-heading-font-size | タイトルのフォントサイズ(px) | 16 |
| data-label-font-size | 項目ラベルのフォントサイズ(px) | 14 |
| data-shortest-date-color | 最短ご指定可能日のフォントカラー | #008060 |
| data-shortest-date-font-size | 最短ご指定可能日のフォントサイズ(px) | 12 |
| data-note-color | 注釈のフォントカラー | #6d7175 |
| data-note-font-size | 注釈のフォントサイズ(px) | 12 |
| data-show-background | モジュールの背景色を表示する（true/false） | false |
| data-background-color | モジュールの背景色 | #ffffff |
| data-border-color | フォームの枠線カラー | #c9cccf |
| data-border-radius | フォームの枠線の角丸(px) | 4 |
アプリ更新時の扱い
<script>・<link>が読み込むJS・CSS本体は、TimePortのサーバーから常に最新のものを取得する仕組みになっています。機能面の改善やバグ修正であれば、貼り付けたコードを修正する必要はありません。
一方、data-属性（色・フォントサイズなどのパラメータ）はスニペットにそのまま書き込まれた固定値のため、自動では更新されません。今後のアップデートで新しいdata-属性が追加されたり、既存の属性名が変更されたりした場合は、その新機能・変更を反映するためにスニペットの貼り直し（該当箇所の書き換え）が必要になります（そのようなアップデートがあった場合は、このヘルプ記事の内容も更新します）。
また、テーマを乗り換えた場合や、テンプレートファイルを作り直した場合も、スニペットの貼り直しが必要です。
うまく表示されない場合
- ストアのURLに
/apps/delivery-picker/embed/delivery-date-picker.jsを付けてブラウザで開き、プログラムのコードが表示されるかご確認ください（例：https://あなたのストア.myshopify.com/apps/delivery-picker/embed/delivery-date-picker.js）。エラーになる場合は、TimePortが正しくインストールされていない可能性があります。 - 商品ページの場合は「商品詳細ページに最短お届け日時を表示する」がオンになっているか、該当商品のタグに一致する配送日時設定があるかをご確認ください（「配送日時設定の基本」）。
- 解決しない場合は、お使いのテーマ名とあわせてサポートまでお問い合わせください。
関連記事
- テーマエディタからブロックまたはアプリ埋め込みを追加できる場合の通常の設置手順は「カート・カートドロワー・商品ページへの設置」をご覧ください。
お問い合わせ
Psyve株式会社 shopifyアプリサポート
お問い合わせ：info@psyve.co.jp