Shopifyテーマのカスタマイズを徹底解剖！初心者でもできるコード編集【2024年4月最新】

2024年4月13日

Shopifyは難しい設定やコードの編集をしなくても、自由にカスタマイズできるのが魅力です。とはいえ、初めてのカスタマイズでうまくいかない・どんな編集をすればいいのかイマイチよくわからないという人も多いです。

ここではShopifyのカスタマイズ方法を詳しく解説していきます。プログラミング経験がなくてもできるので、ぜひ参考にしてくださいね！

Shopify制作・運用にお困りではありませんか？

ECサイトの開設に何から始めていいか分からない…
ECサイトの開設を進めているものの、専門性の高いスタッフがおらず一向に進捗が生まれない…
ECサイトを持っているものの、ユーザーが訪れてくれるorサービスを利用してくれる状況になっていない…
ECサイトの追加・改修を行った際の不具合へのサポートに制作会社が対応してくれない…

上記のようなことでお困りでしたら、私たちRadineerに相談してみませんか？
Radineerでは、Web制作やオウンドメディア運用やSEO対策、Web広告運用など各分野のスペシャリストが担当し、お客様を徹底サポート。

現在の事業課題をヒアリングした上で、貴社のマーケティング予算や要望に合わせた最適なプランをご提案します。
「こんなことも相談できるのかな？」といった些細なお困りごとでもかまいません。

プロと一緒にお困りごとを一緒に解決していきましょう。まずはお気軽にフォームよりご相談ください。

案件のご相談はこちら

Shopifyのテーマのカスタマイズする方法

Shopifyは、ECサイト（オンラインショップ）の作成や運営を補助するためのプラットフォームです。現在、世界中で170万以上の企業やブランドが利用していると言われています。

Shopifyの最大の特徴は、HTMLなどのコード編集スキルがなくても、テーマと呼ばれるデザインテンプレートの設定を行うだけで、簡単にカスタマイズできる点です。フォント・メインカラー・レイアウトなどを変更できます。

1つ目はコード編集をせずにデザインの設定や編集をする方法。カスタマイズは難しいと思っていて手が出せなかった人は、ぜひ挑戦してみてください。

凝ったカスタマイズをすることはできませんが、レイアウトやカラーの変更などをすることができます。難しいコード編集は必要ないので、初心者の方やコード編集が苦手・不安な人におすすめの方法です。

2つ目は、コード編集をしてカスタマイズする方法です。より凝ったカスタマイズをしたい人はコード編集をしてカスタマイズしましょう。コード編集をするので作業は難しくなりますが、独自のデザインを作り出すことができます。

Shopifyでは、Liquidという独自言語が使用されています。Liquidは、HTMLの文中にコードを直接書くことで処理や出力を行います。カスタマイズする際は、このLiquidの基本を理解してから始める必要があることを覚えておきましょう。

Shopifyのテーマをカスタマイズする方法

テーマの編集・カスタマイズを行う前にしておくこと

まず、テーマを編集する前に、事前に準備しておくことは３点あります。

テーマを複製してバックアップコピーを作成しておく

テーマをカスタマイズする前に、設定を間違えた場合にすぐに元の状態に戻せるように、バックアップコピーを作成しておきましょう。

オンラインストアでは、最大で20個のテーマを追加できます。そのため、すでに20個テーマがあり、新たに追加したい場合、既存のテーマを削除します。

管理画面ですでに20個のテーマを追加している場合、1つのテーマを削除し、別のテーマを複製しなければなりません。こちらは管理画面の「テーマページ」より、ストアのテーマを削除できます。

テーマを一度削除してしまうと、完全に削除され、復元できなくなりますので、注意してください。

テーマを削除してから、また利用したいときには、再度テーマのダウンロードが必要です。

ちなみに、Shopifyでテーマストアから、テーマを購入すると、購入元のストアにテーマを使用できるライセンスが付与されます。

購入したテーマを別のストアで利用する場合、Shopifyのサポートに問い合わせる必要があります。

ライセンスがないテーマについては、サポートの対象外となり、新機能がリリースされたりした場合に、アップデートの対象外となりますので、気をつけましょう。

テーマを複製する手順は以下のとおりです。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
複製するテーマで、[アクション] >[複製] をクリックします。

複製したテーマはテーマページに表示され、「複製したテーマ名のコピー」という名前になります。

利用可能なサポートレベルを確認しておく

テーマで利用できるサポートレベルを必ず確認しておきましょう。基本的なカスタマイズに関しては、テーマ開発者のサポートを受けられます。ただし、大幅にテーマを変更する場合、テーマのサポートに関する追加リソースリストを確認しておきましょう。

大幅なテーマのカスタマイズに向け、サポートが必要な場合、ShopifyパートナープログラムでShopify Expertという認定パートナー企業が存在し、相談することが可能ですので、検討してみてください。

Shopifyのテーマには、無料テーマ、有料テーマの２種類があります。

無料のテーマを使用している場合、サポートチームがサポートチュートリアルを使用することで、軽微な変更に対応可能です。

大半のカスタマイズがサポート可能ですが、サポートできないカスタマイズもあります。

また、ベーシックプラン以上では、無料のデザインサポートを60分間受けることができます。

サポートチームへ問い合わせし、概要を説明することで、2〜4営業日以内に対応可能となります。

有料のテーマを使用している場合、そのテーマは外部サービスの開発者により作成したものになりますので、何かカスタマイズしたい場合、テーマ開発者へ直接問い合わせます。

テーマカスタマイズにおいて、サポートを受ける場合の手順は以下のとおりです。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマアクション] をクリックします。
[ドキュメントを表示する] または [サポートを受ける] をクリックします。

画像アップロードの規定や要件を確認しておく

オンラインストアでは、会社のロゴ、商品画像、バナーなど様々な種類の画像が利用可能です。画像は利用場所により、そのサイズやフォーマットが最適化されるので、ご注意ください。ストアで画像をアップロードできる場所は以下の2つです。

ファイルページに画像をアップロードする
テーマエディタで画像をアップロードする

ファイルページに画像をアップロードする時は、管理画面のファイルページから画像をアップロードできます。

テーマの編集中にアップロードした画像にアクセスできるので便利です。テーマエディタで画像をアップロードする時は、テーマエディタを使い、画像を追加します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
テーマエディタツールバーで、画像を追加するセクションをクリックします。画像ピッカーを含むセクションを選択します。
[画像を選択する] をクリックして画像を追加します。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
画像をクリックしてテーマ内で画像のプレビューを表示します。使用する画像を見つけたら、[選択] をクリックします。
[保存] をクリックします。

画像フォーマットとしては、以下のフォーマットに対応しています。

JPEGまたはJPG
プログレッシブJPEG
PNG
GIF

Shopifyでアップロードできる画像ですが、画像サイズとファイルサイズにおいてともに制限があります。具体的には以下の条件を超えると、アップロードできませんので、気をつけましょう。

20メガピクセル
20メガバイト

テーマ設定画面の使い方

テーマ設定画面を表示させるためには、Shopify の管理画面にログインし、「オンラインストア」→「テーマ」→「カスタマイズ」→「テーマ設定」の順にクリックして進みます。

テーマ設定画面では、以下の内容を編集できます。

レイアウト
色
文字体裁
ファビコン（検索タブなどに表示されるアイコン）
SNS（SNS共有ボタン・SNSアカウントリンクボタン）
チェックアウト（決済ページ）
テーマスタイル（デザイナーが設定したスタイル
フォント

レイアウトを編集する方法

「レイアウト」では、画面に対する表示形式として、ワイドレイアウトを有効または無効にする設定ができます。

ワイドレイアウトを有効にすると、画面表示の横幅が1,030ピクセルから1,340ピクセルに変更されます。ページを横長に利用できるため、画像を大きく強調して見せたい場合に効果的です。

ワイドレイアウトを有効にするためには、「レイアウト」の「ワイドレイアウトを有効にする」にチェックを入れます。

テーマ設定画面の「色」をクリックすると、ECサイトの背景・ボタン・テキストの配色を編集できます。「トップバーの背景」「本文の背景」「ボタンとリンク」などから編集する箇所を選択し、カラーピッカーと呼ばれる色見本、または16進数のカラーコードで配色を指定します。

フォントを編集する方法

「文字体裁」では、テキストフォント（タイポグラフィ―）を編集できます。

利用できるフォントは、一般的なコンピューターに初期搭載されているシステムフォントの他、カスタムフォントも選択できます。

ただし、カスタムフォントの場合、表示環境によってはフォントのダウンロードが必要となり、読み込み速度に影響を及ぼす可能性があるため注意しましょう。

Shopifyで利用可能なフォントの詳細については、Shopify公式サイトで最新情報をご確認ください。

テーマ選択のポイント

続いてテーマ選択のポイントについて整理します。Shopifyのテーマを選ぶ際に、ただ漠然と綺麗だからという理由でテーマを選ぶべきではありません。

オンラインストアでは、デザインは非常に重要ですので、テーマが売上を左右するといっても過言ではありません。

メインとなる商品とイメージがマッチするテーマを選ぶ

テーマを選定するにあたり、最初に検討するべきポイントとして、メインとなる商品とイメージがマッチするテーマを選ぶということです。扱っている商品やジャンルにより、マッチするテーマというのは変わってきます。

メインとなる商品が何で、どの程度販売するのかということを明確にしましょう。

販売する商品とテーマのイメージがマッチしないと、統一性がなくなり、コンセプトもずれていきます。

商品の特徴を理解した上で、商品の見せ方やアピールをどのようにするのか、どのようなブランドで売り出すのかを整理してみてください。

扱う商品が複数ある場合には、メインとなる一番販売したい商品を絞りましょう。その商品に力を入れてアピールできるようなテーマとしましょう。

Shopifyのトップページをカスタマイズする方法

ECサイトの顔となるトップページのカスタマイズは、Shopifyの「エディター画面」で行います。

カスタマイズできる機能はテーマによって異なりますが、主にコンテンツ（表示する項目）の配置や、それぞれの内容を設定できます。

商品名

商品名は顧客の目を引くようにするのがポイントです。GoogleやYahoo！などの検索エンジンで検索されたときに表示されやすくように心掛けましょう。

商品名とブランド名をセットで入れるなど、SEO対策するのがおすすめです。

商品画像

ECサイトでは実際に商品を手に取ることができないので、商品画像がとても重要です。

写真は角度を変えるなどして複数枚掲載し、アップ画像なども掲載しましょう。

実際に商品を使用している写真を掲載すると、顧客はイメージをつかみやすくなります。

Shopifyでは、画像ファイルはJPEGまたはJPG、プログレッシブJPEG、PNG、GIFのフォーマットのみをサポートしています。

選んだECサイトのテーマによって、表示される写真の大きさが変わるので、掲載写真の解像度に注意が必要です。

実際にアップロードした後に、写真の解像度に問題がないかを確認しましょう。

商品説明とキャッチコピー

商品画像で顧客の心を掴み、商品説明でしっかり特徴を伝えるのがポイントです。

サイズや色など、商品の詳細なスペックを掲載し、商品を購入することによって得られるメリットなどを記載しましょう。

ただし、商品説明が長すぎると離脱に繋がってしまいます。商品説明は簡潔にポイントを押させて紹介するのがおすすめです。

また、キャッチコピーを設定すると顧客は商品をイメージしやすくなります。

興味を惹きつけ、目に止まらせるのがキャッチコピーのメリットなので、実際に購入した顧客がどのような商品を求めているかを明確にし、商品の強みを短い言葉にまとめてみましょう。

購入ボタン

購入ボタンはデザインや配置が重要になってきます。shopifyでは、サイズ、フォント、色などを細かくカスタマイズすることが可能です。

ボタンを押したときのアクションも指定できるので、こだわってみましょう。

自社ECサイトをどのように閲覧するか、顧客目線でサイト内導線をしっかりイメージしながら、サイトのテーマやデザインに合う購入ボタンを設置します。

配置位置もカスタマイズできます。最適なタイミングで購入ボタンを表示できたらベストです。

決済方法

Shopifyでは、使える決済方法が幅広く用意されています。

一般的なクレジットカードはもちろんのこと、クレジットカードがない人でも使いやすいコンビニ決済やキャリア決済、後払い決済も使用可能です。

PayPalを利用した国際送金や、ビットコインなど、まだ一般的ではない決済方法にも対応しています。

決済手段の多さはユーザーにとっての利便性に繋がるので、カスタマイズで選択肢を増やしましょう。決済方法の設定は、管理画面から「設定」→「決済設定」で行います。

配送方法

Shopifyでは配送方法を細かく設定できます。配送業者の指定や配送料の設定などを細かくカスタマイズできるのが魅力です。

配送業者は世界の大手運送会社と提携しており、デフォルトでFedEx、UPS、DHLなどの運送会社を設定できます。配送方法の設定は、管理画面から「設定」→「配送」から設定可能です。

Shopifyでは物流システムとの連携も可能です。物流システムを利用すると、倉庫に預けた商品の管理をシステム上で行うことができる、複数の倉庫に預けた荷物の状況が一括管理できるなど、物流にかかる手間を大幅に削減することができます。

テーマコード編集をする方法（上級者向け）

既存のテーマでは満足できない、どうしてもやりたいことが実現できない、オリジナルのデザインを使いたいというときなどは、コード編集を使用したカスタマイズがおすすめです。

テーマを複製する

コードをいきなり編集する前に、まずはバックアップを保存する目的でテーマの複製を行います。

Shopify管理画面から「現在のテーマ」を選択し「アクション」から「複製する」をクリックします。

複製すると「テーマライブラリ」にテーマのコピーが追加され、複数のテーマを管理できるようになります。

コードを編集する

テーマコードの編集は、管理画面の「オンラインストア」→「テーマ」→「アクション」→「コードを編集」の順にクリックします。

ファイルを編集するためには、編集したいフォルダの階層下にある対象ファイルを選択し、編集完了後に保存します。

CSSを記述する

テーマのCSSを編集したい場合は、Assetsフォルダ内に新しいCSSファイルを追加して記述します。

「Assets」をクリックして「新しいassetを追加する」を選択します。そして、「空のファイルを作成する」の項目から「.scss.liquid」を作ります。

ファイル名は他のファイルと被らない名前を付けてください。ファイルが作成できればCSSを記述できるようになるので、カスタマイズしてみてください。

変更内容は画面上部のプレビューからいつでも確認できます。

HTMLを記述する

HTMLを記述する方法は、コード編集からではなく商品ページやブログ記事を追加して行います。

HTMLの記述方法がわからなくても、WordPressのエディターのように直感的に見出しや箇条書きなどを追加できます。

CSSを読み込ませる

記述したCSSを読み込ませるには「Layout」内の「theme.liquid」を開いて{{ ‘theme.scss.css’ | asset_url | stylesheet_tag}}の記述を探します。そして、記述の以下に先ほど作成したCSSファイルを記述します。

{{ ‘〜〜.scss.css’ | asset_url | stylesheet_tag}}

プレビューで確認する

記述した内容を保存したら、テーマライブラリの「アクション」から「プレビュー」をクリックします。

すると、デモサイトが表示され、記述したHTML&CSSが表示されているか確認できます。

本番環境に反映する

プレビューでカスタマイズが問題なく行われていることを確認できたら、テーマの「アクション」から「公開する」をクリックします。

本番環境にカスタマイズが反映され、ストアデザインが更新されます。

公開すると最初に複製したコピーのテーマが「現在のテーマ」に切り替わります。

以前の状態に戻したい場合は、複製前のテーマを本番環境に反映させましょう。

Shopify（ショッピファイ）でコード編集可能なフォルダ

Shopifyのどれでもコードが編集できるわけではありません。以下はコードが編集できるフォルダを紹介していきます。

Layout

Layoutは、サイト全体に関わるHTML要素が記載されており、theme.liquidフォルダがあります。

theme.liquidにはheader、body、footerが含まれています。

Templates

Templatesは、トップページや商品ページなど、個別ページごとのファイルになります。

また、ページごとにliquidファイルが収納されています。

Sections

Sectionsは、カスタマイズ管理画面のセクションパーツに関するファイルが入っています。

ヘッダー
コレクション
商品特集
ニュースレター
フッター

各ページに使用できる共通パーツが入っているので、カスタマイズの際は間違って書き換えないように注意が必要です。

Snippets

Snippetsは、Sectionsよりも細かいパーツを記載したLiquidファイルを収納しています。

次にLayoutやTemplates、Sectionsのフォルダに{% include ‘〜〜’ %}と記載すると、Snippets内のLiquidファイルを読み込むことができます。

Assets

Assetsは、JavaScriptやCSSを収納しているフォルダです。他にもpngやsngなどの画像ファイルの格納も可能です。

Config

Configは、テーマ全体に関係するJavaScriptを収納しているフォルダです。

Locales

Localesは、各言語に関係するJavaScriptを収納しているフォルダです。Shopify管理画面の「テーマ言語を編集する」でも設定できます。

Shopifyの商品ページのカスタマイズ方法

商品ページは、ユーザーに商品の価値を伝え、訴求するためのページです。

画像・商品説明・商品レビュー・カートボタンなど、直接購入の意思決定につながる要素が多いため、詳細まで設定しましょう。

商品ページの編集画面は、管理画面にログイン後、「商品管理」で商品を選択すると表示できます。

Shopifyの商品ページはテーマによってデザインが異なるため、理想のデザインに近いテーマを選ぶと、カスタマイズの手間が少なくなります。

メインビジュアル

メインビジュアルとなる商品画像は、商品の印象を決める重要な要素の一つです。

ユーザーがイメージしやすいよう、角度を変えて撮影した画像や、イメージモデルが実際に使用・着用している写真などを用意し、アップロードしましょう。

キャッチコピー

商品説明のキャッチコピーには、ユーザーの目を引き、興味を持ってもらえるような短いフレーズを入力しましょう。

商品の特徴やメリットを書き並べるよりも、購入するとどのようなベネフィットが得られるかを簡潔に記したほうが、読み手に伝わりやすくなります。

例えば、スポーツシューズのキャッチコピーの場合、「メッシュ素材で通気性が良く軽い」と特徴を並べるより、「長時間履いても疲れない」とユーザー目線のベネフィットを伝えたほうが、明確にイメージできるでしょう。

キャッチコピーを考える際のヒントとして、Shopifyの無料コピー生成ツールも便利ですので、活用してみましょう。

商品説明

「説明」の欄に、商品の色・素材・サイズ・使用方法などの詳細を入力します。その他に、商品のこだわりポイントや他社との違いなどを表記するのもおすすめです。

Shopifyの商品ページで価格・在庫状況・配送方法の設定をすると、価格での絞り込み検索やストックカウンターに反映されるため、正確に入力するようにしましょう。

商品レビュー

商品のレビューを追加することで、商品の購入率があがります。商品レビューがあれば、使っているところを具体的にイメージしやすく、信憑性も高くなり、安心して購入できるからです。

商品のレビューを商品ページに表示するためのアプリもアプリストアにあり、無料で利用可能です。

レビューを表示するだけではなく、フォームのカスタマイズやレビューをCSVでインポート・エクスポートもできます。

レビューは数が多ければ多いほど、様々な観点でレビューされることになり、新しくその商品を購入を検討する方にとっては、使用イメージがわきます。

ECサイトで、商品レビューは非常に重要な役割があり、商品レビューを追加することで、全体の売上をも左右します。

すでにECサイトをお持ちの方はレビュー結果をShopifyへ移行することも可能です。

積極的に商品のレビューを取り入れましょう。

トラストバッジ（トラストマーク）

トラストバッジ（トラストマーク）とは、国際基準に基づき、ECサイトの信頼性と安心性を認証した第三者認証マークです。トラストバッジを獲得することで、他社との差異化が図れます。

現時点でトラストバッジを利用できる無料テーマはないため、利用する際はトラストバッジ機能がある有料テーマを選択するか、Trust Badge Masterなどの有料アプリをインストールすると良いでしょう。

購入ボタン（CVボタン）

購入ボタン（CVボタン）のデザインや配置は、商品購入のアクションを促すための重要な要素です。Shopifyの管理画面で販売チャネルを追加することで、購入ボタンを作成できます。

購入ボタンは配置・サイズ・フォント・色をカスタマイズできますが、一部HTMLコードを編集する必要があります。

詳しい編集方法については、Shopify公式サイトをご確認ください。

SEOの設定

商品名や商品説明の設定と関連しますが、Shopifyの商品編集画面では、SEO対策のための設定が可能です。

具体的には検索エンジンの検索結果で、タイトルと説明文として表示される、meta titleとmeta descriptionです。

一般的なWebサイトを作成する時と同じように、商品のタイトルや説明文で検索キーワードを狙い、思わずクリックしてしまうような文章にすれば、SEOの効果をさらに高めることができるのです。

Shopifyのテーマの選び方

必要な機能を備えているか

テーマによって、デザインに合わせて機能性が制限されているケースがあります。

自社ECサイト運営にあたって、実施したいマーケティング手法に合わせたサイト構築ができるかどうかを確認しておきましょう。

たとえば、PC版とスマホ版で異なる画像を使いたい場合、別々に設定できる機能が必要です。

扱う商材によっては、画像を大きく見せたいこともあるでしょう。商品によって見せ方が違うように、ターゲット層によっても使い勝手の良さは変わります。

自社のメイン商材、ターゲットに合わせたサイト構築ができるか、そのために必要な機能が備わっているかは、テーマ選びにおいて重要なポイントです。

また、画像を大きめに掲載したい、商品に対する画像枚数を多めにしたいなどと考えている方は、表示速度もチェックしておきましょう。

こだわりの商品画像を準備しても、お客様に見てもらえないと意味がありません。表示に時間がかかるほどに離脱率は上がるため、売り上げにも影響してしまいます。

画像を軽くしても、Shopifyテーマ自体が重いと表示速度はなかなか改善されません。テーマ選びの段階から表示速度を意識しましょう。

どの層に向けて売るのか

また、販売するターゲットに合わせて、使用するテーマを決めることも重要です。

具体的には、若者から高齢者まで幅広い年代をターゲットに商品を販売する場合、消費者の見やすさや扱いやすさが重要になってきます。

特に高齢者をターゲットにする場合には、なるべくシンプルなデザインを選ぶ方が良いでしょう。

日本語対応しているか

Shopifyは全世界で使われているECプラットフォームです。2018年に日本語の管理画面が登場し、日本でも急速にシェアを伸ばしています。

カナダ発であるShopifyのテーマは、基本的には英語対応です。ただし、日本語を含めた複数言語に対応するテーマもあります。

日本語対応のテーマなら、テーマ言語を変更するだけで日本語での表示が可能です。

日本語に対応していないテーマでも設定できますが、それぞれの項目を翻訳する必要があり少々手間がかかってしまいます。

できるだけ手間をかけたくない方や、とにかく早くサイトオープンしたい方は、日本語対応のテーマを選ぶほうがスムーズに進められるでしょう。

商品イメージとテーマの相性は良いか

まず一番最初に考えなければならないのは、商品と相性の良いテーマを選ぶことです。

扱っている商品のジャンルやどの程度の量の商品を販売するのかによって相性の良いテーマは変わってきます。

例えば、アパレル系の企業で洋服を商品として販売したい場合、一番重要になってくるのは商品ページの画像です服のデザインや雰囲気などをしっかり伝えられるような商品ページにしなくてはなりません。

その場合には商品画像が綺麗に見えるものやイメージを伝えやすいものを選定しなくてはなりません。

カスタマイズしやすいか

カスタマイズのしやすさも重視したいポイントです。デフォルトのテーマが優れていても、販売する商品やサイトコンセプトに合わせてカスタマイズしたくなるかもしれません。

そのときに、少し変えてみたいと思う部分のカスタマイズが簡単であれば、サイトデザインをどんどんブラッシュアップできます。

Shopifyでは、管理画面で各ページのコンテンツやレイアウトを変更可能です。ただし、より細かな変更はコードを直接編集するため、ある程度の専門知識が必要となります。

最初に設定する項目が多すぎても大変ですので、カスタマイズなしのデフォルト状態で違和感なくサイトを公開できるかもチェックしておきましょう。

また、チャットボットやポップアップ型のWeb接客ツールなどの導入を考えている場合、違和感なく設置でできるようにデザインをカスタマイズできるかも重要なポイントです。

管理画面でカスタマイズできる部分はテーマによって異なります。希望のカスタマイズを自分で設定するのか業者に頼むのか、自分の希望を実現するために必要な工程を考えてみましょう。

カスタマイズする際の3つの注意点

バックアップをとる

テーマを編集する前には、必ずデータのバックアップをとりましょう。テーマの設定で不備があった場合などに、以前の状態に戻せるようにするためです。

管理画面の「オンラインストア」→「テーマ」をクリックし、テーマを選択して「アクション」→「複製」の順に進むと、CSVファイルでバックアップが作成できます。

利用できるサポートの確認

Shopifyでは、テーマによってサポートレベルが異なります。そのため、テーマのカスタマイズを行う前に、利用できるサポートを確認しておくことをおすすめします。

無料テーマがOS2.0対応の場合、Shopifyサポートからテーマに関する簡単なサポートが受けられます。

Shopifyの有料プラン（ベーシックプラン以上）に加入していれば、無料テーマに関するデザインサポートを最大60分まで利用できます。

外部の開発者から提供されている有料テーマは、Shopifyのサポートが受けられないため、必要に応じてShopifyエキスパート（Shopify公認のEC制作会社）へ相談しても良いでしょう。

画像アップロードに関する規定・要件

カスタマイズのための画像ファイルをアップロードする前に、アップロード可能なファイル形式とファイルサイズを確認しておきましょう。アップロード可能なファイル形式は以下のとおりです。

JPEGまたはプログレッシブJPEG（.jpeg）
JPG（.jpg）
PNG（.png）
GIF（.gif）

画像のファイルサイズは20MBまでとなっており、画素数は最大4,472×4,472ピクセル（20メガピクセル）までです。また、Shopifyで推奨されている商品画像（正方形）の解像度は、2,048×2,048ピクセルです。

Shopifyのカスタマイズを外注するのもアリ！

Shopifyのカスタマイズは、ECサイト開発会社に外注することもできます。カスタマイズの外注ということは、0からの新規依頼ではなく「リプレイス」になります。

その際に、外注会社を選ぶポイントが若干ことなるので、以下で紹介していきます。

Shopifyのリプレイス案件を請け負ったことがあるか

過去にShopifyへのリプレイス案件を請け負った実績がある制作会社を選ぶと良いでしょう。新規開発とは求められる項目が異なるため、事前にリプレイス案件を行ったことがあるかを尋ねてみてください。

以前の事例で得られた教訓や問題などのノウハウを共有してもらえるため、自社のリプレイスも安心して進められるでしょう。

システムの開発実績があるか

リプレイスの場合はサーバーの設定を行う必要があるため、システム開発をしたことのある制作会社を選んだ方が安心できます。

サイトのデザインやSEO対策といったマーケティングももちろん重要ではありますが、まずはサイトを移行できなければ意味がありません。

そのため、サーバー絡みの案件を扱ったことがある、あるいは業務として請け負うことができる制作会社を選ぶと良いでしょう。

Shopifyの構築にかかる費用の目安

リプレイスの場合

リプレイスを請け負っている制作会社は少ないため、新規開発よりも高く、350万円前後が相場だと言えます。

サイトコーディングやカスタム機能追加、商品登録、サイト初期設定、データ移管、SEO対策、受注在庫連携システム構築などを行ってくれるため、もし自社で対応することが大変だったり時間がなかったりする場合は、制作会社への依頼を考えてみてください。

新規の場合

新規構築の場合、会社によって大きな開きがありますが、予算の目安は30万円〜300万円であることが多いです。

30万円の場合は、Shopifyの初期導入サポートを請け負っているところが多く、アカウン取得やドメイン設定、管理画面マニュアル、送料設定などの基本的な部分のサポートを行っています。

100万円〜300万円の場合は、オリジナルデザインでカスタマイズされたECストアを構築可能です。

もちろん、さらに大規模となれば、300万円以上かかる場合もあります。

ただし、最初から大規模なサイトを構築する必要はないため、まずは小規模に始めると良いでしょう。

Shopifyの制作を外注する際のポイント

個人ではなく法人に依頼する

個人で制作を請け負っている人もいますが、この場合、何か問題が起きた際に対応できないことがあります。そのため、個人ではなく法人の制作会社に依頼することをおすすめします。

Web制作の実績があれば、担当者も慣れていてコミュニケーションを取りやすいです。

そして、システム開発力もあれば、ワンストップで任せることも可能なので、会社として組織で行っている方が安心して任せられるでしょう。

年間契約にする

契約を年間契約にした方が、費用を抑えることができます。スポットでの契約の場合は、年間契約よりも高くなってしまうことがほとんどだからです。

ECサイトの場合、制作だけではなく保守運用なども必要になります。そのため、年間契約で最初に契約しておく方が結局は安くなるということが多いのです。

依頼内容を明確にする

制作会社に依頼する場合、依頼内容を明確にしておきましょう。

特に、サイトデザインから依頼する場合は、テーマの選定だけで済む場合とそうでないケースがあり、料金も異なります。そのため、何を依頼するのかを事前に検討し明確にしておかないと、後々トラブルにつながるかもしれません。

また、リプレイスの場合は最初のサイトと同じデザインにしたいと考えることもあるでしょうが、Shopifyテーマでは対応できないことも多いです。

そうなると、ゼロからデザインを構築しなくてはならず、追加で費用が必要となる場合もあります。

やりたいことがわからないと、制作会社も困ってしまうため、実践したいことや欲しい機能などを明確にしてから依頼するようにしてください。

まとめ

Shopifyのカスタマイズ方法や行う際の注意点、おすすめのテーマについて解説していきました。

Shopifyのカスタマイズは、コードを編集しなくてもできるので、初心者方やプログラミング未経験者でもトライできるのが特徴です。

しかし、初めての人の場合では難しい・思ったよりも時間がかかってしまうということもあるでしょう。自分でやってみて難しいと感じた場合には、外注するのも手です。