ストア向けアプリ · セットアップガイド
GraphicMeat Smart Cart セットアップガイド16 シナリオ。それぞれ、アプリで設定する内容とテーマエディターで設定する内容に分け、実際に表示されるラベルを使って説明します。必要なものだけお読みください。他のシナリオを読んだことを前提にした説明はありません。
Smart Cart は2か所で設定します。リワードの段階とアップセルルールは Shopify admin 内のアプリにあり(バックエンド)、ドロワー本体、その文言、お知らせバー、アップセルの選択、カウントダウンは、テーマの App embed の設定です(フロントエンド)。以下のすべてのシナリオは、そのように分けて、正確なラベルで説明します。
読み方。 各シナリオには2つの列があります。 バックエンド は Shopify admin 内のアプリ、 フロントエンド はテーマエディターと、買い物客がストアフロントで見るものです。太字のラベルは画面上に表示される正確な文字です。フロントエンドの列が空の場合、App embed(下で一度だけオンにします)以外にストアフロント側で必要な設定はありません。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
| 設定 | できること | 既定値 |
|---|---|---|
| Drawer title | ドロワー上部の見出し。 | カート |
| Checkout button | チェックアウトボタンのテキスト。 | チェックアウト |
| Open drawer from cart links | カートアイコンとすべてのカートリンクがドロワーを開きます。ドロワーが /cart ページも引き継ぎます。オフ = ドロワーはカート追加後にだけ開きます。 | オン |
| Show remove button on cart items | 行ごとにゴミ箱アイコン。− ステッパーはどちらでも 0 まで減らせます。 | オン |
| Slide in from | Right または Left。 | Right |
| Accent color | 進捗バー、チップ、ボタン、バンドルラベル。 | #1a7f37 |
| Upsell products | 「You may also like」リスト用に最大8商品、優先順に。 | なし |
| Max upsells shown | 同時に表示する数、1~6。 | 3 |
| Announcement text | ドロワーの上部のバー。空欄にすると非表示になります。 | 空欄 |
| Announcement link (optional) | バーをリンクにします。 | なし |
| Starts at / Ends at (ISO date, optional) | バーのスケジュール、例: 2026-07-01T00:00:00Z；空欄 = 常時表示。 | 空欄 |
| Deadline (ISO date, optional), under Urgency countdown (Pro) | カート行の上にカウントダウンを表示します。Pro プランが必要です。 | 空欄 |
| ページ | 内容 |
|---|---|
| Home | 生み出した売上(直近30日間 / 累計)、スイート全体の売上、Setup checklist、および Open theme editor. |
| Rewards | 最大5段階: Cart amount, Reward label, Select gift; Gamified display; Add tier; Save. |
| Upsell rules | 兄弟アプリ向けのルール: Select trigger products (optional), Select upsell products, Discount %; Save & publish. |
| Plan | Upgrade to Pro (月 $9.99、14日間のトライアル)、および Switch to Free. |
| Help / Support | アプリ内ドキュメントとサポートフォーム。メッセージはスタジオに届きます。 |
テーマのカートドロワーを Smart Cart に置き換えます。まだほかには何もしません。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
カートアイコン、カートリンク、すべてのカート追加が Smart Cart を開き、テーマ自身のドロワーは閉じたままです。
カートアイコンを4回続けてクリックします。毎回開きます。商品を追加すると、ドロワーが自動で開きます。
デモストアで
お知らせバーが特典を伝え、チップには獲得済みの送料無料と、あと $52.03 で無料のステッカーパックが表示され、バーは各段階でリセットされることなく段階をまたいで満たされ続けます。すべての行にバンドルラベル、数量ステッパー、削除ボタンが付き、「You may also like」の下のおすすめはあなたが選んだものです。
「Add $12.03 more to unlock free shipping」。カートが大きくなるにつれて埋まっていきます。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
段階のチップ、「Add $X more to unlock Free shipping」の行、進捗バーが表示され、小計が $50 を超えるとチップにチェックが入ります。 GraphicMeat Smart Cart ページ上の全ページキャプチャ。
カートが $40 → バーは一部だけ満たされます。$50 を超える商品を追加 → チップにチェックが入り、チェックアウトで送料無料と表示されます。
小計が $150 を超えたときにだけ、ステッカーパックが無料でカートに入ります。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
$150 を超えると、ドロワーはギフトを「Free」と価格表示された実際のカート行として追加し、Shopify Function がチェックアウトでカートを再確認して $0 に割引します。しきい値を下回ると、ドロワーがそれを再び取り除きます。
カートが $160 → ギフト行は、ドロワーでもチェックアウトでも $0。商品を1つ外して $150 を下回る → ギフトが消えます。
デモストアで
$150 の段階を超えると、2つのチップにチェックが入り、お祝いのメッセージが表示され、無料のステッカーパックが Free と価格表示された実際のカート行として追加されます。同じしきい値がチェックアウトで Shopify Function によって適用されるため、注文が条件を満たさないギフトをドロワーが約束することはなく、カートが再びしきい値を下回った場合は、ドロワーがギフトを取り除きます。
$50 で送料無料、$150 でギフト、$300 でさらに良いギフト。解放されるたびにチップにチェックが入ります。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
チップの列があり、ロックされたものには必要な残りの金額が表示されます。進捗バーは段階ごとにリセットされず、段階をまたいでなめらかに満たされます。 GraphicMeat Smart Cart ページ上の全ページキャプチャ。
しきい値を超える: チップにチェックが入り、1回だけ祝われます。いったん下回ってからもう一度超える: 再び解放されるまで、2回目のお祝いはありません。
セールの期間中、ドロワーに表示される緑のバー。
バックエンド · アプリ内
このシナリオでは、アプリで設定するものはありません。
フロントエンド · テーマエディター & ストアフロント
2026-07-01T00:00:00Z；常時表示にするには空欄のままにします。バーはドロワーの上部に、空のカートでも、期間内の間だけ表示されます。 GraphicMeat Smart Cart ページ上の全ページキャプチャ。
終了を数分後に設定します。その後の次のドロワー表示で、バーが消えます。
キャップとパーカーを、空のカートでもワンタップの追加ボタン付きで表示します。
バックエンド · アプリ内
このシナリオでは、アプリで設定するものはありません。
フロントエンド · テーマエディター & ストアフロント
行の下(空のカートのメッセージの下も)に「You may also like」リストが表示され、追加ボタンが付きます。商品は通常価格で追加されます。
おすすめの1つを追加します。リストから消え、次のおすすめがその場所に入ります。
ここから追加された行にはドロワー経由の印が付きます。これが Smart Cart の貢献売上として数えられるものです。
デモストアで
カートが空のときも、ドロワーにはお知らせと、あなたが選んだおすすめがワンタップの追加ボタン付きで表示されます。どの商品を、どの順で、いくつ同時に表示するかはテーマエディターの設定で、モデルが推測することはありません。
どの商品にどの商品を、どんな割引で提案するかを、スイートの他のアプリに伝えます。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
ドロワーでは何も変わりません。その一覧は、上のテーマエディターでの選択から作られます。ルールは兄弟アプリのオファーを動かすため、1回の編集ですべての画面の整合性が保たれます。
Popups または Post Purchase がインストールされていると、それらのオファーページに同じ商品と割合が表示されます。
「Offer ends in 2d 4h 12m」がセールの期間中、カート行の上に表示されます。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
2026-08-31T23:59:00Z → Save.その時点までのライブカウントダウン。0 になると「ended」と表示されます。Pro がなければこの項目は無視されます。
ドロワーを開きます。時計は毎秒進みます。期限を1分後に設定して、期限切れになるのを確認します。
「Add 1 more, save 15%」の提案が、段階にあと1個足りないカート行の下に表示されます。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
行には、あと1個で解放される割引額の提案と、それを追加するボタンが表示されます。オファーに属する行にはバンドルラベルのピルが表示されます。 GraphicMeat Smart Cart ページ上の全ページキャプチャ。
2個以上の商品を1つカートに入れます。提案が表示されます。それを押すと、行が2個になり、チェックアウトで割引が表示されます。
買い物客が、カートを離れずに行を定期購入に切り替えられるようにします。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
商品にセリングプランがある行には配送セレクターが表示されます。切り替えは、プランが付いた通常のカート変更です。
行を「Every month」に切り替えます。チェックアウトに定期購入の価格とスケジュールが表示されます。
/cart に到達した買い物客(URL、ブックマーク、チェックアウトのパンくずリストから)には、2つ目のカートではなく同じドロワーが表示されます。
バックエンド · アプリ内
このシナリオでは、アプリで設定するものはありません。
フロントエンド · テーマエディター & ストアフロント
どこでも1つのカート。ドロワーの裏のテーマのカートには、Shopify が適用したバンドル価格がすでに表示されています。
アドレスバーに /cart を入力します。その上にドロワーが開き、閉じると前のページに戻ります。
デモストアで
URL またはチェックアウトのパンくずリストから /cart に移動すると、テーマ自身のカートページの上にドロワーが開くため、買い物客はどこでも1つのカートを目にします。その裏では、チェックアウトに進む前に Shopify がすでにバンドル価格を適用しています($69.99 だったものが $63.99)。
ポップアップとドロワーが画面を取り合うことを、決してなくします。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
GraphicMeat のポップアップが表示されている間、ドロワーは自動で開くのを保留し、ポップアップが閉じると開きます。ポップアップで付与された割引コードは、ドロワーに「code applied」のヒントとして表示されます。
ポップアップを表示させ、その背後で商品を追加します。ドロワーは待機します。
ドロワーの文言と見た目を、ストアの他の部分に合わせます。
バックエンド · アプリ内
このシナリオでは、アプリで設定するものはありません。
フロントエンド · テーマエディター & ストアフロント
ドロワーはテーマのフォントとストアの通貨形式を継承します。そのほかのラベル(「You may also like」「Add」「Your cart is empty」)は、現時点では英語です。
保存後にストアフロントを再読み込みします。埋め込みの設定は次のページ読み込みで反映されます。
ドロワーが行うすべての約束が、チェックアウトで守られていることを確かめます。
バックエンド · アプリ内
このシナリオでは、アプリで設定するものはありません。
フロントエンド · テーマエディター & ストアフロント
すべてのしきい値は2回(ドロワーとチェックアウトの Function で)検証されるため、この確認が自己矛盾することはないはずです。
最後のチェックアウトには、テスト注文または決済ゲートウェイのテストモードを使います。
ドロワーがどれだけ稼いだか、Pro が必要になる時期を把握します。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
すでにオンになっている App embed 以外は不要です。
Pro 限定のストアフロント機能はバンドルレールとカウントダウンで、それ以外はすべて無料のままです。
アップグレード後、Home に「Pro plan active — bundle rail and urgency countdown enabled」と表示されます。
テーマのカートに戻します(一時的に、または恒久的に)。
バックエンド · アプリ内
フロントエンド · テーマエディター & ストアフロント
テーマ自身のドロワーとカートページは、次のページ読み込みで元に戻ります。
カートアイコンをクリックします。テーマのドロワーが開きます。
Z).メッセージの送信先は お問い合わせフォーム です。アプリを作った本人が回答します。 FAQ は料金、貢献売上、データを扱っています。 アプリページ では、上記のすべてのシナリオを、デモストアで実際に見られます。