1)を開くか、Shopify App Storeの掲載ページをご覧ください。1. ShipCalcをインストール
ShipCalcはShopify App Storeからインストールします。インストールすると14日間の無料体験が始まり、すべての機能をご利用いただけます。
- Shopify App StoreのShipCalcページを開きます。
- Installをクリックしてアプリを承認します。
- Shopify管理画面でShipCalcが開き、初期設定チェックリストが表示されます。
初期設定ページのワンクリックリンクから、各表示場所に合わせてテーマエディターを開けます。
2. 商品ページのブロックを追加
商品ページのブロックを使うと、お客様はカートに入れる前に送料を確認できます。選択中のバリエーションと数量が使われます。
- ShipCalcの初期設定でAdd Product Page Blockをクリックします。商品テンプレートでテーマエディターが開きます。
- 商品情報セクションでAdd block(ブロックを追加)をクリックし、ShipCalcのブロックを選びます。
- ドラッグして配置します。価格の下か購入ボタンの下がおすすめです。
- Save(保存)をクリックします。
3. カートページのブロックを追加
カートのブロックはカート内のすべての商品と数量をもとに見積もるため、お客様は注文全体の送料を確認できます。
- ShipCalcでAdd Cart Page Blockをクリックします。カートテンプレートでテーマエディターが開きます。
- Add block(ブロックを追加)をクリックし、ShipCalcのカートブロックを選びます。
- 小計と購入ボタンの近くに配置し、Save(保存)をクリックします。
4. カートドロワーを有効にする
カートドロワー(スライド式カート)の作りはテーマごとに異なります。そのためShipCalcはアプリ埋め込みで対応し、開いているドロワーを検出して、購入ボタンの上にコンパクトで折りたたみ可能な計算ツールを配置します。
- テーマエディターを開き、左サイドバーでApp embeds(アプリ埋め込み)を選択します。
- ShipCalcのカートドロワー埋め込みをオンにします。
- ほとんどのテーマは自動検出で動作します。動作しない場合は、埋め込みの設定にドロワーのCSSセレクターを入力してください。
- Save(保存)をクリックし、公開中のストアでドロワーを開いて配置を確認します。
5. ウィジェットをカスタマイズ
デザインとテキストの設定はShipCalcのAppearanceページにあり、ストアに反映する前にライブプレビューで確認できます。
レイアウトとスタイル
- カード型またはミニマル型のレイアウト。
- アクセント、背景、文字、枠線の色。
- 角の丸み、余白、文字サイズ。
- テーマのタイポグラフィと基本的なフォームのスタイルを継承。
表示テキスト
- タイトル、補足テキスト、ボタンのテキスト。
- 国と郵便番号のラベルとプレースホルダー。
- 計算中、料金なし、エラー、カートが空のときのメッセージ。
- 無料配送方法の表示名。
お客様に表示されるテキストは、すべてストアの言語で設定できます。
カスタムCSS
さらに細かく調整したい場合は、CSSエディターでウィジェット向けのルールを追加できます。テーマ固有の余白やホバー時の表示調整に便利です。
6. 国と郵便番号
配送先の国をどこから取得するかを選びます:
- Fixed country(固定)– 指定した1か国で常に見積もります。
- Shopper’s Shopify country(お客様のShopify国)– Shopifyマーケットのローカライズ国を使います。
- Country selector(国の選択)– 許可した国からお客様が選びます。
次に、郵便番号の扱いを選びます:
- Required(必須)– 郵便番号の入力が必要です。
- Optional(任意)– 入力するとより正確な見積もりになります。
- Country only(国のみ)– 郵便番号欄を非表示にし、選んだ国の目安を表示できます。
特定の国からの訪問者に計算ツールを非表示にしたり、指定した国の訪問者にだけ表示したりすることもできます。
7. 料金の表示オプション
- 利用可能なすべての料金、最安のみ、最高額のみから選んで表示できます。
- Shopifyが返す場合は、料金の下に配送の詳細を表示できます。
- 無料の配送方法には独自の表示名を使えます(例:「送料無料」)。
8. 手動配置(上級者向け)
テーマのレイアウト上、必要な場所にアプリブロックを置けない場合は、プレースホルダー要素とShipCalcのローダーをテーマに追加します:
<div data-shipcalc-m="product"></div>
<script src="/apps/shipcalc/manual.js" defer></script>カートに配置する場合はdata-shipcalc-m="cart"を使います。手動配置の計算ツールも、アプリブロックと同じ設定、スタイル、分析が適用されます。
9. 分析
Analyticsページでは、お客様が計算ツールをどう使っているかを確認できます:
- 見積もり件数の推移と最近のアクティビティ。
- 表示場所別の見積もり:商品ページ、カートページ、カートドロワー。
- よく使われる郵便番号と国の組み合わせ。
- お客様に表示された配送方法。
- エラー(料金が表示されない配送先の発見に役立ちます)。
10. マーケティングイベント
ストアにGoogleアナリティクス4、Googleタグマネージャー、Meta Pixelがすでに導入されている場合、ShipCalcはCalculate Shippingイベントを送信できます。ShipCalc自身がトラッキングスクリプトを導入することはありません。
- ShipCalcでMarketing eventsを開きます。
- 送信先のプラットフォームを選びます。
- 必要に応じて、イベント名、カテゴリ、ラベル、値を変更したり、カスタムパラメーターを追加したりします。
- 保存します。
イベントには、ウィジェットの表示場所(商品、カート、ドロワー)、国、郵便番号の入力有無が含まれます。
11. 診断
Diagnosticsページでは、ストアを経由せずに実際の見積もりを実行できます。配送エリアや配送料を変更した後の確認に便利です。
- ShipCalcでDiagnosticsを開きます。
- 商品、国、郵便番号を選びます。
- 見積もりを実行し、Shopifyが返す内容をそのまま確認します。
12. トラブルシューティング
商品ページに計算ツールが表示されない
- 実際に商品が使っているテンプレートにブロックを追加したか、保存したかを確認してください。
- ブロックが非表示や折りたたまれたセクションの中にないか確認してください。
- Appearanceの訪問者の国のルールで、ご自身の地域が非表示になっていないか確認してください。
料金が返されない
- 配送先がShopifyの有効なマーケットと配送エリアに含まれているか確認してください。
- 商品の配送プロファイルと重量が料金の条件を満たしているか確認してください。
- 同じ配送先をDiagnosticsで実行し、Shopifyが返す内容を確認してください。
- 「料金なし」のメッセージを、お客様が次に何をすればよいかわかる内容に書き換えてください。
より詳しいチェックリストはShopifyの配送料が表示されない場合をご覧ください。
カートドロワーに表示されない
- カートドロワーのアプリ埋め込みがオンになっていて、保存されているか確認してください。
- 埋め込みの設定でドロワーのセレクターを指定してみてください。
- テーマ名を添えてお問い合わせください。
13. サポート
ShipCalcの管理画面には、よくある質問とお問い合わせフォームのあるSupportページがあります。こちらからメッセージを送ることもでき、メールでご返信します。