Swatchy Color Swatches はどんなアプリ？
Shopifyには様々な専用アプリがあります。
アプリと言うと聞きなれない感じがしますが、Wordpressのプラグインの様なイメージでしょうか。
今日は使ってみてよかったShopifyのアプリを紹介したいと思います。
紹介するのは「Swatchy Color Swatches」というアプリ。
カラーバリエーションをわかりやすくカラーアイコン（スウォッチ）に変えてくれます。
Swatchy Color Swatches を適用する前と後の画像です。
スウォッチになると、わかりやすく購買意欲も上がりますよね。
このアプリは日本語化されていないのですが、とてもシンプルな操作で使うことができます。
早速価格や使い方の説明をしていきます。
Swatchy Color Swatches は 25ドルで永久に使える
Swatchy Color Swatches は有料のアプリです。
しかし、Shopifyで多く見る毎月○ドルかかります、というタイプではなく一度払えばずっと使うことができる素晴らしいアプリなのです。
しかもお値段25ドル。
手が出ない価格ではないですよね。
さらにお試し期間が5日あるので、5日使ってみて合わないなと思えば支払いをしなければそのままアプリは無効になります。
早速試してみたい方は以下のアプリストアからお試し可能です。
（インストールするにはShopifyを利用している必要があります）
Swatchy Color Swatches の使い方
ここからは実際の使い方を説明していきます。
まず、商品登録をしてカラーバリエーションを登録しましょう。
バリエーションの登録時のバリエーション名をアプリ側でも使うことになるので、色のバリエーション名を覚えておきましょう。
「カラー」など２文字以上の単語にしておきましょう。
カラーバリエーションの色登録の仕方
バリエーションに割り当てる色をアプリ側で設定する方法をご説明します。
管理画面のアプリ管理からSwatchy Color Swatches をクリック
紐付けるバリエーションを入力してカラー設定を16進カラーコードにする
Define Solid Colors （色を定義する）をクリックします
カラーコードを入力してページ下部のSaveをクリックして保存
カラーコードを3つ別のものを入れるとマルチカラー扱いに
カラーコードを3つ入れることができますが、2つ以上入れるとマルチカラー扱いになります。
単色以外のカラーにも対応できるのはとても嬉しいですね。
イメージスウォッチにすると写真にできる
カラーバリエーションを実際の写真にしたい場合、Image Swatches を選べば画像にもできます。
商品詳細ページのカラーをスウォッチにする方法
商品詳細ページのカラーバリエーションをスウォッチ化するのはとても簡単です。
アプリページの「Enable Swatchws」ボタンをクリックするだけ。
画像の様にボタンが赤くなり「Disable Swatches」となっていれば商品詳細ページのカラーバリエーションはテキストではなくスウォッチになっています。
ページが読み込まれてからスウォッチになるまで少しタイムラグがある場合があります。
適用後詳細ページをリロードしたら20秒くらい待ってみましょう。
コレクション一覧ページでカラーバリエーションを表示する方法
コレクション一覧ページにスウォッチを適用させる方法をご紹介します。
ここからは少しコードを触りますので、バックアップをとってから作業しましょう。
ちなみにコレクションページにスウォッチ表示させると
・トップページの商品アイコン
・商品一覧ページ
・カテゴリー（コレクション）一覧ページ
などにカラーアイコンが表示されます。
表示させたいところにコードを入れる
やることはとても簡単・単純でカラースウォッチを表示させたいところに１行以下のコードを追加するだけです。
問題なのは、一体どのファイルにコードを入れば良いかというところ。
アプリの説明では「collection template file」に追加してくださいと説明されていますが、テーマによってファイルは細分化されておりどのファイルに入れれば良いか見つけ出すのに一苦労です。
ここからはファイル探しのコツを少しご説明しておきます。
テーマファイルをダウンロード
管理画面のオンラインストアを開き、テーマのアクションからダウンロードを選択します。
表示させたいページのコードからループされているボックスのclass名をコピー
デベロッパーツールを使い、一覧ページで繰り返し表示されているボックスを見つけ出してクラス名をコピーします。
この場合、classが複数割り当てられてますが「product grid__item」あたりのクラスを使います。
テーマによって違うと思いますので、一覧ページ全てで使われていそうなclassをコピーしておきましょう。
ダウンロードしたローカルにあるテーマのフォルダ全体で検索
フォルダ全体を検索できるテキストエディタを使って検索しましょう。
ちなみにわたしはCoda2を使っています。
一覧をループ表示させているファイルが見つかりました。
Shopifyに戻りコードを編集モードにする
表示させたい位置にコードを入力
ファイルと実際のページを見合わせて、表示させたい箇所にコードを入力して保存します。
今回は価格の下あたりが良いかな…？と思い<span class=”product__price”>のループ終了の後にコードを入れました。
一覧ページやトップページにスウォッチを出すのは少しコツがいりますが、そこまで難易度は高くなくデザイナーでも十分に対応可能なカスタマイズではないかと思います。
Swatchy Color Swatches を使ってみた感想
今回は Swatchy Color Swatches の使い方をご紹介しましたが、実際に使ってみて25ドル（１回のみの支払い）ならとても手頃ではないかなと思いました。
商品詳細ページにのみ表示させたいならコードを触らずともスウォッチにできるのはかなりありがたいです。
今後も他にスウォッチ化できるアプリも試してみて、もっと良いものがあればレビューと使い方を紹介していきます。
つなぐデザインでは簡単なShopifyのカスタマイズなら一貫して自社で対応が可能です。
ECサイトの構築をお考えで、Shopifyをご検討中なら是非一度ご相談ください。
できる限りご要望とご予算に合わせたお手伝いをさせていただきます。
