Shopifyアプリ ドキュメント
Shopifyストアで通貨変換を設定・カスタマイズするための全情報
目次
1 インストール
Shopify App Storeからインストール
- Shopify App StoreのCurrency.Wikiアプリページへアクセス
- 「アプリを追加」をクリックし、インストールを許可
- アプリが開き、セットアップウィザードが開始されます
- セットアップウィザードを完了して価格変換を開始
ヒント： セットアップウィザードは約2分で完了し、各ステップを案内します。
2 セットアップウィザード
セットアップウィザードが正しい設定をサポートします。通貨フォーマットの更新やアプリ埋め込みの有効化を案内します。
ステップ1：ようこそ
セットアップ内容を確認し、「はじめる」をクリック。
ステップ2：通貨フォーマットの更新
Shopify管理画面 → 設定 → 一般 → ストアデフォルトで通貨を探し、三点メニュー →「通貨フォーマットを変更」を選択。HTML欄に以下のラッパークラスを追加：
通貨付きHTML：
<span class="cwiki">${{amount}} USD</span>
通貨なしHTML：
<span class="cwiki">${{amount}}</span>
重要： cwikiラッパークラスは必須です。ページ上のどの要素が価格かをアプリに伝え、電話番号や注文IDなどは変換しません。
ステップ3：アプリ埋め込みを有効化
テーマのApp Embedsセクションでアプリを有効化：
- オンラインストア → テーマ → カスタマイズへ移動
- 左サイドバーで「App embeds」を探す
- 「Currency.Wiki App」を見つけてONにする
- テーマエディターで保存をクリック
ステップ4：セットアップ確認
「ストアをスキャン」をクリックしてセットアップ完了を確認。cwikiラッパークラスとアプリ埋め込みをチェックし、成功すれば準備完了です！
3 ウィジェットスタイル
ストアデザインに合わせて6つのウィジェットスタイルから選択。各スタイルはブランドカラーでカスタマイズ可能。
ミニマルドロップダウン
シンプルなドロップダウンリストでヘッダーにコンパクトに統合。右上ヘッダー配置に最適。
フローティングピル
モバイル対応のフローティングボタンと展開パネル。モバイルファーストストアに最適。コーナー配置。
サイドバードロワー
検索機能付きの全高スライドアウトパネル。多通貨対応ストアに理想的。
モーダルポップアップ
グリッドレイアウトの中央オーバーレイ。通貨選択に集中できる体験。
インラインタブ切替
人気通貨用の横並びタブ。メニューを開かずに素早く切替。
コーナーバッジ
クリックで展開するミニマルなコーナーアイコン。クリーンなデザインに最適。
ヒント： アプリ管理画面のウィジェット設定ページで、ストアカラーで全スタイルをプレビューできます。
4 管理ダッシュボード
管理ダッシュボードでストアの通貨変換を完全にコントロールできます。
ダッシュボードホーム
ウィジェットのON/OFF切替、変換統計の表示、ウィジェットのライブプレビュー。
ウィジェット設定
ウィジェットのスタイル、位置、色、サイズ、角丸、国旗表示オプションを選択。
通貨管理
通貨の有効/無効化、リスト順序変更、自動検出動作や為替レート設定。
分析
変換チャート、利用通貨トップ、海外顧客分布を確認。
テーマと外観
テーマモード（自動・ライト・ダーク・カスタム）、色設定、グラスモーフィズム効果、ダークモード動作を設定。
チェックアウトメッセージ
カート・チェックアウトページでチェックアウト通貨を通知するメッセージを有効化。
5 高度な設定
高度な設定ではProユーザー向けに価格フォーマットや変換動作を詳細に制御できます。
価格フォーマット（Pro）
- 小数点以下桁数 - 表示する小数点以下の桁数を制御（0～6）。
- 数値フォーマット - フォーマットスタイルを選択（自動、US、EU、インド、スペース・ドット、スペース・カンマ）。
- 通貨記号の位置 - 通貨記号を金額の前後または通貨ごとに自動配置。
- 端数処理 - 標準、切り上げ、切り捨て、端数処理なし。最も近い.99への丸めも可能。
テーマ統合（Pro）
以下のHTMLスニペットを使って、ウィジェットやカート通知をテーマ内の任意の場所に手動埋め込み：
ウィジェット埋め込み（header.liquidや任意のセクションに追加）：
<div class="cwiki-widget"></div>
カート通知埋め込み（cart.liquidに追加）：
<div class="cwiki-banner"></div>
開発者向けオプション（Pro）
- スタイル上書き - カスタムCSSを挿入してウィジェットのデザインを微調整。
- クリックリスナー - 特定要素のクリック時に価格を再変換（例：サイズ選択や商品オプション）。
- 追加価格要素 - デフォルトの.cwikiラッパー以外の価格要素もターゲット可能。
- URLパターン - 特定文字列を含むURLで価格を再スキャン（AJAXコンテンツや無限スクロール対応）。
- 変換遅延 - ページ読み込み後にコンテンツが表示される場合、変換まで待機。
ご注意： これらのオプションは上級者向けです。公開前にプレビューテーマでテストしてください。
6 トラブルシューティング
価格が変換されない場合
通貨フォーマット設定にcwikiラッパークラスが含まれているか確認。設定→一般→ストアデフォルトでHTMLフォーマットを確認。テーマカスタマイザーでアプリ埋め込みが有効かも確認。
ウィジェットが表示されない場合
テーマのApp Embedsセクションでアプリ埋め込みが有効か確認。テーマカスタマイザーを開き、Currency.WikiがONになっているか確認し、保存後ストアを更新。
価格が読み込み時にちらつく場合
当アプリはゼロフリッカー設計です。ちらつきがある場合はキャッシュ系プラグインの影響を確認。テーマのheadセクションでアプリ埋め込みが読み込まれているかも確認。
誤った通貨が検出される場合
ジオ検出は訪問者のIPアドレスに基づきます。VPNや企業ネットワークは検出に影響する場合があります。訪問者は手動で通貨を選択可能。設定でデフォルトのフォールバック通貨も指定できます。
ウィジェットがテーマに合わない場合
テーマと外観設定で色をカスタマイズ、または自動モードでテーマカラーを自動検出できます。高度な設定のカスタムCSSで細かい調整も可能。
