shopifyの初期状態では“ニュース”というブログが用意されています。 今回制作するコンテンツページは、ニュースとは別に“ストーリー”というブログを作成して使います。
ブログ記事用テンプレートを作成
最初に“story”のブログ記事用テンプレートを作りましょう。 コレクションと同じく、ブログもテンプレート複数用意することで、ブログごとにページレイアウト・見え方を変えることができます。
テーマのコード編集画面を開きます。 テンプレート のすぐ下にある「新しいテンプレートを追加する」をクリック。
ウィンドウで以下のように入力します。
- 作成するテンプレートを選択する：article
- ファイル形式：JSON
- ファイル名：article.story.json
完了ボタンをクリックすると、ファイルが作成されます。
これで新しいテンプレートの作成は完了。 コード編集画面左上のアイコン（閉じる）で、ストアダッシュボードに戻ります。
ブログ用メタフィールドの定義
ストーリーブログでは、関連する商品をコンテンツ下に掲載します。 載せたい商品を手動でピックアップできるよう、メタフィールドを使います。
ストア管理画面の左下にある「設定」をクリック。 メタフィールド > ブログ記事 を開きます。
定義を追加 でブログ記事用のメタフィールドを作成します。
ブログ記事メタフィールドの、名前、ネームスペースとキー、説明を入力します。 どれもお好きに設定いただけます。
本記事ではネームスペースとキーを「related.product」としました。
ここは、後ほど行うテーマカスタマイズで使用します。
コンテンツタイプを選択するから、商品を選択します。
その下で商品のリストを選択して、保存してください。
メタフィールドができたら、設定は完了です。
新しいブログを追加する
ストアダッシュボードのメニューから、オンラインストアを選びます。 小メニューの中から“ブログ記事”を選択します。
記事が１つもない状態だと、下図のようになっています。 「ブログ記事を作成する」を選択してください。
ブログ記事作成画面が開きます。
1.基本登録
ブログ記事コンテンツ
タイトル、コンテンツ、抜粋を入力します。 今回はテーマ制作のための架空ストアですので、適当に打ちます。
記事のサムネイル登録
ストーリーページの構想では、ページのトップ画像としてもサムネイルを使います。 ですので、一般的なモニター幅まで広げても良いよう、大きめの画像を用意します。
本レッスンで使用している画像は、素材「blogs_story」フォルダ内にあります。
サムネイル画像は、以下の写真素材を利用させて頂いています。
※素材以外の画像をご利用いただいても構いません
2.ブログ/テンプレート設定
新しいブログを作成する
サムネイル設定箇所の下に“組織”という設定箇所があります。 ブログのセレクトから「新しいブログを作成する」を選択。
下にブログタイトルの入力欄が現れます。 新しく作りたいブログの名前を打ち込んでください。
この状態で保存すると、ブログ記事・新しいブログがまとめて作成されます。
保存ボタンを押してみましょう。 組織 > ブログ の表示が以下のようになれば、ブログの作成に成功しています。
テーマテンプレートを選択
ブログ選択の下にある“オンラインストア”のテーマテンプレートを切り替えます。 最初に作った「story」が選択肢にあるはずです。そちらを選んでください。
選択したら保存ボタンで、保存します。
3.メタフィールドで商品を選択
ページ最下部にあるメタフィールドを設定します。 「すべて表示」をクリックして、メタフィールド設定画面を開いてください。
掲載商品の右にある、灰色の入力箇所を選択。 商品を選択というボタンが表示されるので、クリックしてください。
商品一覧が表示されます。 ブログ記事のページに掲載したい商品を選んで、追加してください。
商品を設定したら、右上の保存ボタンで保存。 左上の←で通常の投稿ページに戻ります。
公開/非公開を「公開」にして、保存ボタンで確定してください。
これでブログ作成は完了です。