shopifyのカスタマイズ方法｜カスタマイズの目的に合わせたおすすめアプリもご紹介！【2024年最新版】

近年日本でも利用企業や事業者が増えているshopifyですが、実際にどんな企業でどのようなサービスがあるのかなど、詳しく知らないという人も多いのではないでしょうか。ECサイト運営の為のプラットフォームを展開しているshopifyは、簡単に低コストでECサイトを導入・運営できるため、個人から大企業まで多くの事業者に支持されているサービスです。この記事では、shopifyの事業やサービス内容から、アプリの活用を含めたECサイトのカスタマイズの方法までをまとめてご紹介します。

【関連ページ】
Shopifyにかかる費用・相場感や、あなたの目的別にShopifyに強いWeb制作会社をお探しいただけます。
Shopifyの費用・相場
shopifyに強いホームページ制作会社 / Web制作会社一覧

shopify（ショッピファイ）はECサイトの開設から運営までをサポートするサブスクリプション型のサービスです。これまではECサイトを開設、運営するためには自社でサーバを用意しパッケージを導入しなければなりませんでした。しかし、サブスクリプションでこれらのサービスを展開しているshopifyであれば初期費用なしでサーバ管理などの負担もなく、月額費用と簡単な設定のみでECサイトを開設できることから高い評価を得ています。さらにshopifyはECサイトの管理だけではなく、会計処理や配送、マーケティングなどの商品販売に関わるビジネスを運営していくにあたって必要な機能がすべて揃っています。

shopifyはECサイト構築、運営の為のプラットフォームですが、その特徴は多岐に渡ります。一番の特徴はその拡張性の高さです。shopifyのコアのサービスはECサイトの構築ですが、それに加えて6,000種類を越えるアプリがshopifyのアプリストアを通じて提供されています。ECサイトの機能やデザインのカスタマイズはもちろん、マーケティングなどを始めとしたバックオフィス業務に必要なアプリも多く用意されており、他社の基本機能以外が更新されないなどと言ったストレスなく、思い通りのECサイトを構築可能です。さらに、多くのSNSとも連携でき、越境ECにも対応しているため、日本国内はもちろん、国外を含めた顧客にリーチすることが叶います。

ここでは、実際にshopifyを利用して自社のサイトを簡単にカスタマイズしていく手順をご紹介します。以下の順番でshoifyのカスタマイズ方法をご紹介します。

・カスタマイズを始める前の準備をする
・自社ECサイトに合うテーマを選び設定する
・商品ページを設定する。
・コードを打ち込み編集することも可能

shopifyでは、ほとんどの操作や設定でhtmlなどを利用したプログラミング技術は必要無く、レイアウトやカラー、文字フォントなどのカスタマイズが可能です。もちろん、プログラミングの知識があればさらにECサイト構築の自由度は向上しますが、以下の手順で設定を進めていけば、特別な知識がなくとも高いクオリティのECサイトを作成できます。

実際にテーマの編集や、カスタマイズを始める前に確認しておきたいことや注意事項は以下の通りです。

・カスタマイズをする前にバックアップを取る
・自社が利用可能なテーマやプラン毎のサポートを確認する
・カスタマイズに利用する画像の規定を把握しておく

専門知識がなくともECサイトを構築、運営ができるshopifyですが、カスタマイズや設定を開始してから不備や不足に気づいてしまうと、修正に大きな時間や手間を要してしまいます。しかし、これら3つのポイントをしっかり押さえておくことで、準備しておくべきものや気を付けるポイントも明確になり、より効率的に作業を進めることが可能です。ここでは、これらのポイントを1つずつご紹介します。

テーマを選んだら、カスタマイズを開始する前に必ずバックアップを取っておきましょう。テーマの編集を始めてから設定にミスが見つかった場合、バックアップがあればすぐに元の状態に戻せます。テーマを複製するためには、管理画面の「オンラインストア」から「テーマ」を選択しましょう。バックアップを取りたいテーマを選択し「アクション」から「複製」をクリックするとCSVファイルでバックアップが完了です。複製されたテーマはテーマページに表示されますので、正しくバックアップが完了しているかはテーマページから確認しましょう。テーマストアで購入したテーマもバックアップしたテーマも同じくテーマページに保管されますが、保管できる上限は20個で、さらに一度削除してしまうと復元できないため注意してください。

テーマによって受けられるサポートレベルが異なります。テーマは無料のものと有料のものがあり、shopifyが提供しているのか外部からの提供かどうかでサポートの内容も変わりますので、それらも合わせて確認しておきましょう。実際にカスタマイズを開始した際、テーマを大幅にカスタマイズすると、サポートが受けられる範囲から外れてしまう場合があります。外部の有料テーマを利用する場合はshopifyではなく開発者へ直接問い合わせましょう。shopifyが提供している無料のテーマを利用しており、ベーシックプラン以上の有料プランを利用している場合は無料で60分のサポートを受けることも可能です。

ECサイトの構築やカスタマイズ、その後の商品登録まで、多くの種類の画像を使用します。登録できる画像のフォーマットは以下の通りです。

・JPG／JPEG
・プログレッシブJPEG
・PNG
・GIF
・HEIC
・WebP

アップロードに対応している画像のサイズとファイルのサイズは以下の通りです。

・20メガピクセル
・20MB

画像のアップロードはファイルページもしくはテーマエディタから可能です。ファイルページに画像をアップロードすればテーマ編集中にも保存した画像を確認できます。テーマエディタで画像を保存するよりも自由度が高いため、慣れないうちはファイルページへの画像保存をおすすめします。

ここからは実際のECサイトの構築に進むためのshopifyのカスタマイズ方法についてご紹介します。本来ホームページやオンラインストアの構築には、htmlやCSSなどのコード編集やプログラミングのスキルが求められます。一方で、shopifyでは誰でも簡単にカスタマイズができるように多くのテーマや、レイアウトや文字体裁、色などの編集、アプリやコンテンツなどの機能拡張などが簡単な操作で構築できる環境が整えられています。今回は、このshopifyで用意されている基本のカスタマイズ方法を始めとした基本機能について、テーマを選択し、編集や機能を追加する行程まで順を追ってご紹介します。

テーマは自社のECサイトの印象を決める部分です。なんとなく決めるのではなく、メインとなる商品やお店やブランドのコンセプトに沿うテーマを選択します。もちろんテーマは後からカスタマイズ可能ですが、テーマのメインの印象はあまり変わりません。オンラインストアの印象と商品やブランドのイメージが一致しない場合、お客様へ与える印象が意図したものと違ってしまったり、雑多な印象を与えてしまったりします。テーマが商品やブランドコンセプトに沿うものや、ターゲット層が好むデザインや構造であれば、お客様に与える商品のイメージもポジティブになりやすく、購買意欲が高まり売り上げ向上にもつながります。

ECサイトのメインのイメージに合わせてテーマを選択したら、次にブランドらしさを強調し、他ブランドとの差別化を図るために、テーマエディタからカスタマイズを行います。テーマエディタは、以下の順番で起動します。

１：管理画面から「オンラインストア」を選択
２：「テーマ」をクリック
３：テーマライブラリーから編集したいテーマを見つける
４：編集するテーマの「カスタマイズ」をクリック
５：「テーマエディタ」が起動したら「カスタマイズ」をクリック

テーマエディタでは、提供されているコンテンツや設定できるカスタマイズがサイドバーで表示されます。サイドバーは、作業画面のサイズによってシングルかダブルで自動的に変更が可能です。

実際のコンテンツやテーマの設定は、上記でご紹介したテーマエディタの起動まではほぼ同じステップです。上記でご紹介したように、配色やフォント、レイアウトの変更はもちろん、セクションの追加もテーマエディタを利用すれば簡単に設定できます。ほかにも、会社ロゴの追加や、スライドショーの設定やSNSとの提携などのカスタマイズやコンテンツの追加も可能です。ECサイトの印象の大半はテーマで決まりますが、コンテンツの追加や、レイアウトを変更することで、見やすさや使用感を含めて差別化を図れます。さらに、テキストやボタンなど細かい設定を行うことで、ブランドらしさを表現するなど、雰囲気を簡単に変更可能です。

序盤にご紹介したように、バックアップは適宜行いましょう。特に、テーマを使用せず、管理画面から直接テーマコードを編集する場合や、既存のテーマを大きくカスタマイズしたい場合は、ミスがあった場合やリニューアルをするときなどに簡単に初期の状態に戻れるように複数のバックアップを取っておくことをおすすめします。バックアップがあれば大きなミスがみつかっても、コードの書き換えなどの負担なく、ミスしたテーマを削除し、初期の状態のテーマを利用してすぐに作業を再開可能です。初期の状態はもちろん、ECサイトのベースとなるカスタマイズができた時にも、バックアップを取っておくことでその後の変更やイレギュラーなどにも大きな負担なく対応できます。

ECサイトのデザインや設定が完了したら、次はショップの核となる商品ページの設定です。ここでは以下の順番で商品ページの設定方法についてご紹介します。

・商品名の設定
・商品画像の設定
・商品説明とキャッチコピーの設定
・購入ボタンの設定
・商品レビューの追加

ECサイトのテーマやカスタマイズはあくまで商品やブランドのコンセプトを伝え、購買意欲の向上や、商品を探しやすくするためのものです。それに対し、商品ページはお客様がその商品を購入するかどうかを判断する為の重要なページとなります。次の項目では、売り上げに確実につなげるために必要なポイントも合わせてご紹介しますのでぜひ参考にしてみてください。

商品名の設定で意識しておきたいことは、目に留まりやすい商品名を付けることです。キャッチコピーを考えるように、その商品がどんなもので、使用用途が明確に分けましょう。さらにSEO対策として、ブランド名と商品名を合わせて掲載することで、潜在顧客にもリーチしやすくなります。気を付けたいのが、普段から購入している人やその分野の人にしか分からない名前や略称を使用することです。商品名は長くなってしまう場合によく見られますが、例としてタイトスカートをタイトSKのように記載すると、商品の画像を確認しない限りタイトスカートであることが伝わらず、さらにWeb検索の結果としても上位に表示されなくなってしまう場合があります。

商品を見つけてもらうために必要な商品名の設定でしたが、次に大切なものが商品画像の設定です。正面からの画像だけでなく、多方面から撮影しディテールが伝わるように必要に応じてアップの写真も用意しましょう。商品の形や詳細、質を伝える為に重要なポイントです。さらにアピールポイントがあればそれらが伝わる画像を用意します。商品の使用感を伝え、お客様が商品を購入後使用しているイメージをしやすくするために、使用画像も複数撮影しましょう。洋服であれば複数のコーディネートやモデル、日用雑貨であれば使用を想定されるシーンにマッチした写真を撮影します。1つの商品に対して複数の画像を用意し、必要があれば画像編集も必要です。その中から質の高い画像を複数枚選択し、商品画像として設定します。

商品説明の部分ではまず、商品の特徴を簡潔に記載します。最初はその商品の一番のセールスポイントを使用シーンなどとあわせて紹介しましょう。簡単な説明のあとは、その商品のサイズやスペックを記載します。これらは大切な商品情報ですので箇条書きにすることで、お客様から見て分かりやすい情報を記載可能です。必ず伝えるべき情報を記載してから、商品やショップの背景を合わせて紹介しましょう。このプラスアルファの情報は商品価値を高め、購入を迷っているお客様の購入へのきっかけになる場合もあるため、伝わりやすくイメージしやすい文章が必要です。しかし、商品説明は長くなればなるほど最後まで読まれにくくなるため、ポイントを押さえながらも読みやすい文章や記入方法を意識しましょう。

shopifyでは購入ボタンもカスタマイズが可能です。デザインはもちろん、ボタンの大きさや表示する位置、フォントなども変更でき、さらに購入ボタンを押した後に表示されるアクションまでカスタマイズできます。購入ボタンが分かりにくいなど、デザインによっては、購買意欲が下がってしまう原因にもなるため、ここでもカスタマイズは丁寧に行いましょう。デザインやボタン位置などに迷ったら、ブランドコンセプトや扱う商品、ターゲット層などが近いECサイトなどをチェックして、参考にしてみてください。サイトによって、購入ボタンの表示方法は様々ですので、カスタマイズができる範囲と、ブランドイメージを合わせながら調整します。

商品レビューは購入者の直接の声として、使用シーンがイメージしやすく、商品や商品情報だけでなく、お店への安心感や信憑性を上げるためにも有効です。商品レビューがあるだけで、購買に迷っているお客様の判断材料になり、購買率のアップにつながります。商品レビューはshopifyのアプリストアで提供されている無料アプリがあるため、ぜひ利用してみてください。レビューをそのまま利用してもいいですが、フォームのカスタマイズをすることでさらにブランドらしさも演出できます。ネットショッピングでは商品レビューの内容や数がそのまま購買率に直結しますので、ほかのECサイトを運営している場合はレビューをshopifyに共有し、より多くのお客様の声を商品ページに反映させましょう。

shopifyのテンプレート言語のLiquidやHTML、CSSの知識があればテーマコードの編集も可能です。基本のカスタマイズだけでなく、カスタマイズしたい範囲が限定的な場合や、カスタマイズ以上の大幅な変更もしくはECサイトをまとめて構築したい場合はコードを打ち込んで編集することも有効です。さらに、アップグレード前の状態に戻したい場合も、Liquidの知識があれば、コードの日付の変更だけで元の状態に戻すことが可能です。ただし、テーマコードを直接打ち込んで編集すると、利用しているテーマのアップグレードの対象外となる場合があるため、基本のカスタマイズやアプリでは対応できない場合のみコードを打ち込んでの編集を活用しましょう。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

目的別に使えるおすすめのアプリを順番にご紹介します。以下、表にポイントもまとめましたので合わせてチェックしてください。

配送
・配送日時指定.amp
・配送マネージャー

越境EC
・Translate My Store ＆ Currency
・BEST Currency Comverter

販売促進
・ロイヤルティ・特典・紹介
・Privy-Pop Ups, Email, & SMS

マーケティング
・Yotpo:UGCマーケティング
・Sumo: Boost Conversion ＆Sales

CRM
・CRM PLUS on LINE
・Growave - Loyalty, Wishlist +3

合理化
・チャネルトーク
・Back In Stock
SNS
・One Clock Social LoginOne Clock Social Login
・AdSIST

近年、日本国内でも利用企業が増えているshopifyの基本的な活用方法をご紹介しました。shopifyは14日間の無料体験に加え、初心者から大企業まで様々な規模やニーズに対応したプランが提供されています。ECサイト管理の一番の負担となるサーバやネットワーク管理から解放されて、サイトの運営に専念できます。
ECサイトの運営やshopifyへの移行を検討するなら、まずは無料体験を通してそのカスタマイズ性の高さを体験し、サイトにピッタリのプランを検討してみるのはいかがでしょうか。また、アイミツではご要望を伺った上で、条件に合うホームページ制作会社を無料で複数社ご紹介可能です。会社選びでお困りの方は、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】 
shopifyに強いホームページ制作会社 / Web制作会社一覧
【費用感を知りたいという方はこちら】 
Shopifyの費用・相場