Shopifyで店舗をデザインする方法とは？専門的知識がなくてもOK！

「Shopifyのショップデザインてどうやるの？」
「デザインには専門的な知識が必要なの？」

Shopifyを立ち上げられたばかりのオーナーにはこのような疑問を持たれている方もいるのではないでしょうか。

売り上げを上げるためには顧客にとって使いやすく、なおかつおしゃれな店舗にデザインすることが必要不可欠です。しかし、デザインといってもどこから手をつけていいのかわからない方も多いのではないでしょうか。

本記事では、

• Shopifyで作成した店舗をより魅力的にするためのカスタマイズ方法
• デザインを補助するのに役立つアプリ3選

を解説していきます。難しい専門知識なしでもShopifyではサイトのカスタマイズが可能です。

ネットショップ初心者の方はぜひ本記事を参考にしてみましょう。

Shopifyの店舗をデザインする3つの方法

Shopifyで作成した店舗を自分らしくデザインする方法は3つあります。自分のレベル感にあった方法を選ぶことが大切です。

HTMLやCSSといった知識がない方は、まず専門知識が必要ないテーマエディタでデザイン・カスタマイズするとよいでしょう。

以上3つの方法について簡単に解説していきます。

方法①：管理画面からテーマエディターで編集する

HTMLやCSSの知識がなくても、簡単にコンテンツの配置や配色、テキストを変更できます。コードの編集が必要ないため、初心者はまずテーマエディタ―を使ってデザイン・カスタマイズしていきましょう。

Shopifyの管理画面から「現在のテーマ」を選択し、カスタマイズのページに移動することで設定が可能です。詳しい設定方法については後ほど解説していきます。

方法②：管理画面からコード編集をする

管理画面から直接コード編集する方法です。HTMLやCSSの知識がある方はぜひチャレンジすることを推奨します。

Shopifyの管理画面から「現在のテーマ」を選択し、「アクション」から「コードを編集する」に移動しましょう。こちらも詳しい手順については後ほど解説していきます。

方法③：ローカル環境で自らデザインする

Shopifyの管理画面からではなく、ローカル環境でカスタマイズする方法です。自分のパソコンにテーマをダウンロードし、コードエディター上でデザインしていきます。

管理画面からコード編集をするときと同じように「アクション」のページに移動しましょう。そこからテーマファイルをダウンロードし、さらにローカル環境を構築するための「Shopify Theme Kit」をインストールします。

ローカル環境でのカスタマイズには、より専門的な知識が必要です。そのため、本記事ではShopifyの管理画面でデザイン・カスタマイズする方法に絞って解説していきます。

Shopifyの店舗をテーマエディターで編集する方法

まず、テーマエディタで編集する方法を解説していきます。基本的な設定の流れは以下の通りです。

テーマエディタ―は感覚的に操作できます。あまり難しく考えずに挑戦してみましょう。

STEP1：テーマを選ぶ

ショップのおおまかなデザインでもあるテーマを選んでいきましょう。ホームの「テーマをカスタマイズする」からテーマストアにアクセスします。

あとは好みのテーマを選ぶだけです。テーマストアで利用できるテーマの数は無料と有料を合わせて1,000種類以上もあります。自身の店舗の雰囲気とマッチするテーマを探しましょう。

STEP2：テーマエディタを起動させる

テーマを選び終わったら、次に編集画面であるテーマエディタ―起動させます。テーマを選ぶだけでは店舗としては不十分です。

カラーやフォントをアレンジして、店舗を魅力的にしていきましょう。テーマエディタ―はホームから「現在のテーマ」を選択することで移動できます。

STEP3：テーマの基本設定を行う

テーマエディタ―を起動できたらテーマの基本設定を行います。テーマエディタ―は大きく「セクション」と「テーマ設定」に分けられます。

テーマエディタ―だけでも機能がたくさんあるため、どこから手をつければいいか悩むかもしれません。しかし、Shopifyのテーマには元々最低限のコンテンツはそろっています。そのため、まずは自分のわかる範囲からデザイン・カスタマイズしていきましょう。

慣れてきたら、今まで触らなかった機能にも挑戦することをおすすめします。

Shopifyのテーマをコード編集でデザインする場合

テーマエディターでもカスタマイズはできますが、「もっと自分らしくデザインしたい」と考える方もいるでしょう。ここからはShopifyのテーマをコード編集でデザインする手順について解説していきます。

STEP1：テーマを複製し、バックアップをとる

バックアップを取得していつでも初期コードに戻れる環境を作ることが大切です。

ホームで「テーマをカスタマイズする」から編集したいテーマの「アクション」に移動し、「複製する」をクリックします。

以上の手順を踏めば作業途中に変更を取りやめて、最初からやり直すことが可能です。

STEP2：実際にテーマコードを編集する

テーマコードを編集する手順もバックアップするときとほぼ同じです。

「テーマをカスタマイズする」から複製したテーマの「アクション」に移動し、「コードを編集する」をクリックするだけでコードエディターが立ち上がります。

左側はコードディレクトリで右側は編集スペースです。ページ右下には明るさを調整できるボタンがあります。好みに合わせて調整しましょう。

コードを編集する手順は以下の通りです。

5つの手順をそれぞれ簡単に解説していきます。

①：CSSを書く

CSSを編集する際は、Assetsというフォルダに新しいCSSファイルを追加する必要があります。

「Assets」をクリックして「新しいassetを追加する」を選択した後、「空のファイルを作成する」で「.scss.liquid」を作りましょう。

ファイル名に関しては他のファイルと被らない名前を付けることがポイントです。ファイルができればCSSを記述できるようになります。

②：HTMLを書く

HTMLを書くには、コード編集からではなく登録した商品ページから行います。

商品ページを開いたら、エディターをHTMLソースを表示する画面に切り替えましょう。HTMLの画面で編集することで、先程設定したCSSが反映されるようになります。

③：CSSをテーマに読み込ませる

現時点では見出しやタグがデフォルトのため、テーマに「original.scss.liquid」ファイルを読み込ませます。

記述したCSSを読み込ませるには「Layout」というファイルの「theme.liquid」を開き、以下の文字列を探します。

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

見つけたら上記の下に先程書いたCSSファイルを読みこませるための文字列を追加しましょう。

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

④：プレビューでデモサイトを表示させる

記述した内容を保存したら、デザインしたテーマの「アクション」から「プレビュー」をクリックしましょう。するとデモサイトが表示され、記述したHTML&CSSがテーマに反映されていることが確認できます。

⑤：本番環境に反映する

プレビューでデザインに問題ないことが確認でき次第、テーマの「アクション」から「公開する」をクリックしましょう。公開することで本番環境にカスタマイズが反映され、ストアのデザインが更新されます。

また、公開と同時に最初に複製したコピーのテーマが「現在のテーマ」に切り替わるため注意が必要です。もし、以前の状態に戻したい場合は、複製前のテーマを公開することで本番環境に反映させましょう。

補足：Shopifyのコード編集にはマークアップ言語の知識が必要

Shopifyをコード編集でデザインしていくには、マークアップ言語の知識が必要です。ここでいう言語とは以下の3つを指します。

これらの言語を使用することで、より細かいデザインができるようになります。ただ、中には自分には専門的な知識がないからコード編集は諦めているという方もいるかもしれません。

自身に専門的知識が備わっていなくても、Shopify開発・制作ができるShopifyパートナーに委託したり後ほど解説するアプリを利用したりすることでデザインできます。

より素敵な店舗へとデザインしていきたい方はぜひ検討してみましょう。

Shopifyのデザインやカスタマイズを補助するアプリ3選

CSSやHTMLを駆使すれば、自分好みのサイトにデザインできます。しかし、現時点でのマークアップ言語の知識だけではどうしても表現できない部分もあるでしょう。

そんな自分ではどうにもならない部分を補ってくれる機能がShopifyのアプリです。ここでは、Shopifyで作成した店舗のデザインやカスタマイズを補助してくれるアプリを解説していきます。

以上の3つのアプリをそれぞれ簡単に解説していきます。ぜひ店舗をデザインする際に役立てましょう。

アプリ①：All In One Product Zoom

顧客が店舗の商品を気に入ってくれたとしても、画像が小さくて詳細を確認できなくては顧客は購入を諦めてしまうでしょう。しかし、「All In One Product Zoom」を使えば小さい画像でも拡大して詳細を確認できます。

アプリで設定できるズーム機能は3種類です。

他にもズームの度合いや位置、サイズなど様々なアレンジができます。画像ごとにそれぞれズーム機能を設定することも可能です。

アプリ②：Shogun Landing Page Builder

テーマの細かいカスタマイズをマークアップ言語の知識を使わずに行えるアプリが「Shogun Landing Page Builder」です。

ドラッグ＆ドロップ式のページビルダーで理想のページを構築できます。

Shopifyのすべてのテーマで利用できます。カスタマイズできるページはランディングページ・商品ページ・ブログページの3つです。編集画面でプレビューもチェックできるため、初心者の方でも安心して編集を進められるでしょう。

アプリ③：Shop The Look

店舗のデザイン・カスタマイズではアップセル・クロスセルの仕掛けは欠かせません。「Shop The Look」は、商品紹介ページに「Shop The Lookボタン」を表示させ、ボタンをクリックすると関連商品の情報を表示する機能があります。

さらに関連商品をそのままカートに追加できる「ADD TO CARTボタン」という機能も搭載しているため、顧客の購入意欲の促進に役立つでしょう。

本アプリはデザインというより機能性重視のアプリではありますが、顧客の購入促進を向上させるサイトデザインを作成する上で非常に優秀なアプリです。

初心者はまずテーマエディタからデザイン編集をしよう

本記事では、Shopifyで作成した店舗をデザインする方法について解説してきました。具体的な方法は以下の通りです。

HTMLやCSSなどのマークアップ言語の知識を持っていない方は、感覚的に操作できるテーマエディタ―でデザインしてみましょう。

Shopifyの拡張機能であるアプリを補助としてデザインするのも1つの手です。まずは自分がデザインできる部分から徐々にできることを増やしてみましょう。