Shopifyテーマガイド
2. テーマのカスタマイズ機能でできること
Shopifyのオンラインストアのデザイン、使用感、機能はテーマと呼ばれるプリセットをもとに管理されています。本記事は以下シリーズの第2弾にあたり、第1弾: Shopifyの「テーマ」とはに続き、テーマの「カスタマイズ機能」で実装、編集が可能な内容をご紹介します。
目次
- 1. Shopifyの「テーマ」とは
- 2. テーマのカスタマイズ機能でできること
基本編集
ヘッダー/告知バナー
画像バナー、スライドショーの挿入
商品プレビュー、コラージュの挿入
マルチカラム要素の挿入
複数列要素の挿入
折りたたむ可能なコンテンツの挿入
ブログ記事のリンク挿入
その他アプリブロックの追加
お問い合わせフォームの追加
フッダーの編集
- 3. easyPointsの実装方法3選
Shopifyのテーマには様々な種類がございますが、カスタマイズ機能をご活用いただくことで、コードの編集なしに様々な追加要素の実装や編集が可能です。ストアに彩りと個性を与え、お客様の購入体験をより印象深いものへと変えることができます。Shopifyのテーマリストから該当テーマの「カスタマイズ」をクリックし、その中で設定変更やレイアウトの変更、要素の追加などが可能です。
「ブロックを追加」からは各要素内に項目を追加することができ、「セクションを追加」によって様々な項目を新規で追加可能です。
以降では利用可能なカスタマイズの一部を紹介します。
各項目の詳細は要素にホバーすることでご確認いただけます。（デスクトップ表示時のみ）
基本編集
テーマ内で使用するフォント、文字サイズ、背景デザインなどの基本的なデザインをページごとに編集可能です。プリセットから選択可能であり、プリセットの内容もご希望に合わせて変更が可能です。
デフォルトで存在する要素の並び替えなども可能であり、基本的な骨組みを組み直すことも可能です。
また、画像やテキスト単体を自由な位置に挿入することも可能です。
ヘッダー、告知バナー
ストアトップのヘッダーを自由に編集できます。ストアロゴの配置、全体の構成、メニューバーの表示内容、メニューの表示形式（ドロップダウン、ドロワーなど）、常時表示設定（スクロール時のみや常時表示）、国や言語のセレクターの表示、モバイル表示、各種SNSリンクやメルマガ登録フォームなど、幅広い設定を管理可能です。全てのお客様がはじめに目にする要素ですので、わかりやすく特徴的な内容でお出迎えしましょう。ヘッダーが快適に利用できることでストア内のナビゲーションが快適になり、各ページの閲覧数や購入決定率の向上にも繋がることが期待できます。
また、ストア上部に告知用のバナーを追加することもできます。セールの開催や送料無料条件、ポイントキャンペーンなど、お客様に知っていただきたい情報を随時更新することで、効果的な訴求を可能にします。画像バナーなどよりはインパクトに欠ける面がありますが、比較的業務的なお知らせの掲示や、コレクションページやカートページなど、大きな画像での告知が適さない箇所への配置に最適です。
画像バナー、スライドショーの挿入
大きく画像を表示するバナーや、それらを複数組み合わせたスライドショーを作成、設置することができます。多くの場合、ストアのトップページにて新商品のご案内やストアのイメージアート掲載、期間限定キャンペーンの訴求など、最もお客様に見ていただきたいコンテンツの告知に利用されます。
店頭での「いらっしゃいませ」のように、お客様をお出迎えするコンテンツとしてご利用することが想像されますが、トップ以外にも様々な場所への設置が可能ですので、ご利用範囲は多岐に渡ります。
商品プレビュー、コラージュの挿入
ストアの商品のプレビューや複数商品を組み合わせたコラージュが配置可能です。多くの場合にはトップページでおすすめ商品を告知したり、カート内でその他のおすすめ商品を告知したり、といった形で使用されます。コラージュ内には商品以外にもリンクや画像、動画なども設定可能であり、商品の訴求以外にも様々なPRが可能です。また、商品のプレビューでは単一商品以外にも特集コレクションとして複数の商品のプレビューを並べて設置することも可能です。
マルチカラム要素の挿入
ストア内にマルチカラム（複数項目をグループ化したボード）を設置できます。画像やテキスト、リンクが自由に設定可能なため、利用可能な幅は非常に広い要素になります。例として商品種や商品ラインごとの個別ページへのリンクを設置したり、単純に注目の商品のピップアップとして使用したり、ストアのコンセプトを複数の側面からご紹介したり、複数の要素を並列して表示、告知する際に最適な要素です。
複数列要素の挿入
複数列からなる要素を設置可能であり、お好みの画像や見出し、テキストおよびリンクボタンが設定可能です。マルチカラムよりもスペースに余裕があり、より大きく画像を表示したり、多くの情報を詰め込むことができます。表示したい内容によってお好みのものを選択してください。
折りたたみ可能なコンテンツの挿入
マルチカラム要素や複数列要素同様に複数項目を並列して設置しながらも、各項目を折りたたみ式にすることで省スペースを実現できます。折りたたみ項目のアイコンはプリセットの中から自由に選択できますが、記号から動物、様々なアイテムのアイコンなど、幅広く選択が可能です。各項目の内容には制限があり、画像や動画の挿入等はできません。告知したい内容に応じてマルチカラムや複数列要素をお使い分けください。
ブログ記事のリンク挿入
Shopifyにはデフォルトの機能でブログを作成するものがあり、こちらを利用することで簡単にストアブログが運用可能です。テーマのカスタマイズでは作成したブログへのリンクボックスを作成することができ、デザインは商品のコレクション表示などと類似したものになります。執筆者、日付、記事のサムネイルなど、ブログならではの要素の表示が設定可能です。
その他アプリブロックの追加
アプリによってはテーマのカスタマイズ機能に対応した専用のアプリブロックが存在し、コード編集を介さずにストア内にアプリの要素を導入できる場合があります。easyPointsでは商品の獲得ポイント、ポイント利用フォーム、お客様のポイント残高、会員ランク情報などがアプリブロックとして存在し、テーマ内の任意の箇所に配置可能です。（一部のブロックは設置可能なページに制限があります。）カスタマイズにてブロックを追加する際、「アプリ」のタブを選択いただくことで、ご利用可能なアプリブロックを一覧でご確認いただけます。
お問い合わせフォームの追加
ストア内の自由な位置にお問い合わせフォームを設置することができます。お名前、メールアドレス（必須）、電話番号、コメントが入力可能であり、ストアに登録されているメールアドレスへお問い合わせが届きます。
このようにカスタマイズ機能ではノンコードでありながらも非常に豊富な要素の追加/編集が可能であり、直感的で簡潔なストア管理を実現いたします。デザイン面や使用感でお客様の快適なご利用をサポートし、ブランディングの向上やタッチポイントの増加など、様々な側面でストアを強化することができます。
あなたのストアだけの世界観を作り上げ、多くのファンを迎え入れましょう！
新しい記事
"一度きりの購入で終わらせない"
会員数だけ増えても意味がない！ポイントプログラム成功の秘訣
会員数が多いのに売り上げはなかなか向上しない、多くのストアがこのような悩みをかかえています。本記事ではポイントプログラムの設計に関する細かい説明と、会員数を売り上げに繋げる方法について解説します。
次世代ECの成長戦略
AIで売れるShopify運営の次の課題は、“愛される”EC体験の構築
データ活用だけでなく、感情に寄り添う体験設計、ブランドのストーリー発信、UI/UX改善、ポイントプログラムによるエンゲージメント強化など、“愛されるEC”を実現するための実践的アプローチを解説。
【Built For Shopify認定アプリ】
easyPoints全プラン比較｜
料金・機能・選び方の完全ガイド
最新の料金プラン・機能・従量課金の仕組み・おすすめの組み合わせ例まで、easyPointsを検討中の方・見直しを考えている方に向けて詳しく解説します。ご自身のストアに最適なプランを見つけましょう。