Shopifyアプリ「Power Tools Suite」のデザインをカスタマイズしよう

はじめに

「Power Tools Suite」のインストール方法、使い方を知りたい方は↓のリンクを参考にしてみてください

Here’s to a Great 2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutibus igitur rectissime mihi videris e ...

続きを見る

[簡単]Power Tools Suiteのボタンをカスタマイズ

現在、私のPower Tools Suiteでカスタマイズした絞り込み検索の部分は下のようになっています。

Color、Size、Typeの3種類があります。

ただ、少し見づらいですよね...

これをカスタマイズしていきます。

「Color」 は色で表現しよう

色は↓のようにするとわかりやすいですね。今回はこれを作成します。

まず、「Power Tools Suite」の管理画面に移動したら、「Color」の部分の「Display」をクリックします。

そうすると、↓のような選択画面が出てくるので、その中から「Color Swatch」をクリックします。

その後、「Apply」をクリックします。

設定を変更した後は、忘れずに↓の「Save & Update」をクリックしてください。

これだけです！

これでコレクション画面に移動すると、↓のようになっていると思います。

なお、↑の写真に、グレーのような色が三つ続いてしまっているところがあります。

これは、ある程度の色ならばアプリ側で準備してくれているのですが、マイナーな色（日本でのえんじ色や群青色など）はどんな色か認識できないため、このようにグレーになってしまいます。

この場合は後で説明する「CSSでのカスタマイズ」を活用すれば色を設定できます。

Sizeを見やすく変更しよう

サイズはS~LLまでだったり、22.5cm~30.5cmまで、と幅広く取られがちです。

そのため、初期の状態だと長くなってしまいます。

これを解決するため、2種類の方法を提供します。

小さいボタンで表現しよう

まず、前回と同じように「Size」の横の「Display」をクリックします。

今度は、「Small Boxes」をクリックします。

その後、忘れずに「Save & Update」を押してください。

そうすると↓のように、小さいボタンで表現されました！

2列で表現しよう

1列では長くなってしまうので、2列で表現してみます。

今回は「Two column」をクリックします。

そうすると、↓のように2列で表現することが出来ました。

ボタンカスタマイズまとめ

ボタンのカスタマイズ方法を3種類紹介しましたが、その他にも

• Hide check box・・・チェックボックスを無くす
• Nested・・・タイトルを無くす（Colorなどの部分）

など、様々な種類があります。

（その他のはまだ使い方がはっきりしないため、分かり次第随時更新します）

[中級者向け]CSSでカスタマイズしよう

CSSでカスタマイズする方法もあります。

なお、コーディングの知識が必要になります。

今回は、「Type」の部分を↓のようにカスタマイズしてみます

「ACCESSORIES」の横にリボンのアイコンをつけてみました。

Font Awesomeをダウンロードしよう

アイコンを付けるためにFont Awesomeを使ってみます。

まずは、テーマのコードの編集画面に移動します

Layoutフォルダの中の「theme.liquid」ファイルに下記コードを埋め込みます

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

なお、場所は「theme.css」を読み込んでいる上あたりでよいでしょう。

保存をしてください。

CSSを記入しよう

「Power Tools Suite」の設定画面に移動したら「CSS」を押してください。

「ACCESSORIES」の部分がどうなっているのか、ディベロッパーツールで確認します。

aタグのあとにアイコンを入れれば良さそうですね。

下記コードを先ほどのCSSのところに貼ります。

div.collection-name a[title="ACCESSORIES"]:after{font-family: "Font Awesome 5 Free"; content: '\f4d6'; font-weight: 900;}

「Save」→「Save & Update」のあと、リボンがついているのを確認できると思います。

 

CSSカスタマイズまとめ

このように

「ディベロッパーツールでタグやクラスを確認」→「CSSでカスタマイズ」を行えば自分好きなようにカスタマイズすることができます！

---

質問や感想がありましたら、コメント、またはお問い合わせフォームまでよろしくお願いします。

お問い合わせ