ネットショップ
制作会社の方向け · 2026年10月29日 更新
静的なサイトで、物を売れます。商品は記事と同じように書いて公開し、商品のページに注文の箱を置きます。お客さまは箱から、受け取り方・支払い方・お届け先を入れて注文します。ツギテは在庫を数え、注文の受け付け・入金の確認・発送などのメールを送ります。
- だれ向け:制作会社(ツギテの代理店)の担当の方、テナント管理者。お店の方は「注文の流れと状態」から読んでください。
- 場所:メニューの「ネットショップ」(「商品」「注文」「設定」のタブ)。
- 前提:ネットショップは追加の部品です(月1,100円・年11,000円。全部入りには入りません)。契約・請求の画面で追加し、サイト設定の「使う部品」で「ネットショップ」を選びます。
- 支払い:銀行振込・代金引換・店頭払いと、お店の Stripe をつないだときのカード・電子決済です(下の「カード・電子決済(Stripe)」)。どれも、代金はお店に直接入ります。
売り手はお店です。 ツギテは売買の当事者ではありません。商品・代金の受け取り・配送・返品・特定商取引法の表記は、お店の責任で行います。
始め方
- 「ネットショップ」→「設定」で、お店・受け取り方・支払い方・送料・特定商取引法の表記を入れて保存します(下の「ショップの設定」)。設定は1サイトに1つです。
- 「差し込み箇所」で、部品「ネットショップ」の差し込み箇所(商品の一覧)と、記事のページ(商品のページ)を設定します。
- 商品のページのひな形に、注文の箱のタグ
<!-- tsugite:shop-order --><!-- /tsugite:shop-order -->を入れます。 - 「商品」で商品を書き、在庫を入れて公開します。
- 特定商取引法の表記をサイトに出すときは、差し込み箇所を1つ作り、出すものを「特定商取引法の表記」にします。
商品
「商品」のタブで「商品を書く」を押します。商品の一覧・カテゴリ・カテゴリのページ・商品のページ・ページ分け・予約の公開・承認は、お知らせなど記事の部品と同じです。
| 欄 | 中身 |
|---|---|
| 商品名・説明 | 題名と本文 |
| 写真 | 何枚も(1枚目が一覧の写真) |
| 値段(税込) | 円。種類で値段が違うときは、種類の欄に入れます |
| 税率 | 10%か8%(軽減税率)。注文の明細と納品書に出します |
| 種類 | 「サイズ」「色」など1つの軸で、20個まで(例 S・M・L)。種類ごとに値段・品番を決められます |
| 品番 | 任意 |
| 1回に買える数 | 初めは10 |
| 販売の状態 | 販売中・売り切れ・受け付け前(販売の開始日時)・販売終了 |
| 送料 | 「ショップの決まり」「送料無料」「この商品だけ別の送料」 |
在庫
在庫は、商品の編集の画面の「在庫」か、商品の一覧の「在庫」の列の「直す」で入れます(種類があれば種類ごと)。保存した商品だけ入れられます。
- 数を入れると、注文で減り、キャンセルで戻ります。0になると「売り切れ」です。
- 「数えない」にすると減りません(作りおきのない商品など)。
- 同じ商品に同時に注文が来ても、在庫を超えて受けることはありません。
在庫と販売の状態は、書き出したページには入れません。サイトの script が、その場の値(在庫あり・残りわずか・売り切れなど)を出すので、書き出したあとに売り切れても正しく出ます。
ショップの設定
| 区切り | 中身 |
|---|---|
| お店 | 名前(メールの件名の頭と差出人の名前)・電話・メール(お客さまへのメールの返信先)・住所 |
| 受け取り方 | 配送・店頭で受け取り(どちらか・両方)。店頭は受け取りの場所と案内の文 |
| 支払い方 | 銀行振込(振込先と、振込の期限〈注文から何日〉)・代金引換(手数料の段:代金〈商品+送料〉がいくらまでなら手数料いくら)・店頭で支払い(店頭受け取りのときだけ)・カード・電子決済(下の「カード・電子決済(Stripe)」でつないだときだけ出ます)。少なくとも1つ(カード・電子決済だけでもかまいません) |
| 送料 | 全国一律・「〇円以上で無料」・都道府県ごとの表(任意)。決まりは下の「カート」の「送料」 |
| 注文の確認と在庫 | 「すぐ受け付け」か「店が確かめてから受け付け」、「残りわずか」と出す在庫の数(初めは3) |
| カート | カートを使う(初めは使う)・カートのページの場所(初めは shop/cart.html)・1回の注文の商品の数(初めは30) |
| 特定商取引法の表記 | 販売業者・運営の責任者・所在地・電話番号・メールアドレス・代金のほかにかかる費用・支払いの時期と方法・引き渡しの時期・返品の決まり |
特定商取引法の表記の欄がすべて埋まるまで、注文は受け付けません。 商品の一覧と注文の画面に「特定商取引法の表記を入れてください」と出ます。支払い方が「カード・電子決済」だけのお店は、Stripe がつながって決済を受けられるまで注文を受け付けません(「使える支払い方がないため、注文を受け付けていません」と出ます)。
金額は、注文のときにツギテが計算し直します(サイトから送られた金額は使いません)。
カート
カートを使うと、お客さまはいくつもの商品をカートに入れて、まとめて1回で注文できます。
置き方
- 「設定」の「カート」で「カートを使う」にし、カートのページの場所(例
shop/cart.html)を入れて保存します。 - カートのページに、カートの箱
<div class="tsugite-shop-cart" data-tsugite-shop-cart></div>と script<script src="https://app.tsugite.flup.jp/embed/shop.js" async></script>を置きます。設定の画面の「サイトに置くもの」に、コピーする形があります。 - ヘッダーなどに、カートのボタン
<a class="tsugite-shop-cart-button" href="(カートのページの URL)" data-tsugite-shop-cart-button="(カートのページの URL)">カート</a>を置きます(入っている数を出し、カートのページへ移ります)。
差し込み箇所で、部品「ネットショップ」の出すもの「カート(中身)」「カートのボタン」を選んでも置けます。script はページに1つあれば足ります。
お客さまの流れ
- 商品のページの注文の箱に「カートに入れる」と「すぐ注文する」が出ます。入れると「カートに入れました」と、カートのページへのリンクが出ます。
- カートのページには、商品ごとに写真・名前・種類・いまの値段・数(1回に買える数と在庫まで)・小計・「外す」と、合計の目安が出ます。送料は次の画面で計算します。
- 売り切れ・販売終了・非公開になった商品は「ご購入いただけません」と出て、注文には含めません。
- 「注文に進む」のあとは、すぐ注文と同じ流れ(受け取り方 → 支払い方 → お名前など → 確認 → 注文する/支払いに進む)です。確認の画面に明細の表が出ます。カートに入れたあとに値段が変わった商品には「値段が変わりました」と出て、新しい値段で注文します。
- 注文が済むと(カード・電子決済は支払いが済んで戻ったとき)、カートは空になります。
- カートの中身は、お客さまのブラウザに、サイトごとに持ちます(商品・種類・数だけ)。入れてから30日で消えます。
送料
1つの注文で、次のとおり計算します。
| 商品の送料の決まり | 送料 |
|---|---|
| 「ショップの決まり」の商品が1つでもある | ショップの決まり(全国一律・都道府県ごと)を1回。「〇円以上で無料」は、その注文の商品の小計で見ます |
| 「この商品だけ別の送料」の商品 | その送料を、商品ごとに足します(数ではなく1行に1回) |
| 全部が「送料無料」 | 0円 |
| 店頭受け取り | 0円 |
例:ショップの決まり 800円の商品と、「この商品だけ 500円」の商品を2つ → 送料 1,300円。代引きの手数料は、商品と送料の合計で決まります。
在庫が足りないとき
注文のときに、すべての商品の在庫をまとめて確かめて減らします。1つでも足りなければ、どの商品の在庫も減らさず、お客さまをカートのページに戻して「在庫が足りなくなりました(商品の名前)」と出します。キャンセル・期限切れでは、注文のすべての商品の在庫を戻します。
カード・電子決済(Stripe)
お店の Stripe のアカウントをツギテにつなぐと、注文の箱の支払い方に「カード・電子決済」が出ます。お客さまは、箱でお名前・受け取り方・お届け先などを入れて確かめたあと、「支払いに進む」で Stripe の支払いのページに移って払い、払うと注文の箱を置いたページに戻って完了が出ます。代金はお店の Stripe に直接入ります。
つなぎ方
- 「ネットショップ」→「設定」の「カード・電子決済(Stripe)」で「Stripe をつなぐ」を押します。
- Stripe の画面で、お店の情報・本人確認・振込先の口座を入れます。すでに Stripe のアカウントを持っているときは「持っている Stripe のアカウントをつなぐ」でつなげます(出ていないときは新しく作ります)。
- 済むと設定の画面に戻り、「つながっています(アカウントの名前・ID の末尾)」と出ます。本人確認などが残っているあいだは「Stripe で手続きが残っています」と出て、カード・電子決済は注文の箱に出ません。「Stripe で手続きを続ける」で続きを入れます。
「つなぎを外す」を押すと、カード・電子決済は注文の箱に出なくなります。いま進んでいる注文はそのままです。
払い方
| 使う払い方 | 中身 |
|---|---|
| カード | クレジットカード・デビットカード(Apple Pay・Google Pay を含む) |
| お店の Stripe で有効にした払い方すべて | カードに加えて、コンビニ払いなど、お店の Stripe のダッシュボードで有効にしたもの |
コンビニ払いのように後で払うものは、お客さまが払うまで「支払い待ち」のままです(払い方の案内は Stripe が出します)。払われると「発送待ち」などに進み、払われないまま期限が過ぎると、自動でキャンセルして在庫を戻します。
注文の流れ
| 状態 | とき |
|---|---|
| 支払い待ち | 「支払いに進む」を押したあと。在庫は押さえます。30分たっても払わなかったときは、自動でキャンセルして在庫を戻します(お客さまにもお店にも知らせません) |
| 発送待ち・受け渡し待ち | 払い終わったとき(「すぐ受け付け」)。このとき、お客さまに「注文の受け付け」のメール(支払い方「カード・電子決済(支払い済み)」)を送り、お店に新しい注文を知らせます |
| 確かめ待ち | 「店が確かめてから受け付け」のとき。下の「店が確かめるとき」 |
店が確かめるとき(与信)
「店が確かめてから受け付け」にしていると、カードの与信(お支払いの枠の確保)だけを取り、まだ代金はいただきません。
- 「受け付ける」を押すと、支払いが確定します。
- 「お断りする」を押すと、与信を取り消します(お客さまに請求はありません)。48時間たっても決まらないときの自動のお断りも同じです。
- 与信を取れるのはカードだけなので、このあいだはコンビニ払いなどは出ません。
返金
注文を開いて「キャンセルする」を押すと、在庫を戻し、代金を全額返金します(ツギテの手数料もお店に戻します)。状態は「キャンセル(店から・返金済み)」になります。Stripe で返金できなかったとき(不服申し立ての途中など)は、キャンセルせずに、わけを出します。
一部だけの返金・不服申し立て(チャージバック)への対応は、Stripe の画面で行います。注文の詳細の「Stripe の画面でこの支払いを開く」から、その支払いを開けます。Stripe の画面で返金したときは、注文の詳細の「返金」に額が出ます(注文の状態は変わりません)。
カード・電子決済の注文は、お客さまの取り消しのリンクからは取り消せません(「お店にご連絡ください」と出ます)。
手数料
- ツギテは、決済ごとに決済額の1%(1円未満は切り捨て)を手数料として、お店の Stripe の売り上げから差し引きます。月の料金とは別で、別にお支払いいただくものはありません。代理店の配下のお店は、代理店ごとの率です。
- Stripe の決済の手数料は、別にお店の Stripe でかかります(Stripe の料金のとおり)。
- 全額を返金した注文の手数料は、お店に戻します。
- 手数料の率は注文のときに決まり、あとで率が変わっても、済んだ注文の手数料は変わりません。
- 月ごとの手数料の一覧と明細(印刷できます)は、「契約・請求」の「ネットショップの手数料」で見られます。
Stripe の画面でできること
売り上げの入金(振込)の予定・明細、一部の返金、不服申し立てへの対応、払い方(コンビニ払いなど)の有効・無効、領収書の設定、カードの明細に出るお店の名前など。Stripe の使い方は、Stripe のヘルプを見てください。
サイトに置く
- 商品のページ:ひな形の
<!-- tsugite:shop-order --><!-- /tsugite:shop-order -->に、書き出すと注文の箱と1行の script が入ります。 - ほかのページ:
<div data-tsugite-shop-order="商品の ID"></div>と<script src="https://app.tsugite.flup.jp/embed/shop.js" async></script>でも置けます。商品の ID は、自分で書く形の{{product_id}}で出せます。 - 商品の一覧の標準の形には、状態の箱
<span class="tsugite-shop__status" data-tsugite-shop-status="商品の ID"></span>が入っています。同じページに script があれば、売り切れ・残りわずかなどを入れます。
注文の箱の中は、値段・在庫の状態・種類・数 →「注文に進む」→ 受け取り方・支払い方・お名前・メール・電話・お届け先(配送)か受け取りの希望日(店頭)・ひとこと → 確認(小計・送料・代引きの手数料・合計)→ 注文する → 完了(注文番号・合計、振込なら振込先と期限)の順に出ます。カード・電子決済は、確認の「支払いに進む」で Stripe の支払いのページに移り、払って戻ると完了が出ます。カートを使うときは、「注文に進む」の代わりに「カートに入れる」と「すぐ注文する」が出ます(上の「カート」)。
自分で書く形で使える {{…}}(お知らせと同じものに加えて):
{{…}} | 中身 |
|---|---|
{{price}} | 「1,980円(税込)」。種類で値段が違えば、いちばん安い値段に「〜」 |
{{price_raw}} | 値段の数だけ(1980) |
{{tax}} | 「10%」「8%」 |
{{sku}} | 品番 |
{{gallery}}・{{photo_count}} | 写真の並び・写真の枚数 |
{{product_id}} | 商品の ID |
見た目はサイトのものです。足す要素のクラス名:
| クラス名 | もの |
|---|---|
tsugite-shop・tsugite-shop__item・tsugite-shop__title・tsugite-shop__price・tsugite-shop__status | 商品の一覧(標準の形) |
tsugite-shop__status--sold_out・--few・--upcoming・--ended | 状態の箱の中身があるとき |
tsugite-shop__article・__article-title・__gallery・__sku・__body | 商品のページの中身(標準の形) |
tsugite-shop-order | 注文の箱 |
tsugite-shop-order__price・__status(--few・--sold_out など)・__select・__qty・__next | 値段・在庫の状態・種類・数・注文に進む |
tsugite-shop-order__form・__selected・__change・__choices・__pref・__submit | 注文の入力 |
tsugite-shop-order__done・__number・__bank | 完了・注文番号・振込先 |
tsugite-shop-order__message・__closed | 「在庫が足りなくなりました」・「いま注文を受け付けていません」 |
tsugite-shop-order__add・__added・__cart-link | カートに入れる・「カートに入れました」・カートを見る |
tsugite-shop-order__lines・__changed | 確認の画面の明細の表・「値段が変わりました」 |
tsugite-shop-cart・__item(--unavailable)・__photo・__name・__price・__qty・__subtotal・__remove・__total・__next・__message | カートのページ |
tsugite-shop-cart-button・__count | カートのボタン・入っている数 |
tsugite-shop-legal | 特定商取引法の表記の表 |
名前などの欄のクラス名は、予約の箱と同じ(tsugite-booking__field・tsugite-booking__input・tsugite-booking__error)です。
注文の流れと状態
| 状態 | とき |
|---|---|
| 支払い待ち | カード・電子決済で、Stripe の支払いのページで払うまで(30分。コンビニ払いなどは払われるまで) |
| 確かめ待ち | 「店が確かめてから受け付け」のとき。在庫は押さえます。48時間たっても決まらなければ、自動でお断りにします |
| 入金待ち | 銀行振込。振込の期限の前日に「お振込みの期限は明日です」を送り、期限を過ぎたら自動でキャンセル(在庫を戻す) |
| 発送待ち・受け渡し待ち | 代金引換・店頭払い・入金を確かめたあと・カード・電子決済で払い終わったあと |
| 発送済み・受け渡し済み | お店が「発送した」(配送会社と追跡番号を入れられます)・「受け渡した」を押したとき |
| キャンセル | お店かお客さまの取り消し・振込の期限切れ・お断り。在庫を戻します |
「注文」のタブで、状態ごとの数(確かめ待ち・入金待ち・発送待ち・受け渡し待ち)・新しい順の一覧・状態で絞る・注文番号か名前で探す、が使えます。注文を開くと、中身・明細・メールの記録・お店だけが見るメモと、状態を進めるボタンが出ます。
お客さまは、注文の受け付けのメールのリンクから、「確かめ待ち」「入金待ち」のあいだだけ注文を取り消せます。そのあとは「お店にご連絡ください」と出ます(カード・電子決済の注文は取り消せません)。
メール
お客さまあてのメールは、件名の頭にお店の名前を付け、差出人の名前はお店の名前です。
| メール | とき |
|---|---|
| 注文の受け付け | 注文を受けたとき。カード・電子決済は払い終わったとき(注文番号・明細・合計・受け取り方・支払い方・振込先と期限・特定商取引法の表記の要点・取り消しのリンク) |
| 注文の確定・お断り | 「店が確かめてから」のとき、お店が押したとき・48時間たったとき |
| 入金の確認 | お店が「入金を確かめた」を押したとき |
| 発送のお知らせ | お店が「発送した」を押したとき(配送会社と追跡番号) |
| 受け渡しの準備ができた | 店頭受け取りで、お店が「準備ができたと知らせる」を押したとき |
| キャンセル | キャンセルしたとき(お店から取り消すときは、送るかを選べます) |
| 振込の期限の前日 | 振込の期限の24時間前 |
お店には、お問い合わせフォームと同じ送信先(メール・Slack・Google スプレッドシート・Notion・Webhook)に、新しい注文とキャンセルを届けます。成果の知らせも、注文の受け付けが成果として動きます。
納品書と宛名
注文の一覧で注文を選び、「選んだ注文の納品書」で納品書(お店の名前・明細・税率ごとの合計)を、「選んだ注文の宛名」で発送の宛名の一覧を、印刷用の形で出します。宛名は CSV でも落とせます。
持つ期間と CSV
- 注文の情報は、暗号化してツギテに持ちます。お名前・連絡先・住所・ひとことは、注文の日から2年で消します。 金額・商品・日付・届け先の都道府県は、売上を見るために残します。
- 帳簿はお店が持つものです。「注文」のタブの「注文の CSV」で期間を選んで、消える前に取っておいてください。
- サイトのプライバシーポリシーに、注文の情報の扱い(使う目的・ツギテを使っていること・2年で消えること)を書いてください。
うまくいかないとき
- 箱に「いま注文を受け付けていません。」と出る:特定商取引法の表記が埋まっていない、ショップの設定がない・止まっている、ネットショップの部品を使えない(契約にない)、のどれかです。
- 箱に何も出ない:ページのドメインが、ショップの設定の「受け付けるサイトのドメイン」にないと、商品の値を読めません。商品が公開中かも確かめてください。
- 売り切れと出る:在庫が0か、販売の状態が「売り切れ」です。在庫を入れても、状態が「売り切れ」「販売終了」なら注文を受けません。
- カード・電子決済が出ない:「カード・電子決済(Stripe)」が「つながっています」になっているか確かめてください。「Stripe で手続きが残っています」のあいだは出ません。
- 払ったのに「お支払いはまだ済んでいません」と出る:Stripe からの知らせが遅れていることがあります。少し待ってページを読み直してください。注文の一覧で状態を確かめられます。
- カートのボタンの数が出ない・カートが空になる:カートの中身はお客さまのブラウザに持ちます。ブラウザのデータを消した・別のブラウザで開いた・30日たった、のどれかです。
- カートに入れた商品が「ご購入いただけません」:売り切れ・販売終了・非公開になった商品です。
- 合計がちがう:確認画面の金額は目安で、ツギテが計算し直した金額が正しい金額です。送料の決まり(〇円以上で無料・都道府県ごと)と、商品ごとの送料を確かめてください。