easyメニューコンテンツへスキップホームAboutShopifyのテーマカスタマイズ画面にフォントピッカーを追加する方法コメントを残す備忘録でっす。テーマカスタマイズ画面にフォントピッカーを追加する今回は無料テーマのDebutの「テキストオーバーレイ付き画像」セクションを改造しちゃうぞ~。フォントピッカーを追加したいセクションのテーマファイルを探すよ。sectionsフォルダ内にあるはずだよ。「テキストオーバーレイ付き画像」の場合はhero.liquidって名前です。ファイルを開いたら下記を探すよ。%}すでにカスタマイズ画面に出ている機能がずらりと並んでいるはず。括弧の位置に注意しながら、フォントピッカーを追加したいところにコードを書いていくよ。]}ファイルを保存してshopifyにテーマをアップロード。Shopifyのテーマキット使ってると簡単だよ。したらスキーマがどうこうってエラーが出るかも。いちどShopifyの管理画面に行きます。管理画面からテーマのカスタマイズを選ぶよ。フォントピッカーを追加したセクションを開くよ。フォントピッカーが表示されてればおk。適当なフォントを選択して保存するよ。downloadしときましょう。テーマファイルのconfig/settings_data.jsonを開くよ。さっき追加したフォントピッカーの値がちゃんとあればばっちり!どこにあるかはセクションによって違うよ。},...これでフォントピッカーを使えるようになったよ。選んだフォントをデザインに反映するよ~選んだフォントをデザインに適用してみよう~。😥しゃーないので、セクションのテーマファイルの中に直接CSSを書いちゃうよ!さっきフォントピッカーを追加したliquidファイルを開いてね。下記を適当な位置に入れてあげます。}}</style>これでさっき選んだフォントが@font-faceで読み込まれて、指定できるようになるよ。フォントを使いたいタグに下記を入れてあげましょう。classやidでの指定がいい人はそうしてね。}};'">保存したらテーマをアップロードするよー。実際のサイトで表示してみましょう。GitHubShopifyのフォントライブラリー、すごい色々選べるから、使いこなせれば管理画面から簡単にデザインの変更できてお客さんハッピーになれるだろうな。奥が深いぜShopify。Kitとは?Shopifyが提供している、開発者用のコマンドラインツールです。Kitをダウンロードします。コマンドラインに慣れている素敵な貴方はコマンドラインから。Installation」しましょうね。Kitのインスコ管理人はWindowsユーザーなので、Windowsの解説しますよー。Kit」フォルダ作ります。名前はなんでも大丈夫だよ。さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。Kit」が追加されれば大丈夫!Powershell(かコマンドプロンプト)を立ち上げて、下記コマンドを打ってみましょう。kitの説明がずら~と表示されればインスコ成功です!macやlinuxの方は下記を参照にがんばって。versionAPIアクセス権をもらうよShopifyの管理画面から、APIでアクセスするための設定をします。Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。app」をクリック、下の方に小さくあるよ。Name(なんでもいいです。Accessとかでいんじゃない。)と自分のメアドを入力。ShopifyとローカルをつなげちゃうよShopifyのテーマを保存したい場所にフォルダを作ります。そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック>この場所でpowershellを開く」で開けるよ。テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。config.ymlファイルができているはずです。Shopifyからテーマをダウンロードしてみよう下記コマンドを打つよ。downloadテーマのダウンロードが始まります。パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。Shopifyと同期してみようこの機能がマジ神です。ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。下記コマンドを打つよ。watchローカルでなにかファイルを変更してみましょう。ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。Shopify上で表示を確認してみましょう。変更されたかな?同期の終了は「ctrl+c」です。Kitの使い方を手取り足取り教えてくれます。10-31件のフィードバック久しぶりの投稿ですが何食わぬ顔ではじめます。セルフネイル、一年半ぶりに再開してます。これは3回目のリペア。ラメ乗っけるだけなので両手で1時間くらいで終わります。chioli捨てたコメントを残す本2冊。自炊でデジタル化したので本体はポイ。何個か本体だけ割れて捨てていたけど、蓋はまだ捨ててなかった。ショーパンニーソ3つ。日本でストッキング代わりに(お見せするの申し訳ないので絶対領域は見えないように)履いてたけど、こっちじゃ使わぬ。キャミ1つボロボロになったTシャツ。