旧形式テーマのカートページへ手動設置する

旧形式（Vintage）のテーマでは、カートページへ「年齢確認チェックボックス」アプリブロックを追加すると、次のエラーが表示されることがあります。

"age_check_cart" not added. Liquid templates don't support sections and blocks.

このページでは、カートページ用アプリブロックを追加できない場合だけ、Liquidコードで手動設置する方法をご案内します。

最初にご確認ください

Shopifyのアプリ埋め込みは、Online Store 2.0テーマと旧形式テーマの両方に対応しています。そのため、カートドロワーとポップアップではテーマコードを編集しないでください。

カートドロワーで自動検出できない場合も、Liquidコードは使いません。プレビュー左下の候補を確認し、「購入ボタンのCSSセレクター」設定欄へ貼り付けます。

手動設置が必要か確認する

Shopify管理画面 → オンラインストア → テーマ →「コードを編集」を開き、templatesフォルダを確認します。

• cart.json がある：通常はテーマエディタからアプリブロックを追加できます。追加できない場合は、カートセクションがアプリブロックに対応していない可能性があります。
• cart.liquid しかない：旧形式のため、カートページへは以下の手動設置をご利用ください。

作業前のご注意

• 作業前にテーマを複製してください（テーマ一覧の「⋯」→「複製」）。
• 公開中テーマを直接編集せず、複製テーマで表示を確認してから公開してください。
• コード編集に不慣れな場合は、テーマ制作会社や開発者への依頼をおすすめします。
• 手動設置とアプリブロックは、管理しやすいようどちらか一方だけを使用してください。

カートページへの手動設置

「コードを編集」でtemplates/cart.liquid、またはそこから読み込まれているカート用セクション／スニペットを開きます。「ご購入手続きへ」ボタンの直前へ、以下を貼り付けてください。

{%- comment -%} ▼ AgeCheck 年齢確認チェックボックス ここから ▼ {%- endcomment -%}
{%- assign seen_product_ids = "," -%}
{%- assign cart_product_list = "" -%}
{%- for item in cart.items -%}
  {%- assign pid = item.product.id | append: "" -%}
  {%- assign pid_key = "," | append: pid | append: "," -%}
  {%- unless seen_product_ids contains pid_key -%}
    {%- assign seen_product_ids = seen_product_ids | append: pid | append: "," -%}
    {%- assign p_tags_json = item.product.tags | json -%}
    {%- assign p_collections_json = item.product.collections | map: 'id' | json -%}
    {%- assign product_entry = '{"id":"' | append: pid | append: '","tags":' | append: p_tags_json | append: ',"collections":' | append: p_collections_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/age-check/embed/age-check.css">

<div
  class="psyve-age-check-cart"
  data-shop="{{ shop.permanent_domain | escape }}"
  data-api-base="/apps/age-check"
  data-cart-products="{{ cart_products_json | escape }}"
  data-accent-color="#008060"
  data-text-color="#202223"
  data-font-size="14"
  data-notice-font-size="13"
  data-error-color="#d72c0d"
  data-text-alignment="left"
></div>

<script src="/apps/age-check/embed/age-check-cart.js" defer></script>
{%- comment -%} ▲ AgeCheck 年齢確認チェックボックス ここまで ▲ {%- endcomment -%}

表示文言と対象商品は、AgeCheckの「年齢確認設定 → カート」「対象商品」画面で設定します。

見た目の設定

カートドロワーとポップアップ

カートドロワーとポップアップは、旧形式テーマでもアプリ埋め込みを使用します。

1. テーマエディタの「アプリ埋め込み」を開きます。
2. カートドロワーは「年齢確認（カートドロワー）」をオンにします。
3. ポップアップは「年齢確認ポップアップ」をオンにします。
4. プレビューで動作を確認して保存します。

以前の案内に従ってlayout/theme.liquidへポップアップ用コードを貼り付けている場合は、アプリ埋め込みとの二重読み込みを避けるため、どちらか一方だけを使用してください。アプリ埋め込みで動作確認した後、旧コードの削除が必要か分からない場合はサポートへお問い合わせください。

アプリ更新時の扱い

手動設置コードの<script>と<link>は、AgeCheckのサーバーから最新のJS・CSSを読み込みます。通常の機能改善や不具合修正では、貼り付けたコードの更新は必要ありません。

ただし、次の場合は確認が必要です。

• テーマを変更した、またはカートテンプレートを作り直した
• ヘルプで手動設置コードの更新が案内された
• 新しい見た目設定用のdata-属性を使用したい

うまく表示されない場合

1. 「年齢確認設定 → カート」がオンになっていることを確認します。
2. 対象商品がカートに入っていることを確認します。
3. コードが購入ボタンを含むカートテンプレートへ貼り付けられていることを確認します。
4. https://あなたのストア.myshopify.com/apps/age-check/embed/age-check-cart.jsを開き、コードが表示されることを確認します。
5. 解決しない場合は、ストアURL・テーマ名・編集したファイル名を添えてサポートへお問い合わせください。

関連記事

• カートのチェックボックス
• ポップアップの設定
• トラブルシューティング・よくある質問

お問い合わせ

Psyve株式会社 Shopifyアプリサポート
お問い合わせ：info@psyve.co.jp