Shopifyのカスタマイズ。Shopifyのカスタマイズ。デザインを変えて売れるECサイトを作る方法2020年1月10日Shopifyのカスタマイズ。本記事はこのようなお悩みをもつ方のための記事です。そこでShopifyのカスタマイズについて、下記のようなポイントで解説をしていきます。【基本編】Shopifyのデザインのカスタマイズ・編集方法まずはShopifyのカスタマイズの「基本編」をお伝えします。「テーマ選び」や「レイアウト」「配色」「フォントスタイル」などの編集方法についてお伝えします。好みのテーマを選択するまずは好みのテーマを選択するところから始めましょう。クリックデフォルトでは「Debut(デビュー)」というテーマが選択されています。テーマを選択します「無料のテーマ」を選ぶと、管理画面上でShopifyの無料テーマを探すことができます。お気に入りのテーマを選びましょう。テーマを選んだら、スタイルを決めて「テーマライブラリーに追加する」をクリックします。すると「テーマライブラリー」にテーマが追加されます。テーマストア」を選ぶと、別タブが開きます。有料/無料のテーマを手に入れることができます。管理画面からテーマエディタを起動するテーマエディタを起動し、配色やフォントなど、基本的な設定をしましょう。選択しますすると、「テーマエディタ」が起動しますので「カスタマイズ」をクリック。「テーマエディタ」が起動しました。コンテンツの追加や設定を行うテーマエディタを起動したら「セクション」「テーマ設定」タブでカスタマイズしたい箇所を選択し、作業を進めましょう。「ウェブサイトのレイアウト」「配色」「フォントスタイル」などを変更できます。テーマのカスタマイズにより、あなたのECサイトの独自性を出すことができます。続いて、Shopifyカスタマイズの応用編です。テーマコードをカスタマイズする方法をお伝えします。前セクションの基本編でお伝えした「テーマエディタ」を使用することで、カスタマイズが可能です。テーマエディタを使用しても、変更したい箇所の設定ができない場合は「テーマコード」を編集することで、より細かな変更を加えることができます。「テーマコード」を編集する場合には、HTML、CSSに加え、Liquidと呼ばれるShopifyのテンプレート言語の知識が必要です。知識がある場合のみ、テーマコードを編集しましょう。Expert」に依頼をしてください。テーマの複製をしてバックアップを取る「テーマコード」編集する場合、まずテーマの複製をしてパックアップを取りましょう。必要に応じて、変更を破棄して、再度開始できるようにするためです。「コードエディタ」にてファイルを編集する「コードエディタ」では、左サイドにテーマファイルのディレクトリ。右サイドにファイルを編集するためのスペースが表示されます。「コードエディタ」がフルスクリーンに展開されている間は、ページの右下にあるボタンで「ダーク」モードが使用できます。Shopifyの商品ページでカスタマイズする際のポイントこのセクションでは、Shopifyの商品ページで必要な要素や、重要なポイントなどを整理してお伝えします。商品画像(メインビジュアル)もっとも重要なパーツの一つが商品画像です。ただの商品画像だけではなく、実際にその商品を使用している画像も見せられるとベター。アパレルのECサイトの商品ページであれば、実際にその服を来ている人の写真を入れるなど。多くの訪問者はファーストビューの段階で、そのページに滞在するか離脱するかを決めます。商品詳細ページは、その商品のLPのようなもの。ファーストビューで勝負は決すると思って、より高品質な画像を用意しましょう。商品名(キャッチコピー)1の商品画像と同様に大事なパーツが商品名(キャッチコピー)です。商品名だけではなく、ブランド名も一緒に記載をしておくとベター。商品名」と打ち込むことが多いためです。このようなことを考えて、SEO効果を高めるために、商品名にはH1タグを設置しておくこともオススメします。次に重要なのが商品説明です。商品説明のポイントは「リスト」と「ベネフィット」です。リストを使うことで、パッとその商品の特徴が掴めます。単なる商品説明ではなくベネフィット(その商品を手に入れることで得られるユーザーの価値・未来)を伝えることで、商品説明の魅力が増します。購入ボタンCTA(コール・トゥ・アクション)ボタンも、ページのコンバージョン率を大きく左右する要素です。文言サイズ一様にこれが正解といえるわけではないので、サイトのテーマやユーザーの好みに合わせてテストしてみる必要があります。メタタイトルとメタディスクリプションメタタイトル・メタディスクリプションは、検索エンジンでの検索結果に表れるタイトルと説明文です。先ほども商品名のところで触れましたが、SEO対策をすることで商品詳細ページへの直接のアクセスを見込めます。ECサイトでは、商品のメタタイトルとメタディスクリプションが同一の設定になっていることも多いですが、しっかりと設定すべきポイントの一つです。何万点もの商品を扱っているECサイトでは、設定が大変かと思いますが、テンプレートなどを用意しつつ効率よく設定しましょう。商品のレビューを用意することで、商品の購入率(コンバージョン率)を高められます。Shopifyでは商品レビューを入れるためのアプリもありますので、ぜひアプリの導入を検討しましょう。トラストマークサイトの安全性や商品の信頼性などを証明するトラストマークも、ECサイトに表示させたいものの一つです。個人情報保護ポリシーに準拠していることを示すPマークや、セキュリティ対策証明のマークなど。対応している支払い方法のロゴなど(Amazonペイなど)を見せることも有効。ユーザーに安心を与えることで、コンバージョン率を高めます。クロスセルの仕組みクロスセルの仕組みを入れることも、商品ページに欲しい要素の一つです。ECで売上を上げるために、クロスセルすることで一人当たりの購入単価を上げられます。Look」というアプリを使うことで簡単にクロスセルの仕組みを導入できます。本セクションでは、Shopifyのカスタマイズ・編集に役立つプラグインを5つご紹介します。Builder(以下、Shogun)は、Shopify上のランディングページや商品ページ、ブログ、コレクションページを簡単にデザインできるアプリです。コーディングなしのドラッグアンドドロップでカスタマイズできます。Shogunはテンプレートも豊富で、レスポンシブ対応もしています。どんなテーマでもカスタマイズできるので、他アプリとの相性の心配は不要です。Zoomは、詳細部分を確認できるよう、製品ビューに画像ズーム機能を追加するためのアプリです。下記の3つのズームタイプから選択可能。ウィンドウズームインナーズームレンズズーム「ウィンドウズーム」では、商品画像の横に拡大された画像が拡大表示されます。「インナーズーム」では、商品画像にカーソルを合わせると、合わせた個所が拡大されます。「レンズズーム」では、虫眼鏡のように画像を拡大して見ることができます。(正方形、円形のレンズタイプを選択可能)さらに、下記の設定も簡単にカスタマイズ可能です。Converterは、ユーザーにあった通貨表示に変更するための「多通貨変換アプリ」です。アプリの特徴は下記の通り。見やすい換算価格表示が可能(小数点以下の削除など)必要に応じて、通貨コンバーターを非表示にし、バックグラウンドでのみ実行できる(有料版のみ)無料版の場合は、下記の機能のみが使用可能です。Searchは、ユーザーの商品検索をサポートするアプリです。最大で100万個の商品を検索でき、新商品もリアルタイムで表示されます。ワンクリックインストールで、簡単に起動・実行できます。ニーズに合わせてカスタマイズも可能です。下記のフィルタリング検索ができます。LOOK」ボタンを追加し、関連商品をすべて確認、カートへ誘導が可能となるアプリです。このアプリを使用することで、アパレルECの場合、ユーザーはモデルが製品写真で着用しているすべてのアイテムをカートに追加できます。個々の製品ページにアクセスする必要がなく、スムーズへカートへ誘導できます。1枚の写真から複数の商品のアピールができ、アップセル・クロスセルが期待できるようになります。Experts認定企業オススメのアプリ12選(一覧あり)【まとめ】Shopifyで魅力的なECサイトを作るために本記事では、Shopifyのカスタマイズについて詳しく知りたい方向けに、情報をご提供してきました。本記事の要点をまとめると、下記の通りです。Shopifyでは、管理画面からカスタマイズが可能そしてShopifyはプラグインが豊富。今回ご紹介したShopifyのカスタマイズに関する情報によって、より魅力的なECサイトを作り上げましょう。※この記事は2019年12月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。国内3社目のShopifyエキスパートとして、サイトの制作・運営・物流までワンストップでサービスを展開しています。Expertsに認定されているウェブ制作会社です。当社では新規のECサイト制作・構築、既存サイトからの移転・乗り替えだけでなく、オープン後の運営代行・コンサルティング・在庫連携・物流まで幅広くサポートが可能です。↑メールマガジンに登録する登録する※不定期でShopifyやEC関連コンテンツを配信します。文章・写真などの複製、無断転載を禁止します。Inc.右と左の矢印を使ってスライドショーをナビゲートするか、モバイルデバイスを使用している場合は左右にスワイプします選択範囲を選択すると、ページ全体がリフレッシュされますスペースキーを押してから矢印キーを押して選択します。