Shopifyのブログをカスタマイズし、関係する商品を掲載する【ECサイト制作ビギナー】

by TAKADA

｜ 15439 PV ｜ 2023.01.17

favorite_border

商品の認知度アップやユーザー獲得に、コンテンツマーケの一環として活用したいブログ機能。Shopifyブログ＝シンプルな印象がありますが、ブログを複数作って、テンプレートを分けるとデザインも活用幅も大幅にアップできます。

メタフィールドを使って、ブログ記事ページに「このページでご紹介した商品」という商品紹介・リンクも設置しちゃいましょう。コピペできるLiquid＆CSSもあるので、コードを書くのが苦手な方もお試しいただけます。

制作ストア・今回の目標

制作内容の詳細

ストーリー用にブログを作成する

ブログ記事用テンプレートを作成
メタフィールドを作成する
新しいブログを追加する

Shopifyテーマをカスタマイズする

storyブログ用のセクションを作り、適用する
ブログ記事のトップにサムネイルを表示
メタフィールド商品を表示するセクションを作る
カスタマイズ画面からセクションを追加
トップページから新着記事を表示する

制作ストア・今回の目標

Shopifyで架空の和菓子屋『江戸屋』のECサイトを制作する、という想定です。
テーマはShopifyデフォルトテーマ“Dawn”をベースにカスタマイズしています。

詳細は、下記記事を参照してください。

Skillhubブログ

Shopifyの狭い商品説明部分をカスタマイズ！【ECサイト制作ビギナー】

今回の目標は「ブログページのカスタマイズ」です。
以下のことができるようになります。

Shopifyのブログ機能を用途に合わせて使い分ける
ブログのテンプレートを分け、見た目を変えられる
簡易版LPのようなページをShopifyに追加できる
ブログ記事ページに、それぞれ関連商品を表示する

制作内容の詳細

商品の魅力を伝えるためのコンテンツページを、Shopify1つで作れるようにカスタマイズします。メインコンテンツ部分は運営者が制作・更新し、季節や新商品発売などに応じて随時ページを増やしていくイメージです。

【掲載するストーリーと商品へのリンク例】

お店自慢の「あんこ」
→伝統のあんこ製法を紹介/あんこが使われている商品へリンク
食べられる宝石「琥珀糖」
→琥珀糖とは何かを紹介/販売中の琥珀糖商品へリンク

Shopifyでこうしたページは、前回使用したコレクション機能、ページ機能、ブログ機能の３つで作成することが出来ます。

今回は、ブログ機能で上図のようなコンテンツページを作れるようにします。
ブログ機能を使用するのは、簡単にトップページから新着順で記事リンクを作れるためです。新しいページができるたびカスタマイズ画面から設定しなくても良い＝運営者が量産していくにあたって手間が少なく済みます。

下図は本記事で行うブログページカスタマイズの完成イメージです。

ストーリー用にブログを作成する

shopifyでは複数のブログを作成することが可能です。
初期状態では“ニュース”というブログが用意されています。今回制作するコンテンツページは、ニュースとは別の“ストーリー”というブログを作成して使います。ストーリー用のブログ記事テンプレートも作成すれば、レイアウトもカスタマイズできます。

ブログ記事用テンプレートを作成

最初に“story”のブログ記事用テンプレートを作りましょう。

テーマのコード編集画面を開きます。
テンプレートのすぐ下にある「新しいテンプレートを追加する」をクリック。

ウィンドウで以下のように入力します。

作成するテンプレートを選択する：article
ファイル形式：JSON
ファイル名：article.story.json

完了ボタンをクリックすると、ファイルが作成されます。

これで新しいテンプレートの作成は完了。
コード編集画面左上のアイコン（閉じる）で、ストアダッシュボードに戻ります。

メタフィールドを作成する

ストーリーブログでは、関連する商品をコンテンツ下に掲載します。
載せたい商品を手動でピックアップできるよう、メタフィールドを使います。

ストア管理画面の左下にある「設定」をクリック。
メタフィールド > ブログ記事を開きます。

定義を追加でブログ記事用のメタフィールドを作成します。

ブログ記事メタフィールドの、名前、ネームスペースとキー、説明を入力します。
どれもお好きに設定いただけます。

本記事ではネームスペースとキーを「related.product」としました。
ここは、後ほど行うテーマカスタマイズで使用します。

コンテンツタイプを選択するから、商品を選択します。

その下で商品のリストを選択して、保存してください。

メタフィールドができたら、設定は完了です。

新しいブログを追加する

ストアダッシュボードのメニューから、オンラインストアを選びます。
小メニューの中から“ブログ記事”を選択します。

記事が１つもない状態だと、下図のようになっています。
「ブログ記事を作成する」を選択してください。

ブログ記事作成画面が開きます。

1.ブログ記事コンテンツの入力

タイトル、コンテンツ、抜粋を入力します。
今回はテーマ制作のための架空ストアですので、適当に打ちます。

2.記事のサムネイルの登録

ストーリーページの構想では、ページのトップ画像としてもサムネイルを使います。
ですので、一般的なモニター幅まで広げても良いよう、大きめの画像を用意します。

本記事では切り分けて布巾の上に置かれた琥珀糖の写真素材 - ぱくたそを、1920px × 1080pxにして使用させていただきました。
見本は中央に文字入れをしていますが、写真のみでも構いません。

3.新しいブログを作成する

サムネイル設定箇所の下に“組織”という設定箇所があります。
ブログのセレクトから「新しいブログを作成する」を選択。

下にブログタイトルの入力欄が現れます。
新しく作りたいブログの名前を打ち込んでください。

この状態で保存すると、ブログ記事・新しいブログがまとめて作成されます。

保存ボタンを押してみましょう。
組織 > ブログの表示が以下のようになれば、ブログの作成に成功しています。

4.テーマテンプレートを選択

ブログ選択の下にある“オンラインストア”のテーマテンプレートを切り替えます。
最初に作った「story」が選択肢にあるはずです。そちらを選んでください。

選択したら保存ボタンで、保存します。

5.メタフィールドで商品を選択

ページ最下部にあるメタフィールドを設定します。
「すべて表示」をクリックして、メタフィールド設定画面を開いてください。

掲載商品の右にある、灰色の入力箇所を選択。
商品を選択というボタンが表示されるので、クリックしてください。

商品一覧が表示されます。
ブログ記事のページに掲載したい商品を選んで、追加してください。

商品を設定したら、右上の保存ボタンで保存。
左上の←で通常の投稿ページに戻ります。

公開/非公開を「公開」にして、保存ボタンで確定してください。

これでブログ作成は完了です。

Shopifyテーマをカスタマイズする

作成したブログ記事を使って、Shopifyのテーマをカスタマイズしていきましょう。

storyブログ用のセクションを作り、適用する

コード編集画面で、セクションの下の「新しいセクションを追加する」をクリック。
main-article-story.liquidを作成してください。

セクションディレクトリの中から、main-article.liquidを探して開きます。
main-article.liquid中のコードをすべて選択してコピー。
新しく作ったmain-article-story.liquidに貼り付けて、保存してください。

最初に作ったテンプレートファイル article.story.jsonを開きます。

4行目、main > typeの値をmain-article-storyに変更します。

変更したら、保存ボタンで上書きしてください。

article.story.jsonと、main-article.liquidはもう使用しません。
紛らわしいので × を押して、閉じておいてください。

ブログ記事のトップにサムネイルを表示

main-article-story.liquidで、ブログ記事ページの見た目をカスタマイズします。

1.デフォルトの表示から、修正箇所を探す

デフォルトのブログ記事セクションでも、記事のサムネイルを上部に表示はできます。
ただ、サイドバーの設定で「画像に合わせる」を選択しても、表示幅が限られています。大きな画像を用意しても、一定のサイズ以上にはならない形です。

確認してみると、画像が一定幅までしか広がらない主な原因はCSSのようです。
画像を囲うdiv.article-template__hero-containerの、max-widthが130remになっています。

2.画像の幅を調整する

main-article-story.liquidで、ブロック“記事のサムネイル”の表示箇所を探します。
{%- when 'featured_image'-%} から下が該当します。

{%- when 'featured_image'-%}の数行下に、以下のような記述があります。

<div class="article-template__hero-container" {{ block.shopify_attributes }}>

max-widthが130remのarticle-template__hero-containerクラスです。
この幅上限を上書きするために、divタグにidを追加しましょう。

main-article-story.liquid

<div id="story-top" class="article-template__hero-container" {{ block.shopify_attributes }}>

追加したidstory-topを使って、デフォルトのCSSを上書きします。
今回はカスタマイズ用CSSは、1つのCSSファイルにまとめて書いていきます。

edoya.css

/* =============================================
/  article
/============================================ */
#story-top.article-template__hero-container{
  max-width: 100%;
}

両方のファイルを上書き保存してください。

3.imgタグのsizes属性を変更

{%- if article.image -%}の中にある、imgタグのsizes属性を少しだけ変更します。
{{ settings.page_width | minus: 100 }}を{{ article.image.width }}に変えてください。

行ごと、以下のコードに置き換えていただくと簡単です。

main-article-story.liquid

sizes="(min-width: {{ settings.page_width }}px) {{ article.image.width }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"

imgのsrcset属性とsizes属性

sizes属性は、srcset属性の画像からブラウザが最適な画像を選ぶ時に使います。
元コードでは最大が「page_widthクラスの幅（テーマ設定 > レイアウトの幅）-100」pxだったのを、「サムネイルにアップロードした画像の幅」px に変更しています。

srcset属性とsizes属性については、下記記事の説明が分かりやすいです。

外部リンク

pictureタグとsrcset属性の違い。超わかりやすく

上書き保存できたら、プレビューを確認してみましょう。
サムネイル画像が大きく表示されていれば成功です。

4.CSSで見た目を調整（例）

記事ページのトップにサムネイルを大きく表示する設定はできました。
あとはお好きに、CSSでイメージした表示、見やすい表示に調整すればOKです。

例えば、見本は画像サイズを1920px × 1080px（アスペクト比16：9）にしています。
スマホで見るときは良いですが、PCモニターだと画像でいっぱいになってしまいます。ちょっと高さを短くしたいですね。

デザインでは画像の右下・左下が丸まっていたので、その辺もCSSで対応しましょう。

edoya.css

/* =============================================
/  article
/============================================ */
#story-top.article-template__hero-container{
  max-width: 100%;
}

#story-top.article-template__hero-container .media{
  background: inherit;
}

#story-top.article-template__hero-container img{
  border-radius: 0 0 25% 25%;
}

/* 画面幅 990px以上の場合
/======================= */
@media screen and (min-width: 990px) { 
  #story-top.article-template__hero-container .media{
    padding-bottom: calc(625px + 2rem) !important;
  }

  #story-top.article-template__hero-container img{
    height: 625px;
  }
}

作りたかった形になりました。

【オプション設定】

画像だけであれば、上のCSSだけでも大丈夫。
ですが、見本のように画像に文字入れをしていると、画面サイズが大きいと文字が切れてしまう可能性があります。稀に2560px × 1140pxやそれ以上のディスプレイを使われている方もいるので、保険のスタイルを指定しておきます。

/* 画面幅 1920px以上の場合
/======================= */
@media screen and (min-width: 1920px) {
  #story-top.article-template__hero-container{
    max-width: 1920px;
  }

  #story-top.article-template__hero-container img{
    border-radius: 0 0 50% 50%;
  }

切れても問題ないサムネイル画像を使う場合、上記の設定は無くても構いません。
コレクションページを作った時の方法で、画像上にタイトルを表示させるなどの方法も使えます。デザインやストア運営者の要望に合わせて設定してください。

Skillhubブログ

Shopifyのコレクションで「カテゴリー」を作る【ECサイト制作ビギナー】

ブログのコンテンツ幅を広げたい時は…

タイトルやコンテンツ部分は、幅が狭く設定されています。
テーマのカスタマイズ画面で“ページの幅”を変更しても変わりません。

これは「page-width--narrow」というクラスが原因です。
CSSでmax-width: 72.6rem ≒ 726pxが設定されています。

商品ページなどと揃えたい、という時はセクションのliquidファイルから「page-width--narrow」クラスを取り除くと良いでしょう。

メタフィールド商品を表示するセクションを作る

ブログ記事（コンテンツ）下に、メタフィールドで設定した商品を表示させます。

メタフィールドで設定した商品表示部分は、他のブログを作った時にもカスタマイズ画面から使えるよう、独立したセクションとして作ります。
新しいセクションを追加するから、article-metafields-products.liquidを作成します。

コードを書く

article-metafields-products.liquidに必要な記述を書いていきます。
1行目では作成したメタフィールドのネームスペースとキーを使って情報を変数「metafields-products」に代入しています。別のネームスペースとキーを設定している場合は、=の右側を変更してください。

article-metafields-products.liquid

{%- assign metafields-products = article.metafields.related.product -%}

{%-  if metafields-products != blank -%}
  <section class="page-width element-margin-top">
    {%- if section.settings.heading != blank -%}
      <h2 class="title {{ section.settings.heading_size }}">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}
    {%- for product in metafields-products.value  -%}
        <ul class="list-unstyled">
          <li class="metafields-product">
            <div class="metafields-product_img">
              <img src="{{ product.featured_image | img_url: 'large'  }} "  alt="{{ product.featured_image }}">
            </div >
            <div  class="metafields-product_txt">
              <div>
                <h3>{{ product.title }}</h3>
                <p class="right">{{ product.price_min | money_without_currency }}円（税込）~</p>
                <p>{{ product.metafields.custom.description | truncate: 150 }}</p>
              </div>
              <div class="center">
                <a class="button btn_link text-white" href="{{ product.url }}">{{ section.settings.btn_text }}</a>
              </div>
            </div >
          </li>
        </ul>
    {%- endfor -%}
  </section>
{%- endif -%}

{% schema %}
  {
    "name": "関連商品（メタフィールド）",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "セクションタイトル",
        "default": "こちらのページでご紹介した商品"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          }
        ],
        "default": "h2",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "text",
        "id": "btn_text",
        "label": "ボタンテキスト",
        "default": "詳細を見る"
      }
    ],
    "presets" : [
      {
        "name" : "関連商品（メタフィールド設定）"
      }
    ],
    "templates" : [
      "article"
    ]
  }
{% endschema %}

edoya.css

.metafields-product{
  margin-bottom: 6rem;
}
.metafields-product img{
  max-width: 100%;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) { 
  .metafields-product{
    display: flex;
  }
  .metafields-product_img{
    flex: 3;
    margin-right: 2.5rem;
  }
  .metafields-product_txt{
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .metafields-product_txt h3{
    margin-top: 0;
  }
  .metafields-product_txt .btn_link{
    margin-bottom: 30px;
  }
}

商品説明として呼び出しているproduct.metafields.custom.descriptionは、Shopifyの狭い商品説明部分をカスタマイズ！【ECサイト制作ビギナー】で作成したメタフィールドを呼び出しています。
また、Liquidファイルの記述内容は、下記記事の合体・アレンジとなっています。