新BOX機能：親商品の固定金額で販売する（バリエーション商品を個々に表示する）

こちらのページの設定を行うことで、商品は下記の状態となります。

• お客様自身が好きな商品を組み合わせることが可能

• 子商品の組み合わせに関わらず、常に親商品の価格（＝固定の金額）で販売できる

• バリエーション商品を個々に並べて表示

  ※バリエーションをまとめて表示させたい場合はこちら

• 2個セットと、4個セットなど、セット個数を選択できる

【親商品】

1. お客様に選択してもらう個数をバリエーション登録する

   例）

   ・2個セット：2,000円

   ・4個セット：4,000円

   

2. それぞれに在庫を設け、「公開」状態にする

   ※在庫追跡が不要な商品の場合、「数量を追跡しない」設定でも構いません。

【子商品】

1. 新規で商品登録

2. 在庫を設け、「公開」状態にする

   ※在庫追跡が不要な商品の場合、「数量を追跡しない」設定でも構いません。

1. 左メニューのプラン設定を押下し、プランの作成＞BOX定期プランの作成をクリック

   

2. プランの共通（プラングループ）設定を行う

3. BOX設定を行う

   下記3点を行う

   ・親商品の固定価格で販売するを選択

   ・BOXタイトルを入力

   　※入力内容は添付のハイライト箇所に表示されます。

   

   ・BOXの説明

   　※入力内容は、添付ハイライト箇所に表示されます

   　※HTMLを入力することも可能です

   

4. 親商品設定を行う

   親商品を一つ選択。

   ※詳細な設定（各バリエーションに応じた名称・子商品個数など ）は、7. BOX販売設定にて行ってください。

5. 子商品設定を行う

   下記2点を行う

   ・BOXにて選択させたい商品を選択。

   ・バリエーション選択を有効にするを無効にする

   ※この設定を有効にすると、バリエーションを持つ子商品は1つの商品としてまとまって表示され、バリエーションはセレクトボックス形式で選択できるようになります。

   参考：新BOX機能：親商品の固定金額で販売する（バリエーション商品をまとめて表示する）

   

6. プラン設定（周期、割引設定等）

   下記3点を登録。

   複数周期を選択できるようにしたい場合は、「プランを追加」の上、ご希望の購入間隔のプランを作成してください。

   ・プランタイトル　※必須

   　※添付動画箇所に反映されます。

　 ・購入間隔　※必須

　 ・ 割引設定　※任意

7. BOX販売設定

   下記4点を設定し、保存します。

   ・親商品のバリエーションごとのセット名称　※必須

   　※添付動画部分に反映されます

　　・親商品のバリエーション　※必須

　　・選択できる子商品個数　※必須

　　・そのバリエーションを選択した場合に選択できるプラン　※必須

8. 「購入手続きに進む」ボタン色の調整（任意）

   「購入手続きに進む」ボタンの色は、テーマに適用されているCSSファイルにスタイルを追記することで変更できます。

   【手順】

   • theme.liquid や layout/theme.liquid を参照し、テーマ全体に適用されているCSSファイルを特定します（base.css等）

   • 特定したCSSファイルの末尾などに、以下のコードを追記してください

     ※色コードは一例です。ストアのデザインに合わせて調整してください。

/* 有効状態のボタン色 */
.huckleberry-box-setting-next-button:enabled {
background-color: #007bff; /* ボタン背景色 */
color: white;/* ボタン文字色 */
}

/* 無効（disabled）の状態のボタン色 */
.huckleberry-box-setting-next-button:disabled {
background-color: #ccc; /* 背景色 */
color: #888;/* ボタン文字色 */
}

BOX商品を購入する

1. BOX親商品ページへアクセス、あるいはBOXページURLをコピーして開く

2. セット数、プラン名を選択

3. 子商品を選択

4. 「購入手続きに進む」をクリック

   チェックアウト画面では、親商品の価格が残り、子商品の価格は無料となります。

   

 マイページからの商品変更

1. 定期購買詳細の「BOXの商品を変更する」をクリック

2. 子商品を変更して「保存」をクリック

   

 定期購買アプリ管理画面からの変更

1. 定期購買詳細の「BOXの変更」をクリック

2. 子商品を変更して「保存」をクリック

   

サンプルコード：　（適宜ご変更ください）

<h2 style="font-size:3rem;">BOXをご購入いただく手順</h2>
<img src="https://cdn.shopify.com/s/files/1/0668/3780/7335/files/Home.png?v=1726634119" style="width: 100%;margin: 0 auto;">
<h3 style="font-size:2rem;">購入にあたっての注意事項</h3>
<div>
<ul>
<li style="text-align:left;">規定数以上選択している場合は「次へ」ボタンが押せません</li>
<li style="text-align:left;">注意事項</li>
<li style="text-align:left;">注意事項</li>
<li style="text-align:left;">注意事項</li>
</ul>
</div>