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

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

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

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

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

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

① テーマを選ぶ

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

② 「カスタマイズ」をクリックして編集する

テーマを選ぶとリストに追加されるので「カスタマイズ」をクリックして編集に取り掛かります。編集の画面では右側にプレビューが表示されるので、それを見ながら微調整をしていくだけです。

ロゴの変更や告知バー、スライドショーやテキストの変更が出来るので、好みに合わせて調整します。テーマを選ぶときには無料のものだけではなく、有料のテーマを専用ストアで購入することも可能です。

③ CSSで調整して、見やすいフォントにする

shopifyは主に英語圏でのサービスが中心となっているので、日本語のテキストでは文字が大きくなってしまったり、行間が狭くなったりして見にくくなるケースも珍しくありません。CSSで調整して、見やすいフォントにすることも大事です。

編集の画面の「テーマアクション」から「コードを編集する」を押します。SCSSファイルを見つけたら、「〇〇,scss.liquid」にCSSを加えます。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

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

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

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

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

① 現在設定しているテーマを複製して保存する

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

② コードを編集する

「コードを編集する」をクリックするとテーマの基本構築が表示されます。表示された基本構築に、CSSを書き込みます。CSSファイルを新たに作成して、コードを書くやり方です。

ファイル名は自分がすぐに分かるような名前にして、Assets内のファイルに入れておきます。アクセスすると編集画面になるので、追加したいコードを記述するのです。

③ HTMLファイルを書き込む

HTMLファイルを書き込むときには商品管理など変更したい項目を開いて、エディタのHTMLソースを表示します。表示されたら、セットしておいたCSSを記述して終了です。

直接入力する方法では不要な改行などが見つかることもあるので、気になる場合は消しておくと安心です。

④ プレビューで確認する

全ての作業が終わったらプレビューで確認して、複製しておいたテーマを反映させます。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

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

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

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

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

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

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

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