【誰でも簡単】Shopifyをカスタマイズ！より売れるECサイトを目指す！

オンラインショップが乱立している今、お客様に視覚的に訴えるショップの商品ページづくりは、あなたの扱う商品のブランド力を上げると同時に、より良い顧客層を呼び込むためにとても重要になりつつあります。とはいえ、Shopifyの商品ページをあなたの思い描くイメージどおりにカスタマイズするとなると、技術を持たない人にとってはハードルが高いことでしょう。
ですが、自ら商品ページをカスタマイズ出来るようになれば、好きなときにいつでも微調整ができるだけでなく、商品をお客様に購入していただけるコンバージョン率を向上させられるなど、売れるECサイトに成長させる方法を知る手がかりにもなります。

そこで、ここでは、Shopifyの商品ページをカスタマイズする方法や、テーマコードを編集する方法を解説していきます。Shopifyのオンラインショップを自由にカスタマイズできるようになりたい人は、ぜひこの続きをお読みください。

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

Shopifyの商品ページで行うべきカスタマイズ 

それは次のとおりです。

1. ボタンの大きさを変える
2. テキストの色変更
3. カートページの外観を変える
4. フォントの変更

このようなカスタマイズは、テーマのデフォルト設定で簡単に行えますから是非行ってみましょう。
具体的には、商品ページのテンプレートを次のようにします。

1. Shopifyの管理画面から『オンラインストア』＞『テーマ』へ
2. 『カスタマイズボタン』＞『テーマの編集画面』へ
3. 『ドロップダウンリスト』＞『商品ページ』でテンプレートのカスタマイズ

なお、ここでできるのは前出のような小さな調整だけで、次のような項目をテンプレートに加えることはできません。

新しいセクションの追加

デフォルトの設定では、ストア管理画面のデザイン機能に制限があるため、ほとんどのテーマで変更できません。

商品ページのレイアウト変更

商品ページ内で、いわゆる要素のレイアウトや位置変更はできません。

たとえば、商品説明を縦長ではなく横長にしたい場合なども出来ないようになっています。ですが、上記でもOKであれば、コード編集をせずともカスタマイズできることもあります。

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

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

コードを編集しないでカスタマイズする場合は、あらかじめ用意されているテーマを選択し、『テーマエディタ』というツールで行います。

１．テーマを選択

まずは、お好みのテーマを選択し、

1. 管理画面で『オンラインストア]』を選択
2. 『テーマライブラリー』でテーマ選択
3. テーマのスタイルを選び『テーマライブラリーに追加する』を選択

２．テーマエディタの起動

配色やフォントなどの基本的な設定をする方法で、次のようにします。

1. 『テーマライブラリー』＞ 『カスタマイズ』 を選択
2. 『テーマエディタ』が起動したら『カスタマイズ』をクリック

これでテーマのコンテンツ設定などを変更できます。

また、コンテンツの追加や削除、設定の変更時のテーマプレビューなども、サイドバーまたは編集メニューから作業できます。

３．テーマやコンテンツの追加・設定・編集

次の手順で操作します。

1. 管理画面かの『オンラインストア』＞『テーマ』へ
2. 編集したいテーマで『カスタマイズする』を選択

これで見た目や雰囲気、および機能を変更・設定できます。

なお、テーマやコンテンツは、次の『静的』『動的』の2つから作成されています。

静的セクション

オンラインショップで削除や再配置ができないものです。

商品ページやコレクションページなどのページ上で、ヘッダー、フッター、ナビゲーションセクション、またはコンテンツセクションなど指します。

動的セクション

オンラインショップのレイアウト変更や、セクションの追加や再配置、または削除するなどしてレイアウト変更できる部分です。

なお、テーマ設定では、

• オンラインショップの文字体裁
• 色
• SNSへのリンク
• チェックアウト設定

などを変更できます。

なお、セクション内のテーマ設定に加えた変更は、オンラインショップ全体に適用されます。

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

Shopifyのテーマコードを編集する方法 

テーマコード自体を編集したいときは、次の手順で行います。

1. テーマの複製
2. テーマコードの編集
3. CSSの記述
4. HTMLの記述
5. CSSの読み込み
6. プレビュー確認
7. 本番環境に反映

具体的に解説しますね。

 テーマの複製

コード編集をするときは、万が一に備えてまずはバックアップをしておくべく、次のようにテーマの複製を作っておきましょう。

1. Shopify管理画面で『現在のテーマ』を選択
2. 『アクション』から『複製する』を選択

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

テーマコードの編集

2. で複製したテーマの『アクション』から『コードを編集する』を選択し、テーマエディターで編集作業を行います。

CSSの記述

テーマコードのCSSを編集する場合は、次のように記述します。

1. 『Assets』をクリックして『新しいassetを追加する』を選択
2. 『空のファイルを作成する』の項目から『.scss.liquid』を新規作成

『.scss.liquid』のファイル名は他のファイルと被らない名前にします。

ファイルが作成できればCSSを記述できるようになり、変更内容は画面上部のプレビューからいつでも確認できます。

 HTMLの記述

HTMLを記述するときは、CSSのテーマコード編集からではなく、商品ページやブログ記事内で行います。

なお、HTMLの記述方法は、ワードプレスなどと同じように直感的に行えますから、見出しや箇条書きなどを追加できます。

CSSの読み込み

記述したCSSを読み込ませるために

1. 『Layout』内の『theme.liquid』を開く
2. 『　{{ ‘theme.scss.css’ | asset_url | stylesheet_tag}}　』の記述を探す
3. 上記の直下に先ほど作成したCSSファイルを追記

これで記述したCSSテーマコードを読み込ませることができます。

プレビュー確認

記述した内容を保存したら、

1. テーマライブラリの『アクション』＞『プレビュー』へ
2. デモサイトが表示される

ここで、記述したCSSテーマコード とHTMLがイメージどおりに表示されているかを確認します。

本番環境に反映

プレビューで問題がないことを確認できたら、

1. テーマの『アクション』から『公開する』へ
2. 本番環境に変更内容が反映

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

修正前の状態に戻したいときは、複製前のCSSテーマコードを本番環境に反映させればOKです。

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

Shopifyをカスタマイズする際のポイント

自由にカスタマイズできるShopifyですが、実際に作成するときはいくつか押さえておきたいポイントがあります。ポイントを踏まえてECサイトをカスタマイズしないと、商品が売れないショップになるかもしれません。

Shopifyをカスタマイズする際のポイントには、次のようなものがあります。

• ポイント① ブランド名と商品名を記載する
• ポイント② 詳しい商品情報を記載する
• ポイント③ メインビジュアルを工夫する
• ポイント④ 購入ボタンが目立つように作成する
• ポイント⑤ 用品購入者の口コミ機能を利用する

それぞれの項目を確認していきましょう。

ポイント① ブランド名と商品名を記載する

ECサイトで商品を販売するとき、商品名だけを記載する方も少なくありません。しかし、多くのお客様は商品名に加えてブランド名で検索することがほとんどです。そのため、自社のECサイトでもブランド名と商品名を記載するようにしましょう。

少しでも多く集客を図るためには、オーガニック検索の流入を増やしたいところです。

オーガニック検索とは、ユーザーが検索したキーワードに対して表示された広告を除いた検索結果のことをいいます。SEO対策にもなるので、ブランド名と商品名は必ず記載したいところですね。

ポイント② 詳しい商品情報を記載する

商品紹介をするとき、できるだけ細かく商品情報を記載しましょう。

初めて商品を購入するお客様は、希望の商品ががっかりしないか不安に感じていることも少なくありません。このような不安を取り除くには、少しでも多くの判断材料を提供できるように商品情報を記載することが大切です。

例えば、アパレルのECサイトを立ち上げるなら、洋服のサイズはもちろんのことアイテムを使用したコーディネートや購入する利点を紹介するのもいいですね。商品のイメージを具体化することで、お客様も購入しやすくなります。

お客様は意外と商品説明を読んでいるので、読みやすく分かりやすい文章を書くことも求められます。

ポイント③ 商品画像やメインビジュアルを工夫する

商品画像やイメージ画像は、お客様のブランドや商品に対する印象を大きく左右します。単に商品画像やイメージ画像を貼り付けるのではなく、お客様の興味を惹きつけることが大切です。また、アパレルのブランドであればモデルが実際に着用する画像を活用するのもおすすめです。

お客様が分かりやすいように正面はもちろんのこと、横から見た姿や後ろ姿の画像を撮影するのもいいでしょう。ブランドや商品を購入するかどうかは、初見で決まることが多いといわれています。ただの画像だと油断せず、ECサイトに使用する商品画像やメインビジュアルを工夫しましょう。

ポイント④ 購入ボタンが目立つように作成する

オンラインショップには、必ず購入ボタンを付けなければいけません。ただ、ECサイトに訪れたお客様が分からないような購入ボタンを用意しても、それは購入には繋がりません。

例えば、購入ボタンのカラーや配置する場所、サイズを工夫しましょう。これらの工夫をしたからといって必ずしも効果が得られるわけではありませんが、自社に適した方法が必ずあるはずです。

思い付くことをテストとして実践してみるのがおすすめです。そのなかで、もっとも効果があったものを採用しましょう。

ポイント⑤ 商品購入者の口コミ機能を利用する

ShopifyのECサイトをカスタマイズするときは、口コミ機能をうまく活用しましょう。

お客様は第三者による口コミを判断材料にしていることが多く、購入に繋がることがあります。カゴ落ち対策にもなるので、購入率を高められるはずです。

カゴ落ちはECサイトで商品を一度カートに入れたものの、購入までは至らず離脱してしまうことをいいます。

カゴ落ちする理由は、配送料や手数料が高かったり希望の決済方法がなかったりなど、さまざまなことが考えられます。一方で、実際に購入するべきか悩むお客様も少なくありません。

このような場合は、口コミを確認してもらい商品の魅力を知ってもらえれば、購入に至る可能性も高まります。積極的に口コミ機能を活用してみいてはいかがでしょうか。

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

Shopifyをカスタマイズする際の注意点 

カスタマイズをするときは、次のような点に注意しましょう。

HTMLの構造やclass名、id名を変えるときは要注意

Shopifyの商品バリエーション選択やカートへの追加などはJavaScriptという言語で動いています。

ですから、既成テーマのCSSテーマコード編集などをカスタマイズするときは『class』や『id』というHTMLに書かれている要素名が変わってしまうと正しく動作しなくなるので注意しましょう。

多機能テーマを使うのであればそのテーマで出来ることをやる

安易にCSSテーマコードをカスタマイズしたり、外部アプリを追加すると、テーマ自体が壊れてしまうケースもあるので、事前にしっかりと互換性を確認しておきましょう。

なお、外部アプリの種類によっては、CSSテーマコードをアプリ側で変更できるものもあります。

この場合、不具合があってアプリを消してもCSSテーマに加えられたコードは残り続けてしまうため、エラーとなることもありますから注意しましょう。

CSSテーマコードなどの編集前は必ずバックアップを取る

テーマコードのカスタマイズや外部アプリを追加するときは、その作業前に必ず現状のバックアップを取る習慣をつけておきましょう。

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

【Shopify】編集・カスタマイズにおすすめアプリ 

Shopifyの編集・カスタマイズにおすすめのアプリを3つご紹介します。

Smart Product Filter & Search

おすすめアプリ　Smart Product Filter & Search

サイト内の商品検索をスムーズにするアプリで、訪問したお客様が検索ボックスにキーワードを入力すると、商品名だけではなく商品画像や価格等の細かい情報もプルダウンで表示される機能があります。

また、検索時のフィルター機能も充実していて、

• コレクション
• 仕入先
• 商品タイプ
• 色
• サイズ
• タグ
• 評価
• 価格
• 値引率
• 在庫切れ

などといった、さまざまなフィルターで絞り込み検索を行うことができるようになる編集アプリです。

All In One Product Zoom

おすすめアプリ 　 All In One Product Zoom

訪問したお客様が気になる商品を見つけたときに、画像を大きくしてディテールを確認できるといった、商品画像にズーム機能を加えることができる編集アプリです。

ズームの種類は3タイプで

1. ウィンドウズーム機能：商品画像の横に拡大画像を表示
2. インナーズーム機能：商品画像上にカーソルを移動させると、その部分だけ画像を拡大
3. レンズズーム機能：虫眼鏡のように画像を拡大（レンズの形は円形・正方形から選択）

また、ズームレベルや位置、サイズ、色までカスタマイズでき、掲載画像・商品に合わせてズーム機能も調整する、といったアレンジもできます。

Shipping Rates by Parcelify

おすすめアプリ 　Shipping Rates by Parcelify

Shopifyの送料で、細かな送料設定にできます。

たとえば、

• 冷蔵・冷凍便配送などの希望による送料の変更対応
• 離島など、都道府県と同一金額にできない送料などの細かな設定
• 〇〇と他2点を購入したら送料無料など合計価格以外の送料割引プロモーション

などが細かく設定できる編集アプリです。

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

Shopifyで売れる商品ページにカスタマイズするには

売れる商品ページにカスタマイズするには、次のようなポイントがあります。

• 商品画像
• 価格
• 在庫数

それぞれの特徴を確認していきましょう。

商品画像

売れる商品ページにカスタマイズするには、商品画像の選定も重要です。商品の中には、文字で詳細な情報を伝えても十分な魅力が伝わらない場合もあります。逆に、魅力的な商品画像を設定するだけで、視覚的な情報を伝えることが可能です。文字情報を読まなくても購入に至る場合もあります。

価格

商品ページにおいて、価格を設定するのは当たり前のことなのかもしれません。しかし、単なる購入価格だけでなく割引後の価格設定も重要になります。Shopifyでは、割引前の価格に取引線が引かれ、割引後の価格が前面に出ます。お得感を演出できるため、購入を促せる場合があります。

在庫数

Shopifyでは、商品が売れると自動で商品数が減算されます。返品や交換があるときは、自動で個数が補充されるため便利です。ただし、外部倉庫と連携している場合は、個数のズレが発生することがあります。個数にズレがあると売り逃がしのリスクがあるため、正確な在庫数を把握することが重要です。

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

まとめ：【誰でも簡単】Shopifyをカスタマイズ！より売れるECサイトを目指す！

以上が、Shopifyの商品ページカスタマイズやCSSのテーマコードを編集する方法になります。

とはいえ、コードの編集やHTMLの記述や書き換えと聞くと、ハードルが高いと感じてしまうかもしれません。

なので、このとき一番重要なのは、

• オンラインショップに搭載したい機能を整理しておくこと

あなたのショップに必要な機能、不要な機能を、他のShopifyサイトを参考に事前にピックアップしておき、実際にその機能を搭載できるかを判断していきしましょう。

そして、自分のスキル以上の力が必要だとわかったときは、専門知識を持ったサポート業者にカスタマイズを委託することも一つの方法です。

このように、出来ることと出来ないことをしっかり見極め、効率的な作業を続けることで、あなただけの『売れるオンラインショップ』づくりを目指しましょう。