【Shopify】組み合わせを選べるセット販売をアプリなしで実装する方法

Shopifyで組み合わせを選べるセット販売機能を無料でカスタマイズする方法を紹介します。

複数種類の商品から好きなものを3つ選んでセット購入できるようにしたかったものの、既存アプリでは商品数や機能によって有料プランが必要になるケースもあります。

そこで今回は、ハックルベリーの定期購買アプリのBOX機能を参考にしながら、テーマファイルをカスタマイズしてアプリなしで実装しました。

今回のゴールは

組み合わせを選べる商品ページを作成する
その組み合わせの内訳をカートページや注文ページにも連携する

この記事を書いた人

くるみ

マーケターとしてEC運用やCRM施策を進める中で、やりたいことを実現するために検証・実装した内容を初心者目線でまとめています。

Shopifyで選べる組み合わせのセット販売ができる仕組み

Shopifyでは通常、商品を1つずつ販売する形が基本ですが、工夫することで「複数商品から好きなものを選べるセット販売」を実現できます。

例えば、

好きな商品を3点選んで○○円
試供品を自由に組み合わせる
フレーバーを選べるセット商品
選べるギフトセット

といった販売方法も可能です。

今回の実装では、セット商品を1つの商品としてカートに追加しながら、顧客が選択した商品の情報を同時に保持する仕組みを利用しています。

組み合わせ販売の仕組み

この仕組みの中心となるのが、Shopify標準機能である「line item properties（ラインアイテムプロパティ）」です。

line item propertiesを活用すると、商品そのものの情報とは別に、顧客が選択した内容をカートへ保存できます。

今回のような選べるセット販売では、

商品A
商品B
商品C

といった選択結果をカートへ連携し、注文時にも確認できるようにしています。

そのため、「1つの商品として販売しながら、中身は自由に選べる」という仕組みを実現できます。

line item propertiesとは

line item propertiesとは、カートに追加された商品へ任意の情報を付与できるShopify標準機能です。

例えば以下のような情報を保存できます。

選択した商品A・B・C
セット名
名入れ内容
カスタムメモ
オーダー内容

保存された情報はカート画面だけでなく、注文管理画面にも表示されます。

そのため、購入者がどの商品を選択したのかを運営側でも確認でき、セット販売やオーダーメイド商品の管理にも活用されています。

なぜ複数選択できるのか

通常のShopifyでは「1商品＝1バリエーション」という構造になっています。

しかし今回の方法では、顧客が選択した商品の情報をline item propertiesへ保存することで、複数商品の組み合わせを1つの商品として扱っています。

流れとしては以下の通りです。

顧客が商品を選択する
選択内容をline item propertiesへ保存する
セット商品をカートへ追加する
カート・注文画面で選択内容を確認する

つまり実際の購入は1つの同一セット商品で、その中身を顧客が自由に選択できるというわけです。

これにより、「好きな商品を3点選んで○○円」といった柔軟な組み合わせ販売をアプリなしで実現できます。

選べるセット機能を実装するメリット

このような組み合わせ販売は、コスメや食品、健康食品やサプリメント、試供品販売など幅広い業種で活用できます。

顧客側のメリット

例えば「好きな商品を3点選んで○○円」といった販売が可能になり、以下のような価値を提供できます。

自分の好みに合わせて組み合わせを選べる
既存の固定セットより満足度が高い
「選ぶ楽しさ」が購買体験になる

結果として、通常のセット販売よりもコンバージョン率が上がるケースもあります。

販売側のメリット

ショップ運営側にも大きなメリットがあります。

セット商品を個別に大量作成する必要がない
商品管理の手間が減る
在庫は単品ベースで管理できるため運用がシンプル

特にSKUが多いショップでは、商品設計の効率化に大きく貢献します。

アプリを使わないメリット

この仕組みをテーマカスタマイズで実装する場合、アプリを使わないことで以下のメリットがあります。

月額コストがかからない
UIや挙動を自由に設計できる
アプリ依存がなくなるため長期運用が安定する
タグや商品構造が複雑化しにくい

アプリの場合は短時間で実装できる反面、UIや仕様の制約が出るケースもあります。

Shopifyの選べるセット販売は、line item propertiesを活用することでアプリなしでも実装可能です。

重要なのは、

商品は1つとして扱う
中身は顧客が自由に選ぶ
カートと注文で内訳を保持する

という構造設計です。

アプリを使う場合の比較

代表的なアプリは以下のようなものがあります。

アプリ	月額	できること	制約
Shopify Bundles	無料	基本的なセット販売	UIカスタマイズ不可
Fast Bundle	有料	選べるセット・BOX販売	細かいUI調整は制限あり
PickyStory	有料	高度なバンドル・アップセル	機能は強いが複雑

アプリは「早く実装する」には最適ですが、細かいUX設計には制限があります。

完成イメージ

商品ページ

PCでは4列、SPでは2列にしてみました。3セット選択するまで「カートに入れる」ボタンは無効化しています。

カートページ

組み合わせを選べるセット商品を販売する方法

流れは以下の通りで割とシンプルです。

選べるセット商品用の商品ページを作成
テーマファイルに新しくテンプレートとセクションを追加
カスタマイズ画面で新設したテンプレートにサムネと表示する商品を設置
挙動を確認後、実装して１で作った商品ページのテンプレートを2で新設したものに設定

ではそれぞれ見ていきましょう。

選べるセット商品用の商品ページを作成

通常のshopifyでの商品登録と同様です。ただし、お客様の選ぶ商品によって組み合わせが変わるので在庫は個々の商品を手動で管理する必要がある点は要注意。

テーマファイルに新しくテンプレートとセクションを追加

それぞれ以下のように名前を付けましたが、テンプレートでproductとliquidタイプを選ぶこと以外は自分で管理しやすい名前にしていただいて大丈夫です。

テンプレート名：product.bundle.liquid

セクション名：product-bundle.liquid

それぞれのファイルに書くコード

テンプレートファイルには「{% section ‘product-bundle’ %}」

セクションファイルには以下を入れました。ここではカートに追加したい商品ページ（選べるセット）をバリアントIDで指定するようにしているので、★の箇所に該当の数値を入れてください。

また、見栄えも好きなようにhtmlやCSSをいじって調整してください。

{% schema %}
{
  “name”: “Product Bundle”,
  “settings”: [
    {
      “type”: “image_picker”,
      “id”: “thumbnail_image”,
      “label”: “サムネイル画像”
    }
  ],
  “blocks”: [
    {
      “type”: “product”,
      “name”: “選択可能な商品”,
      “settings”: [
        {
          “type”: “product”,
          “id”: “bundle_product”,
          “label”: “商品を選択”
        }
      ]
    }
  ],
  “presets”: [
    {
      “name”: “Product Bundle”,
      “blocks”: []
    }
  ]
}
{% endschema %}

<div class=”product-bundle”>
  <!– 📌 サムネイル画像 –>
  <div class=”bundle-thumbnail”>
    {% if section.settings.thumbnail_image != blank %}
      <img src=”{{ section.settings.thumbnail_image | img_url: ‘master’ }}” alt=”サムネイル”>
    {% endif %}
    <h2 class=”bundle-title”>{{ product.title }}</h2>
    <p class=”bundle-price”>{{ product.price | money }}（税込・送料込み）</p>
  </div>

<!– 📌 選択可能なフェイスパック一覧 –>
  <div class=”bundle-options”>
    {% for block in section.blocks %}
      {% if block.settings.bundle_product != blank %}
        {% assign product = all_products[block.settings.bundle_product] %}
        <div class=”bundle-option”>
          <img src=”{{ product.featured_image | img_url: ‘medium’ }}” alt=”{{ product.title }}”>
          <p class=”bundle-product-title”>{{ product.title }}</p>
          <div class=”quantity-wrapper”>
            <button type=”button” class=”quantity-btn minus” data-title=”{{ product.title }}”>−</button>
            <span class=”quantity-value” data-title=”{{ product.title }}”>0</span>
            <button type=”button” class=”quantity-btn plus” data-title=”{{ product.title }}”>＋</button>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>

<!– 📌 カートに追加するボタン –>
  <form method=”post” action=”/cart/add”>
    <input type=”hidden” name=”id” value=”{{ product.variants.first.id }}”>
    <div id=”selected-items”></div>
    <button type=”submit” id=”add-to-cart-btn” disabled>カートに入れる</button>
  </form>
</div>

let selectedItems = {};
  const MAX_TOTAL_QUANTITY = 3; // 3つ選ばないとカートに追加できない制御

// クリックイベント
  document.addEventListener("click", function(event) {
    if (event.target.classList.contains("quantity-btn")) {
      const productTitle = event.target.getAttribute("data-title");
      const action = event.target.classList.contains("minus") ? "minus" : "plus";

// 未選択のアイテムを 0 に初期化
      if (!selectedItems[productTitle]) {
        selectedItems[productTitle] = 0;
      }

let quantity = selectedItems[productTitle];
      let totalQuantity = Object.values(selectedItems).reduce((total, qty) => total + qty, 0);

if (action === "minus" && quantity > 0) {
        selectedItems[productTitle] -= 1;
      } else if (action === "plus" && totalQuantity < MAX_TOTAL_QUANTITY) {
        selectedItems[productTitle] += 1;
      }

// 商品ごとの数量更新
      let valueSpan = document.querySelector(`.quantity-value[data-title="${productTitle}"]`);
      if (valueSpan) {
        valueSpan.textContent = selectedItems[productTitle];
      }

updateCartButtonState();
    }
  });

// カートに入れるボタンが押されたときの処理
  addToCartBtn.addEventListener("click", function(event) {
    event.preventDefault();
    selectedItemsDiv.innerHTML = "";

let formData = new FormData();
    formData.append("id", "★"); // 商品ID（固定）
    formData.append("quantity", "1"); // カートに追加する商品の数量（固定）

// 選択された商品の情報をカートに追加
    Object.keys(selectedItems).forEach(title => {
      if (selectedItems[title] > 0) {
        formData.append(`properties[${title}]`, `${selectedItems[title]}点`);
      }
    });

// 非同期でカートに追加し、完了後にカートページへリダイレクト
    fetch("/cart/add.js", {
      method: "POST",
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log("カートに追加成功:", data);
      window.location.href = "/cart";
    })
    .catch(error => {
      console.error("カート追加エラー:", error);
    });
  });

// 「カートに入れる」ボタンを有効化・無効化する
  function updateCartButtonState() {
    const totalQuantity = Object.values(selectedItems).reduce((total, qty) => total + qty, 0);
    const hasItems = totalQuantity === MAX_TOTAL_QUANTITY;
    addToCartBtn.disabled = !hasItems;
    addToCartBtn.classList.toggle("enabled", hasItems);
  }
});

</script>

カスタマイズ画面で新設したテンプレートにサムネと表示する商品を設置

カスタマイズ画面で商品ページに使用したいサムネと、選べるセットの選択肢に含めたい商品をそれぞれ設定します。

作成した商品ページに新設したテンプレートを適用

カスタマイズ画面上で挙動を確認して問題がないことが確認できてからそのファイルを格納したテーマを実装し、選べるセットの商品登録画面で新設したテンプレートを設定します。（今回の例ではbundle）

本番環境でもお試し注文をして動作確認してからリリースとしましょう。

まとめ

shopifyのDawnテーマで組み合わせを選べるセット商品を販売する方法をまとめてみました。

バージョンによって少々設定方法は異なるかもしれませんが、似たような感じでできると思います。

セクションにファイルに書くコードの設定にかなり手間取りましたが、line item propertiesを活用することでなんとかアプリなしでも複数種類の商品から好きなものを選んでセットとして購入できるようになりました。