Skip to main content
このガイドでは、ビジュアルのカスタマイズからストアフロントでの有効化まで、主要なモジュールを使った Upcart のセットアップを順を追って説明します。 Upcart はテーマの cart drawer を視覚的に置き換えますが、テーマの cart drawer やカートページとは統合されません。Shopify のカートページには引き続きアクセスできます。

​
モジュールの管理

各 Upcart モジュールは簡単に有効化または無効化できます。右上隅の Enable/Disable ボタンをクリックするだけで、いつでもモジュールのオン/オフを切り替えられます。保存すると変更は即座に反映されます。 Disabled と表示された Announcements モジュールの行と Enable ボタンを指す矢印

​
カートのデザイン

Upcart の Cart Editor を初めて開くと、Design モジュールが表示されます。ここでは、ストアのブランディングに合わせてドロワーの基本カラーをカスタマイズできます。 ライブの cart drawer プレビューの横にカラー設定が表示された Upcart Cart Editor の Design モジュール

​
アナウンス

カートのメッセージやカウントダウンタイマーを表示するには、Body > Announcements に移動します。 右上隅の Enable をクリックします。モジュール名の横のバッジが Disabled から Active に変わります。 Announcement Text フィールドにメッセージを入力し、必要に応じてタイマーを設定します。 タイマー、アナウンステキストフィールド、カラーオプションが表示されたアナウンス設定 正しく機能させるために、アナウンステキスト内のカウントダウンには必ず {TIMER} 変数を使用してください(例: 「This offer is only available for .」)。サードパーティツールから書式付きテキストを直接コピーすることは避けてください。 完了したら、必ず右上隅の Save をクリックしてください。

​
テーマレベルの問題

  • CSS またはアプリの競合: display: none; などの CSS プロパティがアナウンスバーを非表示にしていないことを確認してください。また、サードパーティアプリがこれらの設定を上書きしていないことも確認してください。
  • テキストの視認性: アナウンスバーのテキストカラーが背景とコントラストを持つことを確認し、必要に応じてテーマ設定で調整してください。

​
高度なデバッグ手順

問題が解決しない場合は、アナウンスバーに影響するスクリプトの問題についてブラウザーのコンソールエラーを確認し、サードパーティアプリを一時的に無効にして競合を特定してください。

​
リワード

顧客の購入額アップを促すプログレスバーを表示するには、Rewards モジュールを有効にします。

​
General settings

ブランドカラーと、最終リワードティア達成後に表示されるメッセージを設定します。 General settings の下にある Rewards calculation カードでリワードの基準を選択します:
  • Cart total ($): カートの合計金額を追跡します
  • Cart quantity (#): アイテムの数量を追跡します
バーのカラーと達成メッセージのフィールドがある Rewards モジュールの General settings

​
Tier settings

リワードの種類を選択します:
  • Shipping: ティア達成で送料無料を解除します
  • Discount: ティア達成でディスカウントを解除します
  • Product: カートに商品を追加します
ティアの進捗をディスカウント適用前と適用後のどちらで測定するかは、Rewards calculation の Use pre-discounted prices for cart total チェックボックスでバー全体に対して一度に設定します — リワードの種類ごとのプロパティではありません。 リワードをトリガーする最低しきい値を設定し、Title before achieving tier フィールドをカスタマイズします。リワードティアは最大 4 つまで作成できます。 リワードタイプの選択、最低金額、ティアタイトルのフィールドがある Tier settings
このスクリーンショットは現在のラベルより前のものです: セクションは「Rewards settings」、フィールドは「Text before achieving」と表示されています。コントロール自体は同じもので、現在は Tier settings と Title before achieving tier という表記になっています。

​
アップセル

Use AI Recommended Upsells を有効にし、Related アルゴリズムを選択して、Smart Variant Matching をオンにすると、カートの内容に基づいて一致する商品バリエーションが事前選択されます。 AI recommended upsells、Related アルゴリズム、smart variant matching が有効になっている Upsells 設定 セクションのタイトルと Add ボタンのラベルをカスタマイズします。 表示するアップセルの最大数とセクションタイトルテキストのアップセルフィールド

​
アドオン

フッターにトグル式のアドオンを表示するには、次のいずれかのオプションを有効にします:

​
配送保護

Shipping Protection を選択し、カートの金額に基づいた動的な価格ティアを設定します。
これにより、Shopify カタログに実際の商品が作成されます。 タイトル、説明、価格ティアがある Shipping Protection アドオンの設定

​
商品アドオン

Product Add-On タブに切り替え、アップセルとして提供する既存の商品を選択します。 Energy Drink 商品が選択され、Change Product ボタンがある Product add-on タブ

​
ストアで Upcart を有効にする

​
ステップ 1: カートをライブにする

すべての設定が完了したら、Manage All Carts > 有効にしたいカートを選択 > Publish をクリックします。 公開されると、カートはカートテーブルのライブセクションに移動します。次のステップであるテーマでの Upcart app embed の有効化を行うまで、警告の 「App embed off」 バッジが表示されます。embed をオンにすると、バッジは緑色の 「Live」 バッジに変わり、カートがストアフロントに表示されていることを確認できます。
app embed は、Upcart の cart drawer をストアフロントに表示するかどうかを制御します。ディスカウントを設定している場合、それらのルールは app embed が無効になっていても、Shopify のディスカウントシステムを通じて有効なままです。
Publish 確認ダイアログが開いている状態での Upcart でのカートの公開

​
ステップ 2: テーマの App Embed を有効にする

テーマで Upcart を有効にするには、Shopify Admin → Online Store → Themes → Customize → App embeds に移動し、Upcart の app embed を有効にして Save をクリックします。 Shopify テーマの App embeds パネルで Upcart Cart Drawer トグルを有効にする様子 問題が発生した場合や互換性の問題が生じた場合は、お気軽にサポートチャットまでお問い合わせください。