備忘録でっす。
テーマカスタマイズ画面にフォントピッカーを追加する
今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ～。
- フォントピッカーを追加したいセクションのテーマファイルを探すよ。
sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。 - ファイルを開いたら下記を探すよ。
{% schema %}
hoge
{% endschema %}- すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。
- 括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。
{
"name": "Typography",
"settings": [
/* ↓↓ ここに入れるよ～ ↓↓ */
{
"type": "font_picker",
"label": "Heading font",
"id": "heading_font",
"default": "helvetica_n4"
}
/* ↑↑ ここに入れたよ～ ↑↑ */
]
}- ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。
- もしかしたらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。
- 管理画面からテーマのカスタマイズを選ぶよ。
- フォントピッカーを追加したセクションを開くよ。ちゃんとフォントピッカーが表示されてればおｋ。
- 適当なフォントを選択して保存するよ。
- Shopifyのテーマキットを使ってる人は、いちどtheme downloadしときましょう。
- テーマファイルのconfig/settings_data.jsonを開くよ。
- さっき追加したフォントピッカーの値がちゃんとあればばっちり！どこにあるかはセクションによって違うよ。「テキストオーバーレイ付き画像」に追加した人はこのへんにあるはず↓
︙
"sections": {
︙
"hero": {
"type": "hero",
"settings": {
"heading_font": "itc_stone_informal_n4"
}
},
︙- これでフォントピッカーを使えるようになったよ。
選んだフォントをデザインに反映するよ～
選んだフォントをデザインに適用してみよう～。
残念なことに、スタイルシート用のtheme.scss.liquidファイルからはセクション内でカスタマイズした値を読めないっぽいんだ 😥
しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ！
- さっきフォントピッカーを追加したliquidファイルを開いてね。
- 下記を適当な位置に入れてあげます。
<style>
{% assign sample_heading_font = section.settings.heading_font %}
{{ sample_heading_font | font_face }}
</style>- これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。
- フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。
<h2 style="font-family:' {{ sample_heading_font.family }};'">- 保存したらテーマをアップロードするよー。
- さて実際のサイトで表示してみましょう。うまく適用されてるかな？？
めっちゃ参考になるサイト様
Configuring theme settings ・ Shopify Help Center
The font object ・ Shopify Help Center
Fonts ・ Shopify Help Center
Shopify’s font library ・ Shopify Help Center
Liquid Font filters in Shopify ? Avada Commerce
Unable to access section setting in sections.scss file ・ Issue #714 ・ Shopify/slate ・ GitHub
Shopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。
まだまだ奥が深いぜShopify。