【Shopifyの使い方】Shopifyをカスタマイズする方法 | Shopifyを活用した越境・国内ECサイトの制作・運用など役立つ情報をお届け|Shopify WORKS

2020.11.1

【Shopifyの使い方】Shopifyをカスタマイズする方法

世界中でシェアを伸ばし、日本国内でも知名度や人気が上がっているshopify。shopifyはオンラインストア作成のためのサービスで、世界175カ国以上、店舗数は80万のシェアを誇ります。

そんなshopifyはカスタマイズ性が高く、オリジナルのショップを作れることでも人気を集めているのです。そこで、注目のshopifyのカスタマイズ方法について詳しく解説します。

コードの変更なしでデザインをカスタマイズ

shopifyで特別なコードを使わずにデザインのカスタマイズをすることが出来るのは、ロゴ画像の設定や見出しのフォント変更、背景などの色指定や要素の表示です。

カスタマイズをするときにはまずshopifyの画面左側にある「オンラインストア」をクリックし、「テーマ」から「テーマライブラリ」の「無料のテーマを探す」まで進みます。すると「テーマストア」に切り替わるので、そこから好みのテーマを選ぶだけです。

テーマを選ぶとリストに追加されるので「カスタマイズ」をクリックして編集に取り掛かります。編集の画面では右側にプレビューが表示されるので、それを見ながら微調整をしていくだけです。ロゴの変更や告知バー、スライドショーやテキストの変更が出来るので、好みに合わせて調整します。テーマを選ぶときには無料のものだけではなく、有料のテーマを専用ストアで購入することも可能です。

shopifyは主に英語圏でのサービスが中心となっているので、日本語のテキストでは文字が大きくなってしまったり、行間が狭くなったりして見にくくなるケースも珍しくありません。CSSで調整して、見やすいフォントにすることも大事です。編集の画面の「テーマアクション」から「コードを編集する」を押します。SCSSファイルを見つけたら、「〇〇,scss.liquid」にCSSを加えます。

コードを利用したカスタマイズ方法

コードを使ったカスタマイズをすればより自由にデザインやテーマを変更することができ、オリジナルのショップ作りに役立ちます。コードで直接カスタマイズする方法では、HTMLやCSSなどを使います。

直接カスタマイズすることが出来るのは商品詳細ページやブログ部分、固定ページです。少しだけコードを変更するだけでも見栄えが良くなり、他のストアとの差別化も狙えます。

一般的にはコードを変更するときには該当するファイルをローカルに落とし込む必要がありますが、shopifyではその必要はありません。管理画面から作業することが可能なので、手間が省けます。

現在設定しているテーマを複製して、失敗しても大丈夫なように保存しておきます。複製すると「テーマライブラリ」に追加されるので、必ず確認しましょう。複製したファイルを元に、コードの編集に取り掛かります。

「コードを編集する」をクリックするとテーマの基本構築が表示されます。表示された基本構築に、CSSを書き込みます。CSSファイルを新たに作成して、コードを書くやり方です。ファイル名は自分がすぐに分かるような名前にして、Assets内のファイルに入れておきます。アクセスすると編集画面になるので、追加したいコードを記述するのです。

HTMLファイルを書き込むときには商品管理など変更したい項目を開いて、エディタのHTMLソースを表示します。表示されたら、セットしておいたCSSを記述して終了です。直接入力する方法では不要な改行などが見つかることもあるので、気になる場合は消しておくと安心です。全ての作業が終わったらプレビューで確認して、複製しておいたテーマを反映させます。

カスタマイズすることで得られるメリット

カスタマイズをすることで、より見やすいサイトが作れます。お店の商品やテーマに合わせたデザインにすることでアクセスしただけでどのようなお店なのかが分かり、探している商品があるのかも一目で理解することも出来るのです。

さらに、変更したデザインによってはよりお店の魅力がお客さんに伝わるようになり、売り上げアップを狙うことも夢ではありません。

テーマやコンセプトは明確に

shopifyでカスタマイズをするときにはショップのテーマやコンセプトをハッキリさせて、それに合ったページになるように工夫しましょう。

テーマやコンセプトがブレていると見にくくなってしまったりして、集客に繋がらないこともあるので注意が必要です。始める前にテーマやコンセプトを明確にして、それからカスタマイズ作業をするとスムーズです。

あなたにおすすめの記事

よく読まれている記事

この記事を見た人はこんな記事も見ています

Shopify Works blogをご覧のみなさまへ

Shopify works Blogでは、Shopifyのアプリや構築制作方法、運用マーケティング手段についてはもちろん、自社のECサイトを構築・運用する 上で必要な情報を紹介しております。現在日本では開発業者の数が少ないため、検索しても役立つ情報が少ないことが現状です。そのためSh opify works Blogでは、今後Shopifyの導入を検討している企業担当者様へ向けて、正確な役立つ情報を発信して行くことを心掛けております。
企業担当者様については、Shopify導入に対してご不明点や懸念事項がございましたら、お問い合わせ窓口よりお気軽にお問い合わせください。
また他カートをご利用中でShopifyへの乗り換えをご検討中の企業様についても、ご支援が可能でございます。世界シェアNo.1のECプラットフ ォームが日本で展開を初めて2年が経ちましたが、Shopify Works blogではさらにShopifyの魅力を発信していきます。