Shopifyをカスタマイズする際に参考にするサイト

shopify customize

Shopifyでカスタマイズをしようと思っている。liquidやcssを編集してストアフロントのデザインを変えたい。

ただ、カスタマイズの参考になるサイトが少なくて困っている。公式のレファレンスやliquidのチートシートがあれば教えて欲しい。

こんなことを考えている方へ。

この記事のポイントは以下です。

私がshopify案件のカスタマイズ時によく見るページ・参考にしているサイト

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

最近はShopifyの案件も増えてきました。

本記事では私がShopify案件で仕事をする際に、よく見るページ・参考にしているページを紹介します。

Shopifyをカスタマイズする際に参考にするサイト

Shopify案件を行う際に参考にしているサイトは以下です。

Shopifyは日本語のヘルプやガイドが圧倒的に少ないです。状況は少しずつ改善していましが、英語の情報が圧倒的です。

恥ずかしながら私は英語が読めないので、Chromeのサイト内翻訳を活用して、ドキュメントを読んでいます。

Shopify Developers

Shopify Developers は開発者向け(カスタマイズする人向け)の公式ドキュメントです。アプリの作成やテーマの自作といった、かなりコアな内容にも触れられています。

Liquid template language reference

「Liquid template language reference」は、先に紹介した「Shopify Developers」の中にあるコンテンツです。

ここではShopifyで使用できるliquidの関数が紹介されています。案件中に一番参照するコンテンツかもしれません。

具体的な使用シーンとしては、

商品のあの情報を出力したいけど、関数あるかなー

とか

顧客情報から一部の情報だけ出力したいけど、関数あるかなー

といった感じで、やりたいことベースでそれに合致する関数を探しにいくパターンが多いです。

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

「Shopify Cheat Sheet」は名前の通り、liquidのチートシートです。

liquidのtagやobjectが一覧化されています。タグやオブジェクトの正しい記述方法を調べたりするときに使います。

Liquid template language

「Shopify Cheat Sheet」と同様に、こちらもliquidのチートシートです。

最近だと、タイムスタンプ(date)の出力をカスタマイズする際に使用しました。

Shopify ヘルプセンター

「Shopify ヘルプセンター」は公式の日本語ヘルプです。

コードのカスタマイズの話はほとんど掲載されていません。かわりに、管理画面の操作方法や決済方法、税金の設定方法などの運用面のヘルプが充実しています。

無料テーマDebutでブレッドクラム(パンくずリスト)を表示させる方法や、検索結果をカスタマイズする方法もここで発見しました。

当ブログで紹介している以下の記事も、公式のヘルプの内容を詳しく解説し直したものです。

ただ、なぜか英語版ヘルプには掲載があるのに日本語のヘルプには掲載がない項目があります。ですので、以下の英語版もヘルプも参照することが多いです。

Shopify コミュニティ

「Shopify コミュニティ」では質問を投稿・回答できます。

日本語の回答者が少ないため、Google翻訳をかけて英語で投稿することが多いです(もしくは日英併記)。

とはいえ、そこまで使っておらず過去に2件質問しただけです。こういったコミュニティは質問と回答が活発になればなるほど、有益性が増します。

私ももっと活用しないと駄目ですね。

テーマを作った会社のヘルプ

Shopifyでサイトを構築する際、その多くは有料テーマを導入していると思います。

有料テーマの中には、独自のテンプレートや独自のレイアウトを設定できる機能があります。その設定方法を調べるために、開発元の会社のヘルプページを見ることが多いです。

たとえば最近、Atlantic(アトランティック)という有料テーマを使用しました。

Atlantic(アトランティック)には、コレクションページ(カテゴリページ)やFAQページにオリジナルレイアウトを設定できる機能があったので、公式のヘルプを参照して設定しました。

Shopifyでのサイト構築を学ぶおすすめの方法

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • オンラインスクールで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
2021年7月30日(金)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

Shopifyで14日間の無料体験をはじめる

・登録にあたってはクレジットカードは不要
・必要なのはメールアドレスだけ
・14日間を過ぎたらサイトは凍結。自動で請求は発生しない
・無料体験中に構築したサイトは本契約後もそのまま使用可能
・無料体験期間中に正式契約しても、無料体験期間が終了するまで月額料金が請求されることはない

まとめ

この記事のポイントをまとめます。

Shopify案件を行う際に参考にしているサイトは以下です。

ドキュメントは基本的に英語です。Chromeの自動翻訳を使って読んでいます。

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。