Q&A

ショップページ配下の商品詳細ページに単品商品と定期商品の購入を切り替えるボタンは設置できますか?

ショップページ配下の商品詳細ページに単品商品と定期商品の購入切り替えのボタン設置は可能です。

カスタマイズ機能で設置する場合

単品商品に対して1つの定期商品を設定する場合

単品として登録している商品に「併売商品」として定期商品を設定し、ノーコードで購入切り替えボタンを設定する方法です。
※こちらの方法は、basic theme の[バージョン:1.7.0]及び、テーマ未適用状態にて利用できます。

  1. 単品商品に「併売商品」で定期商品を設定する
    商品管理 > 商品管理 > 編集」の「併売商品」に、商品詳細ページで切り替え対象とする定期商品を設定
    スクリーンショット 2023-11-28 18.42.02.png
  2. 「ショップ管理 > テーマ管理 > カスタマイズ」にて「商品詳細画面」に切り替える
  3. 「セクション > コンテンツ」配下の「併売商品」の目のマークを活性化させ、保存する
    スクリーンショット 2023-11-28 18.39.42.png

単品商品、定期商品関わらず設定する場合

単品商品、定期商品関わらず切り替えボタンを設置したい場合、本設定を行うことで可能となります。
basic theme は[バージョン:1.16.0] 以降で利用できるようになります。

1. ショップの機能設定 の「併売商品複数設定」を「有効」に設定します。
※単品/定期のみの切り替えの場合は本設定は有効にする必要はありません。また、本設定を有効にした場合はテーマカスタマイズ>商品詳細ページ>コンテンツ項目の順番並び替えができなくなりますのでご留意ください。
スクリーンショット 2024-06-10 15.53.34.png

2. 併売商品を設定したい商品を編集します。
スクリーンショット 2024-06-10 15.55.16.png

併売商品として設定できる組み合わせは以下になります。

単品商品 単品商品
単品商品 定期商品
単品商品 セット商品 (単品、定期)
単品商品 頒布会商品
定期商品 単品商品
定期商品 定期商品
定期商品 セット商品 (単品、定期)
定期商品 頒布会商品

商品の設定を行ったのち、ショップの商品詳細画面で併売商品の表示、購入へ進めることができます。
スクリーンショット 2024-06-10 16.05.33.png

「通常購入」タブ:単品商品が表示されます。
「定期購入」タブ:定期商品が表示されます。
「関連商品」タブ:併売商品を設定した商品に設定されている「関連商品」が表示されます。
※関連商品については【商品管理】関連商品管理を参照ください。
※関連商品についてはbasic_theme にて編集ができます。詳細はテーマ管理 カスタマイズ 商品詳細画面を参照ください。
※basic_theme ご利用の場合、テーマのカスタマイズにて「併売商品」を活性化する必要があります。
スクリーンショット 2024-06-11 14.30.01.png

コーディングで設置する場合

テーマ管理より切り替えボタンの記述をショップで行う必要があります。
※ショップページ配下の商品詳細ページのデフォルト仕様では、単品/定期商品のいずれか商品のみ、購入ボタンが表示されます。

ショップページ配下の商品詳細ページで「単品商品」または「定期商品」を選択し、購入まで可能な導線とする場合は「商品管理 > 商品管理 > 該当商品」の「タブ:基本設定(商品ページ情報)」画面の「詳細」(「詳細(モバイル)」)に、単品商品または定期商品を追加するボタンを記述のうえ、テーマ管理内の商品詳細画面ファイルに「詳細」を呼び出す変数を記述する方法があります。
商品詳細画面に「商品詳細」を呼び出す変数については、以下テーマガイドをご確認ください。
テーマガイド:商品詳細画面

たとえば、単品商品の「詳細」項目に「定期商品購入ボタン」を設置し、対象の商品をカートに追加する記述を行う場合は、以下ご参照ください。
ブランドサイトなど他ドメインからecforceのショップカート画面およびLP画面に購入遷移させる方法

なお、記述を追加する際は、個数選択プルダウンおよびボタンクリック時に、カートに追加させたい「variant_id(商品のSKU ID)」と「quantity(数量)」を指定するような設計にする必要があります。

プルダウンおよびボタンなど具体的な記述方法やテーマ管理の「アクション > コードの編集」からファイル編集をしたテーマはサポート対象外となります。

この記事の目次

このセクションの記事

Q&A