【Shopify事例】更新しやすい教室リストを実装し、運用負荷を軽減

非公開案件のため、詳細は匿名でのご紹介となります。
Shopifyを利用したサービスサイトにおいて、
「教室情報を自分で更新したい」という課題がありました。
この課題を解決するため、更新性の高い仕組みをカスタム実装しました。

課題

• 教室情報（場所・担当者・画像など）を更新したい
• デザインを崩さず情報だけ差し替えたい
• 運営担当者がノーコードで更新できるようにしたい
• 教室数が増えても管理しやすい構造にしたい

解決策

こちらがページの完成イメージです。（事例紹介用に作成しており、案件とは関係ありません。）
以下の通り、地域ボタンを押すとその地域のセクションに遷移する仕様となっています。

1. メタオブジェクトで更新性を確保

管理画面から必要な項目を入力するだけで、デザイン部分を触らずに自動でサイトに反映されるような仕組みにしました。メタオブジェクトはシンプルな画面構成のため情報を簡単に追加、削除、編集できます。

地域の部分に都道府県名を入れると自動でエリア別に振り分けられるような設計です。

受講形式も３形態からセレクタで選べるようになっています。

2. 専用セクションをLiquidで開発

ショップ全体のテーマはRiseを使用して作られています。このようなデザインのセクションテンプレートはないため、新しく上の画像のような講師一覧ページをLiquidで作りました。

Liquidでは、都道府県を６エリアに分けて、メタオブジェクトの「地域」で入れた都道府県名でエリアを判別するようにコード側で設計をしました。

メタオブジェクトで登録した情報が個別のカードに反映されるようになっています。

結果

• 運営はShopify管理画面から情報が簡単に情報が登録できるように
• コード不要で更新作業が簡単にできる
• 登録情報の編集も簡単に

---

担当領域

• Shopifyの技術実装全般（デザイン提供：別担当者）
• Liquidによるカスタムセクションの制作
• メタフィールド設計
• 運用者向けの更新マニュアル作成

まとめ

今回の事例は、Shopifyで「更新性」を重視したサイト運用を実現したい方に特に役立つ内容です。
店舗一覧ページなどにも使えます。
メタオブジェクトをうまく活用することで運営負荷を最小限にしながら柔軟な更新が可能になります。

Shopifyでこんなことできる？という疑問があればお気軽にご相談ください。無料でご相談を承っております。

ご提供サービス