誰でも気軽にECサイトを制作できるプラットフォーム、Shopify（ショピファイ）。
オンラインストアの作成サービスでは世界シェアNo.1を誇っていますが、その座にあぐらをかくことなく、日々機能の拡張を続けています。
「シンプルで高機能」が特徴のShopifyですが、初心者から見れば「ECプラットフォーム」という言葉自体ハードルが高そうに感じてしまうもの。
「知識も経験もない自分が本当に作れるの？」と不安に感じている方も多いのではないでしょうか？
この記事では、そんな方々のために、Shopify初級編としてデザイン編集・カスタマイズの方法と手順についてわかりやすくご説明していきます。
Contents
【初級編】Shopifyのデザイン編集・カスタマイズ方法＆手順
ここからは、初心者向けのShopify（ショッピファイ）のテーマ設定・編集方法を解説していきます。
ここで解説する事項は、ShopifyでECサイトを運営する上では欠かせない要件です。
最低限知っておくべきことを記載しているため、初心者の方はしっかりと読み進めてください！
手順①：テーマを選ぶ
まずは、ショップの顔とも言える「テーマ」を選びましょう。
- ホームで「テーマをカスタマイズする」をクリックする
- テーマライブラリーの「無料のテーマを探す」もしくは「テーマストアに行く」をクリックする
- 好みのテーマを選び、「スタイル」を決める
- 「テーマライブラリーに追加する」をクリックする
テーマライブラリーにあるテーマは、無料のものから有料のものまで数多く揃っています。
アンオフィシャルのテーマまで含めると、その数はなんと1,000種類以上！
ブランドのイメージにマッチするテーマを、じっくり探してみてください。
手順②：テーマエディタを起動させる
基本となるテーマを選んでも、サイトはまだまだ「デフォルト」状態。
カラーやフォントをアレンジして、ブランドをより魅力的に見せていく必要があります！
そのためには、まず編集画面である「テーマエディタ」を起動しましょう。
- ホームで「テーマをカスタマイズする」をクリックする
- 編集したいテーマの「カスタマイズ」を選択する
手順③：テーマの設定や基本情報を行う
テーマエディタを起動させたら、早速中身の編集に取り掛かりましょう。
この編集画面は大きく「セクション」「テーマ設定」に分けられており、それぞれ次の役割を持ちます。
- セクション：各ページのコンテンツを追加・編集・削除したり、レイアウトを変更する
- テーマ設定：ページ内のフォントと色をカスタマイズしたり、ソーシャルメディアのリンクを編集する
機能がたくさんありますが、「何から手を付ければ良いの？」と悩む必要はありません。
Shopifyはテーマを選んだ時点で、必要最低限のコンテンツがきちんとそろっています。
最初は自分がわかる範囲で編集し、慣れたら知らない機能にも手を伸ばしていきましょう！
【上級編】Shopifyのテーマコード編集・カスタマイズ方法＆手順
ここまでは、初心者の方のためにShopify（ショッピファイ）のテーマ設定・編集方法を説明しました。
しかし、いざサイトの編集を始めると「もっとこうしたい！」と欲望がどんどん生まれてしまうのが人間の性というもの。
そこで、ここからはコード編集による上級のカスタマイズテクニックを紹介します。
前提：マークアップ言語（HTML・CSS・Liquid）の知識は必須
これから紹介するShopifyのテーマ編集には、次の3種のマークアップ言語を使用します。
- HTML：ウェブページを作成するための言語
- CSS：HTMLに装飾を加える言語
- Liquid：Shopifyによって作成されたテンプレート言語
Webサイトのコーディングに用いられる言語を使用して、より細かい編集ができるようになるということです。
「プロでもないし、言語なんて全然わからない！」という方もご心配なく。
Shopifyの知識に精通した「Shopify Expert」に開発・制作を委託する方法や、本記事で後述するShopifyアプリの力を借りて言語知識不要のテーマカスタマイズを行うことも可能です。
手順①：テーマのバックアップを取得する
さて、マークアップ言語はバッチリという方に、具体的な手順を紹介していきましょう。
まずは、バックアップを取得して、いつでも初期コードに戻れる環境を作りましょう。
- ホームで「テーマをカスタマイズする」をクリックする
- 編集したいテーマの「アクション」をクリックする
- 「複製する」をクリックする
これにより、途中で「元に戻したい」という状態になったとしても、変更を破棄して途中から再スタートできるようになります。
手順②：テーマコードを編集する
では、早速テーマコードを編集してみましょう。
- ホームで「テーマをカスタマイズする」をクリックする
- 編集したいテーマの「アクション」をクリックする
- 「コードを編集する」をクリックする
これで、コードエディタが立ち上がります。
左側にコードディレクトリ、右側は編集スペースとなっています。
ページ右下には「ライト/ダーク」ボタンがついているので、好みに合わせて使用してください。
Shopifyの商品ページで最低限やっておくべきカスタマイズ
ここからは、初級編に戻りShopify（ショッピファイ）の商品ページで最低限必ずやって欲しい設定について解説します。
肝心の商品購買に直結する部分になりますので、しっかりチェックしてくださいね。
作業に入る前に、ホームで「商品を追加する」をクリックして商品編集画面を開きましょう。
- 商品名の設定
- 商品画像の設定
- 商品説明の設定
- タイトルと説明文の設定
- 購入ボタンの設置
- アップセルの設定
カスタマイズ①：商品名の設定
販売する商品の名前を設定してください。
消費者の目を引く印象的なコピーにすることが重要です。
また、GoogleやYahoo!で検索された際に表示されやすくされるために（SEO対策）、ブランド名も一緒に記載すると良いでしょう。
さらにSEO効果を高めたい方は、商品名にh1タグ（Webページ中の最上位見出しを記述するHTMLタグ）を埋めておくと良いですよ。
カスタマイズ②：商品画像の設定
実際に手に取って商品を確認できないEC販売にとって、商品画像は重要です。
よりリアリティをもって商品の良さを伝えるため、画像はできるだけ複数枚用意しましょう。
また、ただ商品を撮影するだけでなく「使用感」をイメージさせることがポイントです。
服であれば着用シーンを撮影したり、家具であれば存在感を確認できるような設置イメージ写真を用意するとベターですよ。
カスタマイズ③：商品説明の設定
画像だけではなく、文字でもしっかり商品の特徴を伝えましょう。
文頭からグダグダと前置きせず、まずは商品の特徴とベネフィットを簡潔に一目でわかるよう記載すること。
それに続いて、商品への想いや背景をまとめるのが良いでしょう。
あまりに長い文章は途中離脱のリスクを生むため、読み手が負担にならない程度の文字量を心がけてください。
カスタマイズ④：タイトルと説明文の設定
Shopifyの商品編集画面では、SEO対策のための「meta title」（メタ・タイトル）「meta description」（メタ・ディスクリプション）を設定することができます。
これは、GoogleやYahoo!といった検索エンジンの検索結果画面で表示されるタイトルと説明文です。
タイトルはキーワードを意識し、ディスクリプション（説明文）はキャッチーで思わずクリックしたくなる文章にすることで、SEO効果を最大化させることができますよ。
カスタマイズ⑥：購入ボタンの設置
購入ボタンのデザインや配置も、実購買に繋がるかどうかを左右する重要なファクターです。
Shopifyでは、購入ボタンを細かくカスタマイズすることが可能です。
設置位置から色・サイズ・フォントに加え、ボタン押下時のアクションまでアレンジは自由自在。
販売する商品の特性や消費者のサイト閲覧時の行動をイメージしながら、購入意欲の高まったタイミングに最適な購入ボタンを表示できるよう工夫しましょう。
カスタマイズ⑦：アップセルの設定
顧客単価アップを狙う仕組みを取り入れることも、ECサイトの構築には不可欠です。
より高機能・高額な商品の購入を促すアップセルや、別商品の追加購入を促すクロスセルで売上向上を目指しましょう。
Shopifyにおけるアップセル・クロスセルの設定は、Shopifyアプリを使用したカスタマイズが必要です。
このアプリについては、次項で詳しく説明します。
Shopifyの編集・カスタマイズに使えるアプリ
冒頭でも触れたように、Shopifyが選ばれる理由の一つとなっているのが、その拡張性です。
クラウドベースのプラットフォームなので、日々最新の機能が更新されています。
また、その機能の拡張性を支えているのが「Shopify app store」です。
Apple社のApp storeやGoogle Play storeのように、拡張機能を持ったアプリをダウンロードできるオンラインストアで、ダウンロードできるアプリは数千種類以上！
自分が欲しい機能を提供しているアプリを検索・ダウンロードすることで、よりサイトを細かくカスタマイズすることができます。
ここからは、Shopifyの編集・カスタマイズに便利なアプリを6つ紹介します。
ぜひ自分のサイトにぴったりのアプリを見つけてみてください！
今回紹介するアプリは次の6種類です。
- 【商品検索のサポート】Product Filter & Search
- 【画像のズーム】All In One Product Zoom
- 【デザイン変更】Shogun Landing Page Builder
- 【配送設定】Parcelify
- 【多通貨変換】BEST Currency Converter
- 【関連商品の表示】Shop The Look
【商品検索のサポート】Product Filter & Search
最初に紹介するのが、サイト内の商品検索をスムーズにするアプリ「Product Filter & Search」です。
サイト訪問者が検索ボックスにキーワードを入力すると、商品名だけではなく商品画像や価格等の細かい情報がプルダウンで表示されます。
また、このアプリは検索時のフィルター機能も充実。
- コレクション
- 仕入先
- 商品タイプ
- 色
- サイズ
- タグ
- 評価
- 価格
- 値引率
- 在庫切れ
など、さまざまなフィルターで絞り込み検索を行うことが可能です。
インストールも簡単で、すぐに導入することができます。
【画像のズーム】All In One Product Zoom
気になる商品を見つけたのに、画像が小さくてディテールを確認できないから諦めたなんて経験はありませんか？
そんな悩みを解決するのが、「All In One Product Zoom」です。
製品画像にズーム機能を持たせることのできるアプリで、ズームの種類は3タイプ。
- ウィンドウズーム：商品画像の横に拡大画像を表示
- インナーズーム：商品画像上にカーソルを置くと、その部分だけ画像を拡大
- レンズズーム：虫眼鏡のように画像を拡大（レンズの形は円形・正方形から選択）
ズームレベルや位置、サイズ、色までカスタマイズできるため、掲載画像・商品に合わせてズーム機能も調整する、といったアレンジが可能です。
- 費用：1.90＄（月額）（3日間の無料トライアル期間あり）
- 言語：英語
【デザイン変更】Shogun Landing Page Builder
上級編で紹介したテーマの細かいカスタマイズを、マークアップ言語の知識がなくても作りこんでいけるアプリが「Shogun Landing Page Builder」です。
ドラッグ＆ドロップ式のページビルダを使用して、必要な項目を組み合わせていくだけで理想のページを構築していくことが可能です。
提供されているすべてのテーマで利用することができ、カスタマイズ対象のページは次のとおりです。
- ランディングページ
- 商品ページ
- ブログページ
編集画面でプレビューもチェックできるため、初心者の方も完成ページをイメージしながら編集を進めていくことができます。
【配送設定】Parcelify
Shopifyの送料は、デフォルトで都道府県・合計価格・重量による設定が可能です。
しかし、特殊な配送方法が必要な商品の配送や、特別な送料割引を適用したいケースではデフォルト設定で対応できません。
そこで、細かな送料設定を可能にするのが「Parcelify」です。
このParcelifyを利用することで、例えば下記のような条件付けが可能になります。
- 冷蔵・冷凍便配送による送料の変更
- 離島など、都道府県一律に出来ない送料の細かな設定
- 〇〇と他2点を購入したら送料無料、など合計価格以外の送料割引プロモーション
送料も大切な売上です。
配送先や方法によっては、バカにならない費用が発生します。
折角品物を売ったのに赤字……といったことにならないよう、送料も細かく設定しましょう。
- 費用：12.99＄（月額）（14日間の無料トライアル期間あり）
- 言語：英語
【多通貨変換】BEST Currency Converter
世界175ヶ国、60万以上の店舗で利用されているShopifyでは、越境EC（国境を超えて販売を行うECサイトの取引）にも挑戦することが可能です。
しかし、海外のユーザーがサイトを訪問した際に、価格が円表記しかなければ「レートを確認＆計算する」という余計な手間がかかってしまいます。
せっかくサイト訪問してくれたお客様を、価格表記で離脱させていしまうのはもったいないです！
そこで活用していただきたいのが、「BEST Currency Converter」です。
このアプリの有料版は、サイト訪問者の所在地に合わせて自動で通貨を変換（対応通貨は160種類以上）してくれます。
レートは1日2回更新され、小数点以下の削除や四捨五入等も設定できます。
無料版は5種類の通貨のみ設定可能であるため、想定される規模やコストバランスを見て、より合ったコースを選択しましょう。
ウェブインバウンド需要がどんどん高まっていく昨今、越境ECは大きなビジネスチャンス。
売上チャンス掴むためにも、このアプリを使って越境ECにチャレンジしてみてください。
- 費用：9.95＄（30日間の無料トライアル期間あり）
- 言語：英語
【関連商品の表示】Shop The Look
ECサイトを運用する上で欠かせないのが、アップセル・クロスセルの仕掛けです。
「Shop The Look」は、商品紹介ページに「Shop The Lookボタン」を出現させ、そのボタンを押下すると関連商品の情報が確認できるという機能を与えるアプリケーションです。
「Shop The Lookボタン」で参照できる関連品情報には、そのままカートに関連品を追加できる「ADD TO CARTボタン」も装備しています。
例えば、アパレル関連のサイトでは、1枚の写真に対してコーディネートアイテムの全てを購入促進させることが可能です。
ユーザー・自社商品のタッチポイントが増えるため、コンバージョン率アップにも期待できるShop The Look。
売上拡大のための基本ツールとして、是非取り入れていただきたいアプリです。
- 費用：12.99＄（月額）
- 言語：英語
まとめ
ここまで、Shopify（ショッピファイ）で構築するECサイトをより「売り」につなげるための、デザイン編集・カスタマイズ方法を紹介しました。
長くなりましたが、要点をまとめると次のとおりです。
- 基本設定は、管理画面ホームの「テーマをカスタマイズする」から行う
- 基本設定外の細かな設定は、マークアップ言語を用いたコードを編集する
- マークアップ言語がわからなくても、アプリの力を借りて細かいカスタマイズができる
少し難しいと感じられる内容もあったかと思いますが、まずは自分が「サイトに搭載したい機能」を整理し、実現に必要な設定を調べましょう。
マークアップ言語など、自分のスキル以上の力が必要だとわかった際には、専門知識を持ったサポート業者にカスタマイズを委託することも方法の一つです。
無限の拡張性を持つShopify。
持てる知識と夢をしっかり詰め込んで、自分だけの「売れるECサイト」を作り上げてください！
Shopify Guide編集部は、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションをお考えの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
