こんにちは。FRACTAのResearch & Implementation（RI）局の杉本です。
先日、とあるオンラインストアが目にとまりました。「箱あり商品」と「箱なし商品」が同じ価格で販売されていて、商品一覧画面で判別できるようになっていたのです。（商品名に［箱あり］［箱なし］が明記されていました）
個人的には、商品や用途によって外箱が無くても構わない場合や、外箱がない方が助かる場合があります。「箱あり」「箱なし」が同じ価格で提示されている＝消費者として「選択できる」ことを嬉しく感じました。
商品そのものの情報に加えてブランド・企業の考え方が表現されることで、商品だけでなく「その考え方に賛同して、このストアで買う」ことができるところに小さな喜びがあるように思います。
近年では様々なシーンで「サステナブル」が謳われ、多様に行動・表現されており、それを受けて消費者としての自分の意識も少なからず変わっているのかもしれません。そんなことを思うと、「オンラインストアでどんな情報・表現を目にした時に、その商品・ブランド・企業を“サステナブル”と感じるのだろう？」「それをShopifyで実装するには？」について考えてみたくなりました。
本記事では、国内外のストアを参考にして着目した「サステナブルな情報」と「Shopifyでの実装方法（一例）」をご紹介します。
サステナブルを想起させる情報
そもそも、どんな情報があると「この商品/ストアはサステナブルだな」と感じるのでしょうか。いち消費者として、様々なストアを巡って考えてみました。
企業・ブランド・ストアにより様々な情報が提供されていますが、個人的には以下のような情報がある場合に「サステナブルな配慮・意識があるんだな」と率直に感じました。
- 包装の選択（箱あり/なしなど、選択肢の提示）
- 原材料（素材情報の公開）
- 価格の透明性（販売価格が適正であることの証明となるようなコストの公開。材料費、輸送費、設備費 etc.）
- サプライヤー（商品がどんな環境で製造されているか。従業員をどのように扱っているか etc.）
- 循環性（リサイクル、リユースへの考え方）
- 取得している認証の紹介（原材料、商品、サービスが外部評価を受けていることの証明）
- ドネーションに関する情報（売上の一部を寄付する仕組みを有していたり、顧客が寄付先を選択できる etc.）
- ストアがウェブアクセシビリティに対応している
Shopifyでの表現
では、先に挙げた情報をShopifyで表現したい場合、どのように実装できるでしょうか？
色々な方法がありますが、今回は運用性を加味し「商品タグ」「メタフィールド」「liquidカスタマイズ」「アプリ」を活用して、7種類のカスタマイズを実装してみました。
（Dawn バージョン11.0.0 を使用しています）
カスタマイズ1：商品一覧ページ - 「箱あり/箱なし」
方法 - 1（商品バリエーションを活用する方法）
方法 - 2（Line Item Propertiesを活用する方法）
方法 - 3（商品を分け、商品一覧で箱あり/なしを区別する方法）
カスタマイズ2：商品ページ -「原材料」
カスタマイズ3：商品ページ -「価格の透明性」
カスタマイズ4：商品ページ - 「サプライヤー」「循環性」
カスタマイズ5：商品ページ -「認証」「ドネーション」
★メタオブジェクトを活用して、情報登録・出力をさらに効率化
カスタマイズ6：チェックアウトページ -「ドネーション先の選択」
カスタマイズ7：ストア全体 - 「ウェブアクセシビリティ対応」
カスタマイズ1：商品一覧ページ - 「包装の選択」
表現したいこと
A. 包装の選択肢（箱あり/なしなど、選択肢の提示）
方法 - 1（商品バリエーションを活用する方法）
商品バリエーションを活用し、商品詳細ページで「箱あり/なし」を選択できるようにする。
（「箱あり/なし」で商品を分けずに管理できます）
カスタマイズ内容
- ［商品詳細］ 「バリエーション」で、箱の有無を選択するための「オプション名」「オプション値」を以下のように設定
運用
- 適用したい商品ごとに、同様の作業を行う。
方法 - 2（Line Item Propertiesを活用する方法）
特定の商品メタフィールドに値がある場合、商品詳細ページにその値を反映したセレクトボックスを表示する。
（「箱あり/なし」で商品を分けずに管理できます）
カスタマイズ内容
- ［商品メタフィールド］ 定義を作成
- ［商品詳細］ 作成した商品メタフィールドに値を入力
- ［liquidカスタマイズ］ buy-buttons.liquidに、特定の商品タグに対してコードを追記
- ［HTML＋CSS］ 見た目を調整
運用
- 適用させたい商品の商品メタフィールド（1.で作成したもの）に、値を入力する。
方法 - 3（商品を分け、商品一覧で差別化する方法）
特定の商品タグが付与されている場合、商品一覧ページで該当する商品情報に枠を表示する。
（商品バリエーションを用いたくない場合など、「箱あり/なし」で商品を分けて管理できます）
カスタマイズ内容
- ［liquidカスタマイズ］ main-collection-product-grid.liquidに、特定の商品タグ（今回は「箱なし」）に対して動きを制御するコードを追記
- ［HTML＋CSS］ 見た目を調整
運用
- 適用させたい商品に、liquidで指定した商品タグを付与する。
- 制御したい商品タグを変更する場合はliquidの記述を編集する。
カスタマイズ2：商品ページ -「原材料」
表現したいこと
B. 原材料（素材情報の公開）
方法
「折りたたみ可能な行」セクションのタイトル＝原材料の場合、特定の商品メタフィールドに登録した値（画像）を出力する。
→ Dawnデフォルトの同セクションではメタフィールド値が画像の場合に出力されないため、 liquidカスタマイズでメタフィールドに登録した画像を表示する。（2023/11時点）
カスタマイズ内容
- ［商品メタフィールド］ 定義を作成
- ［商品詳細］ 作成した商品メタフィールドに値を入力
- ［liquidカスタマイズ］ main-product.liquidに、メタフィールドに登録した画像を表示するコードを追記
- ［HTML＋CSS］ 見た目を調整
- ［テーマエディター］ 「折りたたみ可能な行」> “見出し” に「原材料」を入力
運用
- 商品ごとに、商品メタフィールド（ > 原材料）で画像を選択する。
カスタマイズ3：商品ページ -「価格の透明性」
表現したいこと
C. 価格の透明性（販売価格が適正であることの証明となるようなコストの公開。人件費、原材料費、輸送費、設備費 etc.）
方法
「折りたたみ可能な行」セクションで「商品メタフィールド値（テキスト）」を出力する。
カスタマイズ内容
- ［商品メタフィールド］ 定義を作成
- ［商品詳細］ 作成したメタフィールドに値を入力
- ［テーマエディター］「折りたたみ可能な行」> “行のコンテンツ”（リッチテキストエディター）で、メタフィールド値を呼び出す。
（liquidカスタマイズは行っていません）
運用
- 商品ごとに、商品メタフィールド > 各項目 に数字を入力する。
カスタマイズ4：商品ページ - 「サプライヤー」「循環性」
表現したいこと
D. サプライヤー（商品がどんな環境で製造されているか。従業員をどのように扱っているか etc.）
E. 循環性（リサイクル、リユースへの考え方）
方法
「複数列」セクションで、商品ごとに設定した「商品メタフィールド値」を出力する。
カスタマイズ内容
- ［商品メタフィールド］ 定義を作成
- ［商品詳細］ 作成したメタフィールドに値を入力
- ［テーマエディター］ 複数列 > “テキスト”（リッチテキストエディター）でメタフィールド値を呼び出す。
（liquidカスタマイズは行っていません）
運用
- 商品ごとに、商品メタフィールド > 各項目を入力する。
★メタオブジェクトを活用して、情報登録・出力をさらに効率化
上記で紹介した項目は、メタオブジェクトを活用することでより便利に情報登録・管理することもできます。
カスタマイズ5：商品ページ -「認証」「ドネーション」
表現したいこと
F. 取得している認証の紹介（原材料、商品、サービスが外部評価を受けていることの証明）
G. 参加しているドネーション（売上の一部を寄付する仕組みを有していたり、顧客が寄付先を選択できる etc.）
