今回はShopifyを使用して日本食を販売しているクライアントのために、カスタムメタフィールドを使用して自動的に生成される製品スペックテーブルを実装しました。
今回の案件でも、Shopifyのアプリストアには同様の機能を提供するアプリが存在していましたが、カスタマイズ性と毎月の使用料に関する制約があり、テーマファイルの編集とプロダクトデータを利用し、この機能を実装することにしました。
実装の背景とプロセス
背景
Shopifyのオンラインストアにおいて、製品のスペックをいかに掲載するかが、商品ページでは大変重要になります。
その際の手段としてはエディタ内のテーブル機能か、Shopifyのアプリストアの製品スペックテーブルを作成するアプリがありますが、それぞれカスタマイズ性に欠け、また毎月の使用料が発生します。
プロセス
テーマファイルを直接編集し、カスタムメタフィールドを利用して製品スペックテーブルを実装する方法を選択しました。このアプローチにより、より高度なカスタマイズが可能となり、追加の月額費用を回避できます。
今回はプロダクトのカスタムメタフィールド内にjsonデータを入力し、テーブルのデータを表示しました。
特徴と成果
特徴
- カスタマイズ性: 直接テーマファイルを編集することで、テーブルのデザインや機能を自由に調整できました。また、jsonデータを利用することで自由にデータの幅を変更することが可能です。
- コスト削減: アプリの月額使用料が不要になり、実装の際のインストールフィーのみです。
- データ統合: 既存のプロダクトデータを直接利用するため、データ管理が容易になり、テーマを変更する際にも引き続き使用できます。
成果
この実装により、製品ページはより情報豊富でユーザーフレンドリーになり、顧客の信頼と満足度が高まりました。また、長期的に見てコスト削減にも繋がっています。
画像: 実際のテーブル
画像: 商品ページ内のカスタムメタフィールド
コード例
それぞれのコードの配置場所やコードの詳細はThemeにより適宣変更してください。
インストールのご依頼も受け付けております。
snippets/product-table.liquid
このコードで、製品のメタフィールドからスペック情報を取得し、テーブル形式で表示しています。
{% if product.metafields.custom.data_table %}
{% assign display_size = false %}
{% for product in product.metafields.custom.data_table.value %}
{% if product.Height %}
{% assign display_size = true %}
{% endif %}
{% endfor %}
<div class="table100 m-b-110">
<div class="table100-body js-pscroll ps ps--active-y">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Name</th>
<th class="cell100 column2">Contents</th>
<th class="cell100 column3">Price</th>
{% if display_size %}
<th class="cell100 column4">Height</th>
<th class="cell100 column5">Width</th>
<th class="cell100 column6">Depth</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for product in product.metafields.custom.data_table.value %}
<tr class="row100 body">
<td class="cell100 column1">{{ product.Name }}</td>
<td class="cell100 column2">{{ product.Contents }}</td>
<td class="cell100 column3">{{ product.Price }}</td>
{% if display_size %}
<td class="cell100 column4">{{ product.Height }}</td>
<td class="cell100 column5">{{ product.Width }}</td>
<td class="cell100 column6">{{ product.Depth }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
カスタムメタフィールド例
[{"Name":"Frozen Soaked Salmon Roe in Soy Sauce","Contents":"20 PACK X 1.10 LB / CS","Price":"$905.85"}]
まとめ
Shopifyで製品スペックテーブルをカスタマイズすることは、顧客の購買体験を向上させるだけでなく、長期的なコスト削減にも繋がります。
アプリに頼るのではなく、テーマの直接編集を通じて、より柔軟かつ経済的なソリューションを提供することが可能です。