Shopify へのタグ設置方法

Shopify でストアを運営している場合、AnyGift タグを商品ページに埋め込むことで、顧客が商品を見ながら直接「ギフトとして贈る」を選択できるようになります。

概要

AnyGift タグを Shopify に設置する基本構成では、テーマファイルへスクリプトタグとマーカータグを追加します。テーマ構造や既存アプリとの組み合わせによって調整が必要なため、公開前に対象商品の識別、ボタン表示、購入フローをテストしてください。

項目	説明
設置難易度	簡単（HTML コードのコピー&ペースト）
必要な権限	テーマ編集権限
所要時間	約5分
開発スキル	不要

メリット

ユーザー体験の向上

商品詳細ページから途切れなく ギフト選択に進める導線を提供します：

顧客が商品を確認した状態で「ギフトとして贈る」を選択
別ページへの遷移なし（シームレス）
商品説明を読みながらギフト形態を選択可能

導入の手軽さ

Shopify テーマへの簡単なコード挿入で実装可能：

複雑な設定不要
API 連携不要
テーマ更新時も設定は保持される

柔軟なカスタマイズ

ボタン配置をストア側でコントロール：

購入ボタンの近く、商品説明の下など自由に配置
商品コード付きマーカーで複数箇所への配置も可能
CSS でスタイルをカスタマイズ可能

設置手順

ステップ 1: ストア ID を確認

AnyGift管理画面から以下の情報を取得します：

AnyGift管理画面にログイン
設定 → 店舗情報 を開く
ストア ID をコピー（例：abc123def456）

ステップ 2: Shopify テーマコードを編集

テーマ編集画面を開く

Shopify管理画面にログイン
オンラインストア → テーマ を開く
有効テーマの 「・・・」メニュー → コードを編集 をクリック

商品ページテンプレートを開く

左側のファイル一覧から以下のいずれかを探してクリック：

product.liquid（最も一般的）
sections/main-product.liquid（Dawn テーマ）
templates/product.liquid

スクリプトタグを挿入

ファイルの最下部にある </body> タグの直前に、以下をコピー&ペースト：

<!-- AnyGift スクリプト start -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: '{{ product.id }}',
    storeId: 'YOUR_STORE_ID',
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
<!-- AnyGift スクリプト end -->

重要: YOUR_STORE_ID をステップ 1 で取得したストア ID に置き換えてください。

置換例:

<script type="text/javascript">
  window.AnyGift = {
    productCode: '{{ product.id }}',
    storeId: 'abc123def456',
  };
</script>

マーカータグを挿入

「ギフトとして贈る」ボタンを表示したい位置に以下をコピー&ペースト：

<div data-anygift="marker"></div>

推奨配置:

購入ボタンの直上（最も推奨）:

<div data-anygift="marker"></div>
{% if product.available %}
  <form method="post" action="/cart/add">
    <button type="submit">カートに追加</button>
  </form>
{% endif %}

商品説明の下:

<div class="product-description">
  {{ product.description }}
</div>
<div data-anygift="marker"></div>

変更を保存

テンプレート編集画面の 「保存」 をクリック。数秒で反映されます。

ステップ 3: 動作確認

ストアのフロントエンドを開く（顧客向けサイト）
任意の商品ページにアクセス
挿入位置に 「ギフトとして贈る」ボタンが表示 されることを確認
ボタンをクリックしてギフト受取画面が表示されることを確認

ボタンが表示されない場合: - ブラウザキャッシュをクリア（Ctrl+Shift+Delete） - 数分待ってから再確認

よくある質問

Q: 複数の場所にボタンを表示できますか？

A: はい、商品コード付きマーカーで可能です。 data-anygift="marker" を使う従来方式は先頭の1個だけを表示対象にします。複数箇所に表示する場合は、各位置で次の形式を使ってください。

<!-- 上部 -->
<div data-anygift-product-code="{{ product.id }}"></div>

<!-- 購入ボタンの下 -->
<div data-anygift-product-code="{{ product.id }}"></div>

<!-- サイドバー -->
<div data-anygift-product-code="{{ product.id }}"></div>

Q: テーマ更新後も設置は保持されますか？

A: テーマの種類によって異なります。

カスタムテーマの場合: テーマ更新時に上書きされないように注意が必要です。テーマ配布元の更新方法を確認してください
Shopify 公式テーマの場合: 通常は保持されますが、テーマ更新後に動作確認してください

Q: CSS でボタンをカスタマイズできますか？

A: はい、可能です。 マーカータグにクラスを追加してから CSS で設定します：

<div data-anygift="marker" class="anygift-gift-button"></div>

stylesheet.css に追加：

.anygift-gift-button {
  margin: 20px 0;
  text-align: center;
}

Q: ボタンクリック後のフローは？

A: 以下の流れです：

ボタンクリック → ギフト受取画面が別タブで開く
受取者がギフト形態を選択
ギフト URL が発行される
受取者にメール等でURLを送信

元の Shopify ストアは影響を受けず、通常通り買い物を続けられます。

Q: モバイルでも表示されますか？

A: はい、PC / スマートフォン両方で動作します。 レスポンシブ対応しており、画面サイズに応じて自動調整されます。

Q: 既存の購入フローに影響はありませんか？

A: ありません。 AnyGift タグはギフト形態を提供するだけで、既存の「カートに追加」機能には一切影響を与えません。

トラブルシューティング

ボタンが表示されない

確認事項:

ストア ID が正しいか確認
AnyGift管理画面で再度確認
コードのストア ID と一致しているか確認
マーカータグが挿入されているか確認
<div data-anygift="marker"></div> が正しく挿入されているか確認
HTML コメント外に挿入されているか確認
ブラウザのキャッシュをクリア
Windows: Ctrl+Shift+Delete
macOS: Cmd+Shift+Delete
Shopify テーマキャッシュをクリア
Shopify管理画面 → テーマ詳細 → キャッシュのクリア

ボタンクリック後にエラーが表示される

ブラウザの開発者ツールで確認: 1. F12 キーを押す 2. Console タブを確認 3. エラーメッセージが表示されている場合は記録

テーマに商品ページファイルが見つからない

テーマによってファイル構成が異なります。以下を確認してください：

テーマ	ファイル	場所
Dawn	`main-product.liquid`	`sections/` フォルダ
Supply	`product-template.liquid`	`sections/` フォルダ
Impulse	`product.liquid`	`templates/` フォルダ

見つからない場合は、テーマの公式ドキュメントをご確認ください。

サポート

設置中に問題が発生した場合は、AnyGiftサポートまでお問い合わせください。

サポート窓口: support@anygift.jp
対応時間: 平日 10:00-18:00

以下の情報を用意いただくと、対応がスムーズです： - Shopify ストア URL - 使用しているテーマ名 - 実施した設置手順 - 確認されたエラーメッセージ