メタオブジェクトを活用して複数ブロックを管理

メタオブジェクトを活用して複数ブロックを管理

クーポン管理の課題

クーポン.JPでは5種類のアプリブロックを提供しています。

  • クーポン獲得ボタン
  • 商品ページ割引表示
  • 獲得クーポン一覧（全件）
  • 獲得クーポン一覧（最新N件）
  • クーポン概要

これらのブロックには、表示するクーポンを指定するための「クーポンSID」を設定します。SIDはクーポン管理画面で確認できます。

クーポン管理画面のSID表示箇所

キャンペーン終了などでクーポンを入れ替える場合、通常は各ブロックのSIDを1つずつ変更する必要があります。ブロックを複数ページに配置していると、修正箇所はさらに増えます。

この手間を解決するのが、Shopifyの「メタオブジェクト」機能です。

メタオブジェクト定義を作成する

メタオブジェクトを使うと、クーポンの情報を1箇所で管理できます。まずは「定義」を作成します。

手順

  1. Shopify管理画面から「コンテンツ」→「メタオブジェクト」を開く
  2. 「定義を追加」をクリック
  3. 名前を入力（例：クーポン.JP）
  4. 「フィールドを追加」から必要なフィールドを作成

フィールド設定例

フィールド名 タイプ 用途
SID 単一行テキスト クーポンのSIDを格納
PC画像 ファイル PC用バナー画像（任意）
SP画像 ファイル スマホ用バナー画像（任意）

※ 画像フィールドは一例です。用途に応じてフィールドを追加・変更してください。

  1. 「保存」をクリック
メタオブジェクト定義画面

エントリーを登録する

定義を作成したら、実際のクーポン情報を「エントリー」として登録します。

手順

  1. 作成した定義（クーポン.JP）を開く
  2. 「エントリーを追加」をクリック
  3. 各フィールドに値を入力
フィールド 入力内容
SID クーポン管理画面で確認したSID
PC画像 バナー画像をアップロード
SP画像 バナー画像をアップロード
  1. 「保存」をクリック
エントリー登録画面

アプリブロックと連動させる

登録したメタオブジェクトを、テーマエディタでアプリブロックに紐づけます。

手順

  1. テーマエディタを開く
  2. クーポン.JPのアプリブロックを選択
  3. 「クーポンSID」の入力欄右にある「動的ソースを接続」アイコンをクリック
  4. 作成したメタオブジェクトエントリーを選択
  5. フィールド（SID）を選択
  6. 「保存」をクリック
テーマエディタで動的ソースを選択

画像フィールドも同様に、画像設定の動的ソースからメタオブジェクトを選択できます。

他のブロックにも同じ手順で設定すれば、すべてのブロックがメタオブジェクトと連動します。

運用イメージ

メタオブジェクトを設定すると、クーポンの入れ替えは以下の手順だけで完了します。

  1. 「コンテンツ」→「メタオブジェクト」→「クーポン.JP」を開く
  2. エントリーのSIDを新しいクーポンのSIDに変更
  3. 必要に応じて画像も差し替え
  4. 「保存」をクリック

テーマエディタを開く必要はありません。メタオブジェクトの1箇所を変更するだけで、連動しているすべてのブロックに反映されます。

まとめ

  • クーポン.JPのブロックを複数配置している場合、入れ替え作業が煩雑になる
  • メタオブジェクトを使えば、SIDや画像を1箇所で管理できる
  • クーポン変更時はメタオブジェクトを更新するだけで全ブロックに反映
ブログに戻る