2021.9.18

Shopifyをカスタマイズ!テーマコードを編集してより売れるECサイトを目指す!

Shopifyをカスタマイズ!テーマコードを編集してより売れるECサイトを目指す!

オンラインショップが乱立している今、お客様に視覚的に訴えるショップの商品ページづくりは、あなたの扱う商品のブランド力を上げると同時に、より良い顧客層を呼び込むためにとても重要になりつつあります。

とはいえ、Shopifyの商品ページをあなたの思い描くイメージどおりにカスタマイズするとなると、技術を持たない人にとってはハードルが高いことでしょう。

ですが、自ら商品ページをカスタマイズ出来るようになれば、好きなときにいつでも微調整ができるだけでなく、商品をお客様に購入していただけるコンバージョン率を向上させられるなど、売れるECサイトに成長させる方法を知る手がかりにもなります。

そこで、ここでは、Shopifyの商品ページをカスタマイズする方法や、テーマコードを編集する方法を解説していきます。

Shopifyのオンラインショップを自由にカスタマイズできるようになりたい人は、ぜひこの続きをお読みください。

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

それは次のとおりです。

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

このようなカスタマイズは、テーマのデフォルト設定で簡単に行えますから是非行ってみましょう。

具体的には、商品ページのテンプレートを次のようにします。

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

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

新しいセクションの追加

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

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

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

たとえば、商品説明を縦長ではなく横長にしたい場合なども出来ないようになっています。

ですが、上記でもOKであれば、コード編集をせずともカスタマイズできることもあります。

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

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

1.テーマを選択

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

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

2.テーマエディタの起動

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

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

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

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

3.テーマやコンテンツの追加・設定・編集

次の手順で操作します。

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

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

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

静的セクション

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

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

動的セクション

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

なお、テーマ設定では、

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

などを変更できます。

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

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

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

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

具体的に解説しますね。

 テーマの複製

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

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

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

テーマコードの編集

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

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です。

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

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

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

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

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

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

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

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

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

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

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

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

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

Product Filter & Search

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

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

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

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

All In One Product Zoom

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

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

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

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

Parcelify

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

たとえば、

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

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

まとめ:Shopifyをカスタマイズ!テーマコードを編集してより売れるECサイトを目指す!

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

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

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

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

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

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

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

Shopify experts(エキスパート)ならShopi Lab

監修者
黒岩俊児
黒岩俊児

shopify 制作チーム責任者・テクニカルディレクター 株式会社セルフプラスCEO

Shopifyサイト制作のスペシャリスト。本業であるサイト制作に加え、公認のShopify expertとして数々のShopifyサイトを手掛けている。2021年7月よりShopifyに関する様々な一次情報を得るため、自らShopify本社のあるカナダへ移住。

この監修者の記事一覧

あなたにおすすめの記事

よく読まれている記事

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

お問い合わせ

Shopi Lab(ショピラボ)

Shopi Lab(ショピラボ)をご覧のみなさまへ

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