--- title: "定期購入ウィジェット｜Subscriptionsドキュメント | Chargezen" description: "Shopifyの商品ページにChargezenの定期購入ウィジェットを追加し、テンプレートを選び、文言とデザインを設定して、カートに追加する前のオファーを加えます。" url: "https://chargezen.com/ja/docs/subscriptions/subscription-widget" lang: "ja" updated: "2026-10-18" --- Canonical URL: https://chargezen.com/ja/docs/subscriptions/subscription-widget # 定期購入ウィジェット Shopifyの商品ページにChargezenの定期購入ウィジェットを追加し、テンプレートを選び、文言とデザインを設定して、カートに追加する前のオファーを加えます。 最終更新日：2026-10-18 定期購入ウィジェットは商品ページの購入ボックスで、購入者はここで1回限りの購入か定期購入かを選び、お届け頻度を選んでカートに追加します。ほとんどの定期購入はここから始まるので、わかりやすくする価値があります。**Subscriptions → Customer experience → Subscription widget**を開きます。 ## 設定する 1 #### ウィジェットを作成する **Create widget**を選び、**Product widget**（どの商品ページにも使えるコンパクトな購入ボックス）または**Variant cards**（バリエーションのカード、1回限りの購入か定期購入の選択、カートに追加する前のオファー）で**Use template**を選びます。 2 #### 文言とデザインを編集する 編集画面のセクション（Content、Layout、Behavior、Styleなど）を順に設定します。**Previewing**で商品を選び、デスクトップとモバイルのボタンで両方のサイズを確認します。 3 #### 表示する場所を選ぶ **Publish**で**Widget name**（ストア側だけが見る名前）を入力し、**Show on**を**All products**または**Specific products**に設定します。 4 #### 保存する **Save**を選びます。 5 #### テーマにブロックを追加する **On your store**で**Add the block in Shopify**を選びます。Shopifyで**Online Store → Themes → Customize**を開き、商品テンプレートを開いて**Chargezen product widget**または**Chargezen variant cards**のブロックを追加し、テーマを保存します。 プランから始める プランの**Storefront widget**カードで**Customize widget**を選ぶと、そのプランの商品のウィジェットが開くか、新しいウィジェットの作成が始まります。 ## Product widgetのオプション * **Content**：ボタンの文言（Add to cart、Buy now）、1回限りの購入の選択肢のタイトルとサブタイトル、定期購入の選択肢のタイトル、サブタイトル、**Delivery selector label**、数量のラベル。初期値は「One-time purchase」「Subscribe and save」「Pause, skip, or cancel anytime.」です。 * **Layout**：販売元、商品名、価格、バリエーションの選択、1回限りの購入と定期購入の選択肢、お届け頻度の選択、数量の選択、Add to cart、Buy nowの表示・非表示。 * **Behavior**：**Selected by default**（Auto、One-time、Subscription）、**Shown first**、数量の上限、ウィジェットにバリエーションの画像を表示するか、テーマの商品画像を切り替えるか。 * **Rules**：確認のポップアップ付きの**Allow preorders**、警告メッセージ付きの**Confirm before purchase**、ラベルと割引率を設定する**Discount this product**、**Offer all variants as a bundle**。 * **Style**：ボタンの色と文字、文字の色、選択時の色、背景と枠線。 ## Variant cardsのオプション * **Content**：1回限りの購入と定期購入のカード、ボタンの文言、売り切れの表示、通貨記号。定期購入のタイトルでは、`{{savings}}`が割引額に置き換わります。 * **Layout**：価格、バリエーションのカードと列数、表示するカードとボタン。 * **Offers**：**Bundle (try them all)**、**Upsell**、**Buy more**、**Sell as another variant**、**Preorder**を追加します。それぞれに**Show this offer**があり、必須項目を入力するまではオフのままです。アップセルが断られたときは、別のオファーを出すか、何も出さないかを選べます。 * **Variants**：カードを価格の安い順、高い順、または任意の順に並べます。バリエーションの名前の変更、非表示、売り切れ表示ができます。 * **Behavior**：**Selected by default**。Autoは、/startと/payのリンクでは定期購入を、それ以外では1回限りの購入を選びます。 * **Style**と**Custom CSS**：色、角の丸み、文字のスタイル、ウィジェット自体のスタイルのあとに読み込まれるCSS（セレクターは`#ketonaid-widget`から始めます）。 ## 商品に使われるウィジェット **All products**に設定したウィジェットは、専用のウィジェットがある商品を除くすべての商品に表示されます。特定の商品向けのウィジェットが複数あり、同じ商品を含む場合は、**Priority**が高いほうが使われます。 ウィジェットの一覧には、各ウィジェットの**Type**、**Template**、**Status**、**Scope**、**Offers**が表示されます。**Filter**でAll、Active、Draftのウィジェットを表示し、行のメニューで**Edit**や**Delete**を行います。 ## トラブルシューティング ### 商品ページにウィジェットが表示されない * 使っている商品テンプレートにブロックが追加されていること、テーマを保存したことを確認してください。 * ウィジェットがその商品、またはAll productsに表示する設定になっていることを確認してください。 * その商品を含む別のウィジェットの優先度が高くなっていないか確認してください。 ### ウィジェットは表示されるが、定期購入の選択肢が表示されない * プランがActiveで、その商品を含み、**Online Store**チャネルがオンになっている必要があります。Online Storeに表示しないプランは、どのウィジェットにも表示されません。 * 購入者が商品ページから定期購入できるように、プランに商品を追加してください。 ### ウィジェットを保存できない ウィジェットに名前を付け、商品を1つ以上選ぶか、すべての商品に表示する設定にしてください。 ## 関連情報 * [アップセルとクロスセル](https://chargezen.com/ja/subscriptions/upsells-and-cross-sells)：1回だけの購入者を定期購入者に変えます。 * [定期購入が初めての方へ](https://chargezen.com/ja/subscriptions/getting-started)：初めてのプログラムを立ち上げます。 * 用語集：[定期購入割引](https://chargezen.com/glossary/subscribe-and-save)、[商品詳細ページ](https://chargezen.com/ja/glossary/product-detail-page)、[カートに追加](https://chargezen.com/ja/glossary/add-to-cart)。 ### 関連記事 [ #### 定期購入プランを作成 ウィジェットが提供するプラン ](https://chargezen.com/ja/docs/subscriptions/create-product)[ #### 販売プランのしくみ Online Storeチャネルが重要な理由 ](https://chargezen.com/ja/docs/subscriptions/selling-plans-explained)[ #### 自由に選べるボックスのバンドル お客様が自分で中身を選ぶボックス ](https://chargezen.com/ja/docs/subscriptions/build-a-box) このページは役に立ちましたか？ さらにサポートが必要ですか？ [サポートに問い合わせる](https://chargezen.com/docs/checkoutos/troubleshooting/support)