ShopifyでMetaobjectを使用したLPの作成方法

How to create an LP using Metaobject in Shopify

Aug 18, 2023

Shopifyでメタオブジェクトを使用したカスタムランディングページの作成方法について説明します。
MetafieldsとMetaobjectの簡単な違いについては以下となります。


Metafields (メタフィールド): 既存のデータに対して情報を付与する。
データベースのカラムを追加するイメージです。
etc. 商品情報ごとに異なる発売日情報を定義し、商品詳細ページで表示する。
メタフィールドの詳しい説明についてはこちら 


Metaobject (メタオブジェクト): 情報自体のマスターを定義する。
データベースのテーブルを作成するイメージです。 
etc. LPのコンテンツの内容を動的変える。店舗一覧情報の店舗情報を定義する。


LPでメタオブジェクトを利用するメリットは、以下2点だと思います。 
LPのコンテンツの内容をコードを変更させることなく編集できる。Sections everywhereを使用して、カスタマイザーから直接内容を編集することも可能ですが、それを行うとsetting系のjsonを自動的に更新するため作業のコンフリクトが起きる可能性があるのでそれを防ぐことができる。
テンプレートの再利用性。同じデザインで内容を変えて複数のLPを作成したい場合にテンプレートを複製する必要がなく、作成できる。

無料テーマDownの既存セクションとメタオブジェクトを使用してノーコードでLPを作成する手順を紹介します。

1: Imagine a completed system from an existing section

Since the existing section is used, the design and contents are limited. Check what you can and use three sections this time. 

Image banner
Image with text
collage

sections every where

2: Define the metao must -do so that the content of the section can be changed dynamically and enter the contents.

SHOPIFY Management Screen> Content> Create a definition of metao must be created from the addition.
Enter and select the content content you want to change dynamically.

metaobject definatation
metaobject value

3: Create a metao must -do template from the theme customizer, place the selected section, and use the metao -do gect value.

3.1: 下画像のホームページをクリックするとメタオブジェクトテンプレートを作成が表示されるのテンプレートを作成します。
3.2: 手順1で選択した3つのセクションをセクションを追加するより追加します。
3.3: メタオブジェクトの内容を表示したい箇所に「動的ソースを挿入」から定義したメタオブジェクトを選択します。

add metaobject template
metaobject inserart

4: Added conductor to the created page

When you create a template, I think that the URL will be displayed at the bottom of the entry definition of the metao must -do, so copy it and add it to the main menu. The completion system is here.

summary

今回はメタオブジェクトを使用したカスタムランディングページ作成方法についてノーコード実装の方法を紹介しました。
カスタムセクションとメタオブジェクトを組み合わせれば、デザイン性の高い自由に編集可能なLPが作成可能です。
また、メタオブジェクトはよくある店舗一覧ページなどの店舗情報を管理するマスターとして定義するのが良い利用方法だと思います。
他にもアイデア次第で色々な利用できそうですね。

Keigo Matsunari

Keigo matsunari

Go Ride Engineer