ここ最近でShopifyでのEC構築の相談が増えてきて徐々にナレッジも貯まりつつあるので、備忘録を兼ねて残しておきたいと思います。Shopifyは既存テーマも充実しており、それらを利用することですぐに高品質なECサイトがオープンできるのですが、やはりオリジナリティに欠けてしまいます、そのため独自のデザインでコーディングしていく必要があります。そんな時に使えるTipsをまとめてみました。   Shopifyで独自デザインのオリジナルテーマを制作する際は、全くのブランクファイルから作成されることもあるようですが、Shopify公式のテーマである「Dawn」をベースにカスタマイズしていくと、ある程度フォーマットが出来上がっている状態から構築を進めることができます。既存テーマであるため、デザインは作り込まれているのですが、とてもシンプルなデザインですのでカスタマイズもしやすいと言えます。 【Shopify ｜ Dawn】 https://themes.shopify.com/themes/dawn/styles/default?locale=ja    

1. Liquidテンプレート内コメント

まずはLiquidテンプレート内で使えるコメント表記方法です、HTMLの部分に限るとHTMLのコメント記法で対応できますが、Liquidの処理が入るとこの形でコメントする必要があります。VSCodeなどですとLiquidの拡張機能をつかうことでコメントの入力がショートカットキーで対応できるので、是非準備しておきたいですね。

{% comment %} 
  この部分はコメントです
{% endcomment %}

   

2. 変数代入・展開

Liquidでは変数宣言に「assign」が使われます。変数代入はPHPやJavaScriptなどと似たような感じですね。変数をHTML上に展開する場合には二重波括弧の中に変数を入れるようにします。

{% assign text = 'Hello, world!' %}
<p>{{ text }}</p>

   

3. オブジェクトデータ表示

Shopifyでは商品情報やブログ記事などオプジェクト型のデータを扱うことが多々あります。文字列や数値などは上記の変数展開で対応できますが、配列やオプジェクトの場合は、「JSONフィルター」をつかってJSONの文字列として出力することで値を確認することができます。PHPでいうvar_dumpのような感じですね。

<pre style="white-space: pre-wrap;">
  {{ product | json }}
</pre>

   

4. 静的アセットファイル参照

Shopifyのテーマでは画像やスタイルシート、スクリプトファイルなどの静的アセットファイルは「assets」ディレクトリに格納する必要があります。サイトURLは環境ごとで動的に変わるため、専用のタグなどを使ってurlを指定します。

// assets用ディレクトリパスを指定
<img src="{{ 'image.jpg' | asset_url }}" alt="">
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}">
<script href="{{ 'main.js' | asset_url }}">

// スタイルシートやスクリプトは直接HTMLタグ出力も可能
{{ 'style.css' | asset_url | stylesheet_tag }}
{{ 'main.js' | asset_url | script_tag }}

   

5. セクション用Liquidファイルのインクルード

オリジナルテーマのカスタマイズに限りませんが、Shopifyでは基本的にコンポーネントやパーツごとのLiquidテンプレートファイルが組み合わさってサイトが構成されています。外部のLiquidファイルを読み込むには、下記のように「section」をつかって、ファイル名を指定することで、その場所にインクルードさせることができます。また、読み込まれるファイルは「sections」ディレクトリに格納しておく必要があります。

<main>
  {% section 'main-home' %}  // sections/main-home.liquid
</main>

   

6. サイト内ページURL出力とログイン分岐

ショップサイトでは、ログインページやカートページ、アカウントページなど専用のページが必要となりますが、Shopifyではそれらも「routes」オブジェクトの中に全て用意されていますので、その値を参照することでリンク指定も簡単にできます。

<a href="{{ routes.root_url }}">ショップトップ</a>
{% if shop.customer_accounts_enabled %}
  {% if customer %}
    <a href="{{ routes.account_url }}">マイページ</a>
    <a href="{{ routes.account_logout_url }}">ログアウト</a>
  {% else %}
    <a href="{{ routes.account_login_url }}">ログイン</a>
    <a href="{{ routes.account_recover_url }}">パスワードを忘れた方</a>
    <a href="{{ routes.account_register_url }}">新規アカウント登録</a>
  {% endif %}
{% endif %}
<a href="{{ routes.cart_url }}">カート</a>

  また、ログイン済みかどうかで表示を分岐させることもあると思いますが、Shopifyではまず「shop.customer_accounts_enabled」でショップにアカウント登録が許可されているか？をチェックし、続けて「customer」のオプジェクトを参照することでログイン済みかどうか？を確認できます。    

7. キーワード検索フォーム

こちらもECサイトでよく見かけるコンポーネントになります。下記はシンプルなものになりますが、フォーマットとして用意しておくと便利ですね。検索結果一覧ページもURLが決まっているので、先ほどと同じく「routes」オプジェクトから検索結果一覧用のURLにGETメソッドでフォームの値を送信することで対応できます。

<form method="GET" action="{{ routes.search_url }}">
  <input
    type="text"
    placeholder="商品名で検索"
    name="q"
    value=""
    autocapitalize="off"
    autocomplete="off"
    autocorrect="off"
  >
  <button type="submit">検索する</button>
</form>

   

8. ページテンプレート別の分岐

オリジナルテーマの場合にはHTMLを1から作成することが多いため、ページごとに表示を変える必要が出てきます。その際にはテンプレートに分岐させる形で実装していきます。また、固定ページなどはフォーマットが同じの場合にテンプレート単位で分けず、ハンドル名で分岐させることもあります。

{% if template == 'index' %}
  <h1>トップページ</h1>
{% elsif template == 'page' %}
  {% if page.handle == 'about' %}
    <h1>ショップ概要ページ</h1>
  {% elsif page.handle == 'contact' %}
    <h1>お問い合わせページ</h1>
  {% endif %}
{% elsif template == 'collection' %}
  <h1>コレクション別商品一覧ページ</h1>
{% elsif template == 'product' %}
  <h1>商品詳細ページ</h1>
{% elsif template == 'search' %}
  <h1>検索結果一覧ページ</h1>
{% elsif template == 'blog' %}
  <h1>ブログ記事一覧ページ</h1>
{% elsif template == 'article' %}
  <h1>ブログ記事個別ページ</h1>
{% elsif template == 'cart' %}
  <h1>カートページ</h1>
{% elsif template == 'customers/login' %}
  <h1>ログインページ</h1>
{% elsif template == '404' %}
  <h1>404ページ</h1>
{% endif %}

 

---

  今回はShopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTipsについていくつかまとめてみました。このほかにも商品情報やブログ記事の表示といった動的コンテンツを扱うこともあるので、また次回記事で引き続き紹介していきたいと思います。