Shopifyのカスタマイズについて、Liquidやアプリなどについて調べた備忘録です。
制作で要望がありそうだなー、って部分を調べつつパートナーアカウントで実装してみました。ひとまず、できることやできないことをまとめておきます。
随時更新予定。
カスタマイズの基本
Liquidで独自セクション・ブロックを追加する
ShopifyのLiquidを書く上での基本がまとまっています。
Shopifyテーマのカスタマイズ項目を作成する方法 | HPcode（えいちぴーこーど）
LiquidでSection内に無限追加項目を作るためのBlocksの解説。
【Shopify】ブロック（blocks）の使い方や注意点を解説 | トマトソースのWEB開発
テンプレートを追加して独自ページをつくる
Shopifyでは商品ページや固定ページ、ブログページなどに複数のデザインテンプレートを用意することができます。
・特定の商品ページだけ豪華に見せたい
・LPを作りたい
などの要望に対応することが可能です。
メタフィールドで登録項目を追加
ブログや商品ページに表示したい項目がShopifyで用意された項目だけでは足りない場合は、メタフィールドを使って入力項目を増やしたり、商品リンクを表示したりできます。
[Shopify]メタフィールド使ってブログ記事に関連商品を紐づける（Dawn）47/100｜まりん | Shopifyフロントエンジニア+SNSマーケティング｜note
パンくずを設置する
Shopifyの無料テンプレではパンくずがついておらずLiquidでの実装が必要です。
Shopifyで階層のあるパンくずリストを実装【サンプルコードあり】｜liquid note | 初学者向けShopify情報ブログ
※商品詳細ページのパンくず表示がうまくいかず（URLにcolectionの階層がなぜか表示されない）、有料テンプレを参考にしたほうがよいかも？もしくはコレクションの管理方法がなにか間違っているのかもしれない。
商品一覧・詳細・カートのカスタマイズ
ShopifyではECサイトで一般的な「カテゴリー」というものは存在せず、「コレクション」と呼ばれるもので商品を分類します。カテゴリーというより「タグ」のほうが意味合いが近いかもです。
商品の売上ランキングを表示する
コレクションを作る際に「ベストセラー」を選択。
[1つの設定だけ]Shopifyで商品をランキング順に表示しよう - Agata Code
Liquidで商品一覧をカスタマイズする
Liquidで商品を表示させる際に必要なデータ一覧。
[Shopify]Liquidで取得できる商品データ一覧 Product Object まとめ一覧 – EC PENGUIN
商品レビュー機能をつける（アプリ）
Shopifyアプリ「Product Reviews」で商品ページにカスタマーレビューを表示しよう | ECレシピ
最近チェックした商品を表示する（Liquid）
以下記事の方法で表示可能ですが一点注意が必要で、商品ページのURLに日本語が入っていると動作しないようです。
その場合、商品編集画面の「検索結果のプレビュー」の「ウェブサイトのSEOを編集する」から「URLハンドル」を英語表記に変更しましょう。
Shopifyで「最近閲覧した商品」を表示する方法【アプリ不要】
追記：
上記の方法で実装すると、スマートフォンで動作しなかったので調べると以下の方法で表示できました。ありがたい。しかもSlickスライダー付き。
最近チェックした商品を表示する（アプリ）
月額1＄。
「Recently Viewed Items」で Shopify サイトにユーザーの閲覧履歴を表示する ++ Gaji-Laboブログ
配送日時設定を追加する
Shopifyには配送日時設定がデフォルトでついていません。
Shopify公式曰く、日本の配送事情的に複雑な要件が多いとのことなので、この先も実装される期待はあまりできないかも。
Liquidで配送日時設定を自力で追加する
cart attributeを使ってカートページに自由な項目を実装可能です。
正直、Liquidのみでの配送日時実装は設置場所や購入の導線なども含めてあまり柔軟に対応できません。（チェックアウト画面のソースコードは、月額20万円のShopifyプラスじゃないとさわれないみたいです）
[Shopify] 配送時間指定を無料で実装する（Debutテーマ）｜TORUBLOG
shopify開発【三種の神器】 Cart attributes編 | おじさん be ambitious
テーマ「Dawn」だとカートの構造上、少し特殊なので、以下を参考に実装すること。
※Dawnにcart.attributeを実装する際に注意点 それぞれのinputにform="cart"を指定。
解決済み: Shopifyテーマ「Dawn」に配送日時のコードを入れたい - Shopify Community
ShopifyのDawnテーマのメモ – WEBUTUBUTU
jQueryUIのカレンダーで表示する場合が多いため、カレンダーの日本語化は以下の方法で。
【jQuery UI】Datepickerを日本語化するやり方を解説します | たいらのエンジニアノート
アプリ「配送日時指定」を実装
アプリは有料で約月10＄～。日本のアプリなのでかゆいところに手が届く感じです。
ただしアプリでもチェックアウト画面への実装はできないみたいなので、設置場所はカート画面となるので注意。
日本国内向けのShopifyアプリ「配送日時指定」！ | ECレシピ
お問い合わせフォームのカスタマイズ
アプリでフォームを設置
Shopifyのお問い合わせフォームはデフォルトだとユーザー向け自動返信メールなどがついておらず不便な面があるため、アプリを使ってカスタマイズをするのがおすすめです。
[画像あり]Form Builderを使ってお問い合わせフォームを作成しよう - Agata Code
Form Builderは無料で使えますが制限があるため注意。
無料プランだと自動返信メールが月40件までとなっています。
Liquidでフォームをカスタマイズ
Liquidでスクラッチでフォームをカスタマイズすることも可能です。
【5分でマスター】Shopifyでお問い合わせをカスタマイズする方法
【Shopify】liquidを編集してコンタクトフォームをカスタマイズする方法 - Qiita
ただし、現状checkboxが返信メールに正しく表示されないバグがあるのであまりおすすめできません。 無理やりな方法で回避することも一応可能。
自作コンタクトフォームでチェックボックスの複数選択した内容が自動返信メールで反映されない - Shopify Community
サイト設定各種
Faviconを表示する
オンラインストア→カスタマイズ→テーマ設定→ファビコン
【3分でわかる】Shopifyのファビコン設定とロゴの作成方法
OGP画像の設定
サイトのOGPは、
オンラインストア→各種設定→SNSでシェアする画像
にて設定。
商品ページのOGP画像のカスタマイズ。
Shopifyの商品ページOGP画像をメイン画像のみにする方法 - 刀部 かたなべ 日本刀の拵と居合刀の製作・販売
ページでのOGP画像のカスタマイズ。
[Shopify]OG画像をページでも設定できるようにする方法｜まりん | Shopifyフロントエンジニア+SNSマーケティング｜note
開店に必要な設定各種
制作者よりもディレクターが気をつけるべき内容が多めです。
【Shopifyの始め方】◆後半◆アカウント開設〜出店まで構築方法を丁寧に説明します！ - YouTube
決済設定
決済まわりは実稼働しないとわからない部分ではありますが詳しく解説されています。
Shopifyで使える決済サービス比較・設定方法【Shopify Experts認定企業が解説】 – コマースメディア株式会社
Shopify Paymentを使えば審査なしで今すぐクレジットカード決済がつかえるようです。決済手数料は約3～4%。
Shopify Payment以外だと、そこからさらに0.15～2%の手数料が追加されます。
Shopify Paymentの3Dセキュアについて
3Dセキュア2.0は日本版ではまだ未対応のようですが、必要に応じたタイミングで3Dセキュアが動作するようになっているため、決済のわずらわしさが無いみたいです。
3Dセキュア2.0とは何？Shopifyストアに導入できるかも解説 - ARCHETYP COMMERCE
shopify 構築日記#088 不正利用対策ってやっていますか？｜北山 浩 | バッグメーカーEC担当 Shopify構築日記書いている人｜note
ディスカウント設定（クーポン）
Shopifyではディスカウント設定が簡単に行なえます。
期間を指定して0000円以上で000円OFF、クーポンコードを発行など。
注意点は、複数のディスカウントは同時に利用できないことです。
【最新版】Shopifyのクーポン機能の使い方から発行方法まで徹底解説！ – 株式会社DMM Boost
画像のアップロード先
LPなど静的なコンテンツを作りたい場合、以下に画像をアップする。
設定→ファイル
ショップの譲渡について
実制作をしてみないとわからないが、有料テンプレやアプリを使う場合の譲渡が少しややこしそうです。
基本的には制作開始前に譲渡してしまい、クライアントにテーマ・アプリを購入してもらうのが良いか？もしくは最初からクライアントのアカウントで構築していくか？
有料テーマを使う場合
Shopifyのクライアントワークにおける手順:メモ – WEBUTUBUTU
有料テーマの購入タイミングについて
【shopify Q＆A】ストアの所有権(テーマの購入やアプリ)について｜こめでぃかる.net
譲渡後にできなくなること
[Shopify] ストア所有権の移行をした後にできないこと（パートナー向け）｜TORUBLOG
その他Tips
ストア初回訪問時にポップアップ表示（Liquid）
【Shopify】アプリを使わずに、サイトに訪れた初回のみポップアップするモーダルウィンドウ機能を追加！（カスタマイズ画面から次回表示までの日数指定も） | PRYTHM WORKS
※jQuery読み込みの記載がぬけているので注意
Instagramのフィードを表示する（アプリ）
通常のサイトだとInstagramのフィード表示がクソ面倒ですが、Shopifyのアプリを使えば簡単に表示できる。
【保存版】ShopifyでInstagramフィード（投稿一覧）を表示する方法｜liquid note | 初学者向けShopify情報ブログ
ただし、一度バグかなにかで表示されないことがあったので若干不安定かも。
なので、ただフィードを表示するだけでなくInstagramへの導線リンクをLiquidで表示させてあげるなどをして万が一の事故を防いであげると吉。
そういった理由でアプリを使いたくない場合は、更新は面倒だがLiquidで独自Sectionを追加してしまったほうが幸せかもしれない。
Shopifyプラスについて
通常プランからずば抜けて高い（月額20万円！）のShopifyプラス。
超大規模でスクラッチ開発をしているようなサイト向けのプランです。
Shopifyはカート以降のチェックアウト画面は基本的にどのサイトも同じなのですが、Shopifyプラスだとチェックアウト画面のソースコードやデザインも変更でき、機能追加ができるようです。その他、大規模EC運営に対応した様々な特典があるみたいです。
【最新版】Shopify Plusを入れるべき理由。Shopify expertが徹底解説！ - YouTube
ローカルで開発する
まだ試せていないけど、余裕のあるときに見てみる。
【Shopify①】ローカルで開発環境を構築する方法と使い方 | 株式会社 エヴォワークス -EVOWORX-
shopifyのローカル環境構築（windows専用） | おじさん be ambitious
カスタマイズにおける注意点
いくらカスタマイズといえど、基本的にはテーマをベースにヘッダーや検索などの基本機能はそのままで使うことをおすすめされている。
ヘッダーのカスタマイズに10万円使うか、ストアの販促に10万使うか、とても納得のできる話です。
shopifyで多い制作の事故を減らそう | おじさん be ambitious
さいごに
Shopify かなりいろんなことができますね。
逆に言うとカスタマイズにはそれ相応の知識が必要になってきます。
配送設定まわりのもどかしさがあるので、まだ手放しにいいサービスとは言い切れないけど、ほかのECサイトと比較すると頭一つ抜けているんじゃないでしょうか。
これから制作者が増えていけば日本語でのTipsが増えていき、盛り上がっていきそうですね。
