本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。

本章では、Shopify CLIを用いて、Dawnテーマを実際にカスタマイズしてゆきます。
　
Dawnの特徴だけでなく、他のテーマでも広く役立つ「動的セクション・ブロック」や「メタフィールド」、「フォームの拡張」についても解説しているので、近しいカスタマイズを行う際はぜひ参考にしてください。
必要な箇所だけ読む形でも大丈夫ですが、テーマ開発に慣れていない方は、手を動かしながら順に読み進めてゆくことをお勧めします。

本記事の内容はYouTube上でも解説しています。

Dawnテーマの特徴

DawnはShopifyによって開発された、OS2.0対応のテーマです。軽量さと高パフォーマンス、柔軟な拡張性を重視して設計されており、アクセシビリティへの配慮も行き届いています。
2022年2月現在、ストアを構築するとDawnがデフォルトテーマとして設定されています。

さらに、Dawnのソースコードは公開されており、誰でも利用可能です。
DawnのGitHubに記載された「Dawnはテーマを構築するためのリファレンスとして機能する」というメッセージのとおり、OS2.0対応のテーマに触れるなら、まずはDawnについて知るのが良いでしょう。
他のサードパーティ製テーマをカスタマイズするにせよ、OS2.0対応の独自テーマを開発するにせよ、Dawnの設計は大いに参考になります。

本節では、個々のカスタマイズ事例について触れる前に、Dawnテーマの特徴についてざっくりと紹介します。

表示速度の速さ：軽量化とパフォーマンス向上の取り組み

Webページの表示速度と直帰率の関連性は広く知られるところですが、オンラインストアでは特に、表示速度の遅さはそのままコンバージョンの低下——売り上げの減少に繋がります。
Dawnでは、テーマを軽量化しパフォーマンスを向上させるための工夫が随所に見られます。

ブラウザ機能を活用し、JavaScriptの使用を減らす

中でも特徴的なのが、JavaScriptの使用を減らす取り組みです。
JavaScriptの利用が多ければ多いほど、Webページのパフォーマンスは低下します。
DawnはJavaScriptの利用を最小限に減らし、代わりにブラウザ機能やCSSを活用することで、軽量化と高パフォーマンスを実現しています。
　
ブラウザの進化によって、かつてはJavaScriptで実装していた機能の多くが、ブラウザに標準で搭載されるようになりました。
Dawnはプログレッシブエンハンスメントの手法に基づき、ストアの核となるコンテンツや機能には古いブラウザでもアクセス可能にした上で、最新ブラウザ機能を利用できるユーザーには、より便利に拡張されたストア体験を提供します。
　
代表的なものが画像の遅延読み込み機能です。
lazysizes.jsのようなプラグインの代わりに、Dawnでは2020年にブラウザ標準仕様となったloading属性を用いて遅延読み込みを実装しています。
　
jQueryも使われていないため、日頃jQueryで開発している方はご留意を。自身で追加することは可能ですが、Dawn本来のパフォーマンスは発揮されなくなります。

メンテナンス性の向上：コードのモジュール化

Dawnの前のデフォルトテーマであるDebutでは、テーマのCSSとJavaScriptのほとんどは assets/theme.css と assets/theme.js にまとめて記述され、各ページの基盤となる layout/theme.liquid で読み込まれていました。
結果、ファイルひとつあたりの記述量は膨大なものになり、メンテナンス性にやや難がありました。
　
Dawnでは、CSSとJavaScriptがページ・機能ごとに別個のファイルへ分割され、各ページやセクションで必要な分だけを読み込む設計に変わりました。
ストア全体の共通記述は assets/base.css と assets/global.js として layout/theme.liquid で読み込みつつ、たとえば商品ページ向けの記述は、セクションファイル sections/main-product.liquid の冒頭で追加する形になっています。

/sections/main-product.liquid

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{%- if product.quantity_price_breaks_configured? -%}
  {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
{%- endif -%}

必要なCSSとJavaScriptのみが読み込まれる設計となったことで、各ファイルのコードが読み解きやすくなり、メンテナンス性も向上しました。

拡張性の高さ：テーマエディタで操作可能な多くのコンポーネント

さらに、これはDawnに限りませんが、OS2.0によってセクションの動的追加機能が実現したことで、さまざまなコンポーネント（※ストアの外観を構成するパーツたち）をテーマエディタからノーコードで追加できるようになりました。
　

テーマセクションの例
左サイドバーに追加可能なテーマセクション一覧が表示されている。Dawnでは十数種類の動的セクションが利用可能

かつてはセクションをテーマエディタから動的に追加・削除できたのはトップページだけで、商品ページにちょっとキャンペーンバナーを追加するだけでもLiquidを記述する必要があったのですが、Dawnを含むOS2.0対応テーマでは、JSONテンプレートで作られたすべてのページでセクションの動的追加が可能になりました。
　
次に示すキャプチャは、テーマエディタで商品ページに「特集コレクション」セクションを追加した際の表示です。Dawnはデフォルトのままで、Liquidは1行も編集していません。トップページでなくても自由にセクションを追加でき、セクション内の設定やテキストを右サイドバーから変更できるのが分かります。

追加されたセクションの表示例

Dawnの各コンポーネントはアトミックデザインに基づいており、マーチャントがテーマエディタでさまざまな変更を加えても、ストア全体のカラーバランスやレイアウトが崩れにくいように設計されています。
　
アップデートも頻繁に行われているため、本書で紹介するカスタム事例も、いずれは標準機能としてテーマエディタから扱えるようになっているかもしれません。
ただ、日本特有の商慣習（配達日時指定など）をカバーするような機能がDawnに実装される可能性は低いので、そこはアプリやLiquid開発でサポートしたいところです。

アクセシビリティへの配慮

Shopifyは、Webアクセシビリティの対応を常に重視しています。
Dawnもまた、スクリーンリーダーやキーボード操作といった支援技術を介してアクセスした場合でも、支障なくコンテンツを利用できるように工夫が凝らされたテーマです。
カルーセルスライダーなどのメディア操作や、色彩コントラスト比に関しても、アクセシビリティに配慮した設計が成され、視覚的な混乱をもたらす要素は注意深く取り除かれています。
　
本書ではアクセシビリティについて詳しくは言及しませんが、Shopifyのドキュメント上にWCAG（Web Content Accessibility Guidelines）に基づくテーマ設計のベストプラクティスが公開されているので、関心のある方はぜひ一読してみてください。

Dawnカスタマイズ事例の概要紹介

Dawnの特徴解説は以上です。
最後に、本章で行うDawnカスタマイズの概要を軽くご紹介しておきます。
必要な箇所だけ読む形でも大丈夫ですが、テーマ開発に慣れていない方は、手を動かしながら順に読み進めてゆくことをお勧めします。

動的セクションとブロック

前述したとおり、Dawnでは豊富なセクションコンポーネントが提供されていますが、それでも表現しきれないものはあります。本書ではサンプルとして「FAQ」を挙げました。
動的セクションとブロックについて解説しながら、テーマエディタから操作できるシンプルなFAQセクションコンポーネントを実装します。

商品メタフィールドと動的リソース

OS2.0から標準で提供が開始された商品メタフィールド機能を用いて、商品ページに独自の追加情報を表示できるようにします。ここでは「商品サブタイトル」と「商品の発売日」を実装します。

商品とカートのフォーム拡張

Liquidに「Line Item Property」と「Cart attributes」の記述を追加し、ユーザーからの追加情報をフォーム経由でShopify側に送信できるようにします。サンプルとして実装するのは「刻印文言」と「ギフトラッピング希望」の入力欄です。
開発ストアでテスト注文を行う方法も紹介しています。

日本語フォントの導入

2022年2月時点で、Dawnのタイポグラフィは日本語フォントに最適化されていません。より見やすいストア外観となるように、フォントまわりの調整について紹介します。
テーマ設定の編集方法と、DawnのCSSで用いられているCSS変数についても解説しています。

scss/sample.scss → assets/sample.css

私達の会社で制作したShopifyテーマ開発入門書のご購入はこちらから。
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。

• 著者：川島さやか
• 出版：non-standard world, Inc.
• 判型・ページ数：B5判・248ページ
• 価格：3,850円（税込）※PDF版同梱、送料無料

特集ページへ