商品情報にスキップ
1 1
公開日:2025.01.01

Shopifyのテーマ「Rise/Dawn」の特集コレクションに「商品をまとめてカートに追加する」ボタンを追加する設定例

Shopifyのテーマ「Rise/Dawn」の特集コレクションに「商品をまとめてカートに追加する」ボタンを追加する設定例

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
  • HTML/CSS
  • Javascript
詳細を表示する

すでにアプリで一括購入できる機能は多々提供されていますが、テーマ「Dawn/Rise」の特集コレクションを活かして、そのセクションにまとめ買いボタンを設置する方法です。おすすめされている商品をまとめて購入したいユーザーにとって、購入ステップを簡略化することができるため、コンバージョン率向上が期待できます。

◆実装のメリット
・複数商品の一括カート投入でユーザーの購入ステップを簡略化
・コンバージョン率向上が期待できる

◆具体的な手順
①sections/featured-collection.liquidにschemaを、ja.schema.jsonにラベル追加
②featured-collection.liquidに一括カート追加の処理を実装
③一括購入してもらいたい商品をまとめたコレクションを作成し、対象商品専用のテンプレートに特集コレクションセクションを設置してそのコレクションを指定

◆実装時の注意点
・デフォルトバリアントのみが対象となるため、バリエーション選択が必要な商品には不向きです。
・処理を簡易にしているため在庫切れ商品がある場合の処理は追加できなくなります。


テーマ「Rise/Dawn」の特集コレクションに「商品をまとめてカートに追加する」ボタンを追加する設定例


【(テーマRise/Dawnの場合)設定方法①】「sections/featured-collection.liquid」にschemaを、「ja.schema.json」にラベルを追加


【(テーマRise/Dawnの場合)設定方法②】「sections/featured-collection.liquid」のコードを編集(商品をまとめてカートに追加する処理を追加)


【(テーマRise/Dawnの場合)設定方法③】まとめてカートに追加したい商品のコレクションを作成し対象の商品のテンプレートに特集コレクションセクションを追加し、作成したコレクションをセット


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「sections/featured-collection.liquid」にschemaを追加

「ja.schema.json」にラベルを追加

「sections/featured-collection.liquid」のコードを編集

その他のJavascriptに関するTIPS