Shopifyのデザインをカスタマイズするには？2つの方法とおすすめアプリを紹介

Shopifyのデザインをカスタマイズする方法は2つあります。

1つ目は特にコード編集を行わず、テーマをカスタマイズする方法です。ロゴ画像や文字フォント、色の設定、レイアウトなどはコードをさわらずにカスタマイズできます。

2つ目はコード編集を用いてテーマのカスタマイズを行う方法です。既存のテーマでは物足りず、さらに細かくカスタマイズする場合に行う方法でHTMLやCSS、Shopifyのテンプレート言語のLiquidの知識が必要になります。

Shopifyには、デザインテンプレートである「テーマ」が有料・無料合わせて160種類以上あり、さらに自社に合うストアの雰囲気に変更できるカスタマイズ性も持ち合わせています。

この記事では、Shopifyのテーマをカスタマイズする方法やおすすめのテーマを紹介します。

Shopifyストアのテーマ選びやカスタマイズを行いたいとお考えの方は、ぜひ最後まで読んでください。

Shopifyストアのデザインをカスタマイズする方法

Shopifyストアのデザインをカスタマイズする方法は2つあります。

• コード編集は行わずレイアウトや文字色などをカスタマイズする方法
• コード編集を用いてより細かなカスタマイズを行う方法

Shopifyの見た目の雰囲気を変えるだけであれば、コード編集なしでも十分にカスタマイズ可能です。

それだけでは物足りない、思い通りにデザインをカスタマイズしたいと思う場合はコード編集を用いてより高度なカスタマイズを行いましょう。

Shopifyテーマをコード編集なしでカスタマイズする方法

それではShopifyテーマをカスタマイズする方法を解説します。

まずは、コード編集なしでテーマをカスタマイズする方法を見ていきましょう。手順は以下の通りです。

テーマのカスタマイズする前に行うべき準備

テーマの編集を行う事前の準備として行うべきことが3つあります。

テーマのバックアップを作成

テーマをカスタマイズする前に、バックアップを作成しておきましょう。編集作業で不備が発生した場合にすぐ元に戻せるようにするためです。

テーマのバックアップを作成する方法ですが、まずは管理画面>オンラインストアの順にすすみ「テーマ」をクリックします。「カスタマイズ」の左横にある「…」をクリックし、「複製」を選べば、CSVファイルのバックアップを作成できます。

受けられるサポート内容の確認

受けられるサポートは、テーマの種類や有料かどうかによって変わります。事前に必ずサポートの内容を確認しましょう。

無料テーマを利用している場合は、Shopifyによるカスタマイズについてのサポートを受けられます。ベーシックプラン以上を契約している場合、最大で60分までの無料デザインサポートを享受可能です。

有料のテーマを利用している場合は、サポートレベルは開発者次第で異なります。何かカスタマイズをしたい場合はテーマの開発者へ直接問い合わせましょう。

画像のサイズや対応ファイル形式を確認

Shopifyストアには、会社ロゴや商品画像、バナーなど様々な画像を設置可能です。設置場所によって、サイズやフォーマットが最適化されます。

カスタマイズのために新たな画像を用意する場合は、サポートされている画像サイズやファイル形式で用意する必要があります。作成した画像データを作り直す必要がないよう事前に確認しておきましょう。

Shopifyでサポートされている画像フォーマットは下記になります。

Shopifyでサポートされている画像フォーマット
ファイル形式	PNG JPEGもしくはJPG プログレッシブJPEG GIF HEIC WebP
サイズ制限	20メガピクセル以下 20メガバイト以下

テーマの選択

事前準備が終わったら、テーマ選択に移ります。好みのテーマを選びましょう。

管理画面のオンラインストアをクリックし、「テーマライブラリー」セクションにあるテーマ追加をクリックしましょう。メニューが表示されるので「テーマストアにアクセスする」を選びます。

テーマストアには、無料・有料のさまざまなテーマが用意されています。

テーマ選択時は、メインの商品やサービスのイメージと合うかどうかを重視して選んでください。イメージが合わないテーマを選ぶと、統一感やコンセプト面にブレが生じる可能性があります。また、ユーザーがわかりやすいシンプルなテーマをえらべば離脱防止にもつながります。

テーマ次第で搭載している機能面にも差が出るので、必要な機能が搭載されているかも確認しておきましょう。

テーマエディタを起動

続いてテーマエディタを起動しましょう。

管理画面のオンラインストア>テーマを選択し、右側にテーマ画面が表示されたら、「カスタマイズ」をクリックしましょう。

テーマエディタでは、コンテンツの追加・削除や設定のカスタマイズを行えます。

テーマのカスタマイズ

テーマエディタが起動したら、実際にテーマのカスタマイズを行います。

テーマエディタを開くと、ホームページのセクションが表示されます。いわゆる「TOPページ」にあたるページです。他のセクションを編集するには、ページ上部のドロップダウンメニューからページを選択して移動します。

テーマエディタを用いて、各テーマセクションを編集すれば、ストアに表示されるコンテンツを編集可能です。文字サイズやレイアウトなどを編集できるので、ストアの見た目や雰囲気を変更できます。

Shopifyテーマをコード編集してカスタマイズする方法

より細かなカスタマイズやテーマを大幅に変更したい場合は、コード編集を行ってのカスタマイズを行う必要があります。

まずは、コードなしのカスタマイズと同じようにテーマのバックアップを作成しておきましょう。

テーマのコード編集は「コードエディタ」を用いて行います。

管理画面を開き、オンラインストア>テーマの順に進んだら、テーマ画面の「カスタマイズ」ボタン右横にある「…」をクリックしましょう。出てきたメニューの中から「コード編集」を選択します。

コードエディタが開くので、編集したいセクションを選びコード編集を行いましょう。

Shopifyで使えるおすすめのテーマ6選

ここからは、Shopifyで使えるおすすめのテーマで無料と有料のものを3つずつ、合わせて6つ紹介します。

Dawn

「Dawn」は、シンプルなデザインのテーマで、OS2.0に対応しており、Shopifyに登録した際、デフォルト設定されているテーマです。シンプルゆえの汎用性の高さがあり、さまざまな業界で利用できます。

ストアページの表示の高速化を重視して開発されたため、以前のデフォルトテーマであった「Debut」と比べて35％ほどページ表示が高速になったと言われています。

Ride

「Ride」はスポーツ中心のデザインになっており、スポーツブランドやレジャーブランドを取り扱うストア向きのテーマです。

暗めの背景カラーに蛍光色が映えるポップなデザインになっています。

Origin

「Origin」は落ち着いたデザインで、レトロなフォントなどヴィンテージ感を感じさせるテーマです。ユニークな商品を販売するメーカー向けに設計されています。

ブランドの詳細情報を掘り下げることができるような構造化されたレイアウトが特徴です。

Icon

「Icon」は高解像度の画像を使用して、商品の詳細やイメージを視覚的に伝えられるテーマです。店舗検索機能が搭載されており、複数の店舗がある場合に活用できます。再入荷のお知らせ機能やブログ機能も持っています。

アパレル商品など視覚的なコンテンツが重要になるストアに向いています。

Showcase

「Showcase」は、ファーストビューをフルスクリーンで表示できるテーマです。訪問者が初見で見る際にインパクトを与えつつ、魅力を伝えることができます。

また、画像が下からフェードインしてくるような動きなど細かいスタイリッシュなインタラクションが設定されています。動画で実際に購入した時のイメージを伝えることも可能です。

District

「District」は、レビュー数が600件を超えており、高評価が多く人気のあるテーマです。PCやスマートフォンに合わせて画像を出し分けできます。

画像や動画のスライドショーにも対応でき、プロモーションバナーや新商品入荷、セールの広告機能も備わっています。

Shopifyストアの運営を成功させるために

ここまでShopifyテーマのカスタマイズについて解説してきました。

Shopifyのテーマは特にコード編集を行わなくても、レイアウトや文字のフォントなど、見た目や雰囲気を変更可能です。

もっと踏み込んだカスタマイズを行いたい場合はコード編集を行いましょう。

この記事を読んでくださっている方の中には、これからShopifyでストア運営を行おうとお考えの方もいらっしゃるのではないでしょうか。

Shopifyストアの運営を成功させるためにも、これからストア運営を行いたいとお考えの方は、必要な機能を洗い出す「要件定義」からはじめてください。どんなストア運営を行うか、目指す売上規模がどれくらいかを設定すれば、機能を絞りやすくなります。

要件定義が終われば、必要な機能を導入するためのアプリ選びです。Shopifyには、8,000を超える膨大な数のアプリがあります。選定には時間と工数を要します。

Shopifyに精通したパートナー企業に依頼する

もし、要件定義やアプリ選びが難航している場合やストア構築に関して相談を考えている場合は、Shopifyに精通したパートナー企業に依頼しましょう。

特にShopifyから実績を高く評価され、公式に認定される「Shopify Plusパートナー」であれば、数多くの実績があり、サポート経験をもとにした「売れるShopifyストアをつくるノウハウ」が蓄積されています。

売れるShopifyストアづくりのノウハウをすべて詰め込んだ、TUNAの「THE EC缶」を提供する弊社、株式会社リゾートもShopify Plusパートナーに認定されています。運営時のさまざままなサポートを実現するための「OPTION缶」も多数用意しております。

もし、ご興味を少しでもお持ちいただけたなら、ぜひ営業担当までお問い合わせください！

Shopifyや他のECプラットフォーム情報を集めている方へ

これからのECサイト運営を考えている方の中には、いろいろなECプラットフォームの情報を集めたいとお考えの方もいらっしゃるのではないでしょうか。

そんな方たちのために、TUNAでは無料でダウンロードできる「徹底比較！ECサイトプラットフォームカオスマップ」という資料を作成いたしました。

Shopify含む10種類のECプラットフォームを独自調査し、情報をまとめており、それぞれのプラットフォームの情報や特徴を掲載しています。それだけでなく、カオスマップや機能比較表も用意しており、情報収集ツールとしての活用はもちろん、ECプラットフォームを選定する際の判断材料のひとつとして活用できます。

ぜひ、「徹底比較！ECサイトプラットフォームカオスマップ」をダウンロードして、ECプラットフォーム選びに役立ててください！

Shopifyのデザインカスタマイズまとめ

この記事ではShopifyテーマをカスタマイズする方法について解説しました。

Shopifyテーマのデザインをカスタマイズする方法は2つあります。

• コード編集は行わずレイアウトや文字色などをカスタマイズする方法
• コード編集を用いてより細かなカスタマイズを行う方法

2023年11月現在、Shopify themesには無料テーマが12種類、有料テーマは154種類あります。自社のメイン商品やサービスに合うテーマを選びましょう。

もし、Shopifyストアのデザインや構築・運営にお悩みがありましたら、ぜひTUNAまでお気軽にお問い合わせください！