非エンジニアでもできる！Shopifyのヘッダー編集をわかりやすく解説
この記事の所要時間：6分
ShopifyはノーコードでECサイトを構築できるため、誰でも簡単にネットショップを始めることができます。
しかし、基本的にはテンプレートデザインをそのまま活用するため、どうしてもShopify感が伝わるデザインになってしまいます。
多くのマーチャントは、「できることであればコード編集をして、よりデザインを良くしたい」と考えているでしょう。
そこで今回は、ほとんどのページに表示され、サイトのとても重要な部分でもあるヘッダーの編集方法についてご紹介します。
非エンジニアの方でも編集ができるようにわかりやすく説明するので、ぜひ挑戦してみてください。
コード編集する内容
今回、コード編集する内容は以下の3つです。
・メニューアイコンの変更
・ヘッダーを透過
・ページ途中からヘッダーを表示
まずはネットショップの画面右上にあるメニューボタンのアイコンを変更します。メニューボタンのアイコンには「カート」「会員登録」「検索」などがあります。
次に、サイトのファーストビューで画像をアピールするためにヘッダーを透過します。
ヘッダーを透過すると、ページをスクロールする途中で他の文字と被ってわかりにくくなるため、ページ途中からヘッダーを表示する設定を最後に行います。
本記事のコード編集で、以下のようなデザインを実現できます。
また、今回はテーマ「Debut」でコード編集を行います。テーマによって編集内容が異なる可能性があるので注意してください。
メニューアイコンの変更
最初はメニューアイコンの変更方法について説明します。
同じ内容を以下の動画でもわかりやすく解説しているので、あわせて参考にしてください。
では、順に説明します。
1. メニューアイコンを選択する
まずは、以下のサイトから好みのアイコンを選択してください。(サイト画面の左上に検索バーがあります。)
Font Awesomeの中から使用するアイコンを選択し、「Download SVG」をクリックしてSVGファイルを保存します。
保存したSVGファイルを開き、右クリックでメニュー内の「ページのソースを表示」をクリックします。
そうすると、SVGファイルのソースコードが別のタブで表示されるので、その全文をコピーします。
2. アイコンのスニペットを作成する
次はShopifyの管理画面から「オンラインストア > テーマ > アクション > コード編集」をクリックして、コード編集画面を開きます。
「Snippets」にある「新しいSnippetを追加する」をクリックし、ファイル名を入力します。
ファイル名はわかりやすいものにしてください。ここでは「cart-menu」という名前を設定します。
そうすると「cart-menu.liquid」という空のファイルが生成されるので、先ほどダウンロードしたSVGファイルのコードを貼り付けます。
貼り付けたコードのclass名を「icon icon-cart」に変更して「保存する」をクリックします。
※今回はカートのアイコンについて説明していますが、検索ボタンの場合は「icon icon-search」、会員登録ボタンの場合は「icon icon-login」というclass名に変更してください。
3. スニペットをヘッダーで呼び出す
最後に、作成したスニペットをヘッダー上に呼び出します。
コード編集画面の「Sections」にある「header.liquid」をクリックします。
※編集前に必ずコードを別のファイルに保存してください。
header.liquidファイル内で「icon-cart」の文字を探します。すると周辺も含め、以下のように各ボタンのコードがわかります。
「render」または「include」でスニペットを呼び出すことができるので、
「{% include ‘icon-cart.liquid’ %}」の部分を「{% render ‘cart-menu.liquid’ %}」に書き換えます。最後に「保存する」をクリックして完成です。
同じ操作でダウンロードしたSVGファイルのコードをもとにスニペットを作成し、検索ボタンや会員登録ボタンも変更することができます。
ちなみに、Shopifyの管理画面から「オンラインストア > カスタマイズ > テーマ設定 > 色」をクリックして、「見出しとリンク」の欄でアイコンのカラーを変更することも可能です。
ヘッダーを透過
次にヘッダーを透過する方法について説明します。
この編集は、特にサイトのファーストビューに画面いっぱいの画像を設定している方にオススメです。
また、動画でも「Shopifyサイトのヘッダーを透過するコード編集」について解説しているので、以下の動画もあわせて参考にしてください。
では、解説していきます。
まずはコード編集画面を開き、「Assets」にある「theme.css」をクリックします。
※編集前に必ずコードを別のファイルに保存してください。
theme.cssファイル内で「site-header」の文字を探します。
一番はじめに出てくる「site-header」について、
.site-header {
position: relative;
background-color: var(–color-body);
}
の部分を、以下のコードに書き換えます。
.site-header {
background-color: transparent;
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
border: none;
}
最後に「保存する」をクリックして完成です。これでヘッダーが透明になり、常にサイトの画面上部に固定されます。
画像とアイコンのカラーが被って見えにくい場合は、先ほど説明した手順でアイコンのカラーを変更してください。
ページ途中からヘッダーを表示
ヘッダーを透過すると、ファーストビューで画像を目立たせることができます。
しかし、ページをスクロールする中で、背景カラーとヘッダー上の文字やアイコンのカラーが被って見えなくなる問題が発生します。
そこで次は、ページをスクロールすると途中でヘッダーをカラー表示する方法を説明します。
まずは「Layout」にある「theme.liquid」を開き、<head>内に以下のコード(jQuery)をコピペします。
※編集前に必ずコードを別のファイルに保存してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
同じく「theme.liquid」の<body>内に以下のコードをコピペします。
<script>
var _window = $(window),
_header = $('.site-header'),
heroBottom;
_window.on('scroll',function(){
heroBottom = $('#shopify-section-hero-1').height();
if(_window.scrollTop() > heroBottom){
_header.addClass('transform');
}
else{
_header.removeClass('transform');
}
});
_window.trigger('scroll');
</script>
「保存する」をクリックします。
次に「Assets」にある「theme.css」を開き、先ほど編集した「site-header」の下に以下のコードをコピペします。
※編集前に必ずコードを別のファイルに保存してください。
.site-header.transform{
background-color: #333;
}ちなみに「#333」の部分は、好みのカラーコードで設定が可能です。
最後に「保存する」をクリックして完成です。プレビュー画面から確認してください。
【最後に】ヘッダーのコード編集に挑戦してみよう
今回はShopifyのヘッダー編集について解説しました。
ヘッダーはほとんどのページに表示され、サイトのファーストビューでもあります。
とても重要な部分なので、ぜひ本記事を参考に自分好みのデザインに編集してみください。
