【Shopifyテーマ紹介】公式テーマじゃないけどすげぇ！『Wokiee』【後編】

お久しぶりです。
マルボロです。

めっきり寒くなってまいりましたが、皆さんいかがお過ごしですか？
もうすっかり冬ですね！マルボロは冬が一番苦手なのです。

だから何だよと言う話なんですが、特に話題のない時って、人は天気の話良くするよね。
そして前回とまくら一緒だよね！

さて今回は「Shopifyテーマ紹介」シリーズの第3弾！『Wokiee』というテーマ紹介の後編です。
色々いじってみてのレビューです。

ちなみに前回はこちら

【Shopifyテーマ紹介】公式テーマじゃないけどすげぇ！『Wokiee』【前編】

前半のまとめでも触れましたが、このテーマ、アホほど機能てんこ盛りです。
よく使うアプリの大半はいらない感じ？！

特筆すべき機能まとめておきました。

ストア構築で良く使う機能のレビューとかウィッシュリストなどはもちろん、UGCなんかもデフォルトで用意されてます。

無料アプリの導入が必要の場合もありますが、その場合でも『wokiee』側のカスタマイズ画面に自動で連携してくれます。
※してくれないアプリもあるかもです。

フロント側で必要と思われる拡張機能は大体備わってると思って良いです。
（ただ定期購入や配送関連などフロントに関連しない機能に関しては、アプリ導入必要です。）

そんな高機能な『wokiee』の中でも「商品一覧」と「商品詳細」ページのUI/UX充実度合いが特筆モノなのでここを中心にお伝えしますね。

商品一覧ページ

画面キャプチャを見ながら解説します。
まずは商品一覧ページから。

❶商品一覧での絞り込みフィルター
デフォルトで付いてくるうえに、結構な高機能でびっくり。
必要と思われる絞り込み方法は網羅されてます。
これからは月額費用気にしないで絞り込み放題ですね！

❷商品サムネでカラーバリエーションを画像で切り替え
商品詳細での切り替えはShopifyデフォルト機能でありますが、一覧のサムネでこれが出来るのがポイント。
かなりリッチでユーザーフレンドリーな商品サムネになります。
これ地味に便利。

➌商品比較機能
マルボロ的にはこれが刺さった。

価格.comなんかにはあるんだけど、気になる商品にフラグを立てて、後で一覧で比較できるようにする機能。

商品一覧のサムネに表示されるボタンがあって、クリックするとフラグが立つので、フラグを立てた商品の比較が可能。
※画像の緑枠のボタン

この機能実現させるアプリ探すのも何のキーワードで探したらいいか分からん。（compare系のワードでいくつか出てくる）

比較用の一覧ページは「pages」であらかじめ設定しておく必要があります。
こんな感じで比較できる。

❹クイックビューポップアップ
これも地味なんだけど、ユーザビリティ的にはあった方がよい。
以前にわざわざliquidで作ったくらい。
『wokiee』ならデフォルトで設定できる。すげぇ。

こんな感じで表示されます。

❺ウィッシュリスト追加
「お気に入りに追加」機能です。
アプリによっては、ログインしてなくてもcookieを読み込んで表示してくれるのもありますが、こちらはログインしないと保存されないみたい。
とはいえ無料で使えます。

❻カウントダウンタイマー
セール終了まであと●●日！みたいなアオリが入れられます。
これもテーマにデフォルトで付いてくる。
どのアプリにしようか無料期間で検証してたあの頃も、遠い思い出となります。

商品詳細ページ

こちらが商品詳細ページ

❶商品画像拡大機能
これ意外と実装してないテーマ多いんですよね。
そして割とリクエストされる機能でもあります。

『wokiee』にはばっちり実装されています。

❷拡張フィールド
Shopifyデフォルトの商品説明文の入力欄は１か所しかない。
管理画面の「商品管理」の「説明」欄ですね。

詳細な説明が必要な商品でも、入力欄１か所しかないからHTML組んだりしてマスタ作るのに骨が折れた。

『wokiee』は項目自体を増やせます。
ただこれは『wokiee』の独自機能というより、Shopify2.0で追加になった「メタフィールド」の機能に乗っかってるぽいです。

増やせる上限数までは確認してないんだけど、3個くらい増やして使ってます。

マスタで一括登録する場合は、ド定番アプリ『Matrixify』を使いましょう。
「メタフィールド」で拡張したフィールドもcsv登録出来るようになります。

Matrixify – Bulk Import Export Update Migrate | Shopify App StoreBulk Import Export Update Migrateapps.shopify.com

使い方をうちのディレクターMがまとめてくれているので下記の記事参考にしてください。
※記事書いた時からアプリの名称変わってますが、同じアプリについての話です。

Shopifyのデータをインポート／エクスポートできるおすすめアプリ「Excelify」①

Shopifyのデータをインポート／エクスポートできるおすすめアプリ「Excelify」②

❸商品説明文タブ切り替え
特筆すべきは、フィールドが追加できるのみならず、追加したフィールドをタブ切り替えで表現できる点。
タブ切り替えにするか、アコーディオンでパカパカさせるか選べる。
※図版はアコーディオンによる表現になってます。

詳細で複雑なスペックを掲載する必要のある商材だと、必須で欲しい機能なんじゃないかな。

❹レビュー表示もタブ内に格納できる
「商品管理」の「説明」欄以外に増やしたフィールドはすべてタブなりアコーディオンに格納できる。
そしてタブ/アコーディオンのUI切り替えできるから好きな方で設定しちゃえばいいです。

レビュー表示はあらかじめ枠だけ拡張してあって、表示/非表示が選択できるみたい。
レビュー機能使わないなら非表示にすればいいだけ。

❺AddThis埋め込み
Shopifyデフォルトでもソーシャルボタンは用意されていますが、Twitter・FaceBook・Instagramくらいしかないので、やはりAddThisの方が便利です。

設置方法は、AddThisサービスに登録し、ユーザーIDコードを取得し『wokiee』のsnippetsにコードを貼り付けるだけです。

Get more likes, shares and follows with smart website tools – AddThisAddThis share buttons, targeting tools and content recommendawww.addthis.com

まとめ

『wokiee』の最も特長的な機能が「商品一覧」と「商品詳細」に端的に表れているので今回はそのふたつの画面を通じて、『wokiee』のすごさをお伝えしました。

野良テーマだから慎重にバックアップ取りながらちょびっとずつ構築してましたが、慣れてしまえば公式テーマとなんら変わらん。
高機能であるがゆえに設定する箇所が公式テーマより多いですが、アプリの設定考えたらむしろ楽かも？！

あと当たり前ですがヘルプが全部英語なので翻訳しながら理解してかないとならないです。

アプリを探してきて検証したりする手間が大幅に省けるだけでもこのテーマ使ってみる価値はあります。

ぜひ一度使ってみて！
そしてぜひ「スキ」押してみて！

マルボロでしたー。