非エンジニアでもできる!Shopifyのヘッダー編集をわかりやすく解説

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サムネイル96

この記事の所要時間:6分

ShopifyはノーコードでECサイトを構築できるため、誰でも簡単にネットショップを始めることができます。

しかし、基本的にはテンプレートデザインをそのまま活用するため、どうしてもShopify感が伝わるデザインになってしまいます。

多くのマーチャントは、「できることであればコード編集をして、よりデザインを良くしたい」と考えているでしょう。

そこで今回は、ほとんどのページに表示され、サイトのとても重要な部分でもあるヘッダーの編集方法についてご紹介します。

非エンジニアの方でも編集ができるようにわかりやすく説明するので、ぜひ挑戦してみてください。

コード編集する内容

今回、コード編集する内容は以下の3つです。

・メニューアイコンの変更
・ヘッダーを透過
・ページ途中からヘッダーを表示

まずはネットショップの画面右上にあるメニューボタンのアイコンを変更します。メニューボタンのアイコンには「カート」「会員登録」「検索」などがあります。

次に、サイトのファーストビューで画像をアピールするためにヘッダーを透過します。

ヘッダーを透過すると、ページをスクロールする途中で他の文字と被ってわかりにくくなるため、ページ途中からヘッダーを表示する設定を最後に行います。

本記事のコード編集で、以下のようなデザインを実現できます。

次に、サイトのファーストビューで画像をアピールするためにヘッダーを透過します。ヘッダーを透過すると、ページをスクロールする途中で他の文字と被ってわかりにくくなるため、ページ途中からヘッダーを表示する設定を最後に行います。

また、今回はテーマ「Debut」でコード編集を行います。テーマによって編集内容が異なる可能性があるので注意してください。

メニューアイコンの変更

最初はメニューアイコンの変更方法について説明します。

1. メニューアイコンを選択する

まずは、以下のサイトから好みのアイコンを選択してください。(サイト画面の左上に検索バーがあります。)

Font Awesome

Font Awesomeの中から使用するアイコンを選択し、「Download SVG」をクリックしてSVGファイルを保存します。

Font Awesomeの中から使用するアイコンを選択し、「Download SVG」をクリックしてSVGファイルを保存します。

保存したSVGファイルを開き、右クリックでメニュー内の「ページのソースを表示」をクリックします。

保存したSVGファイルを開き、右クリックでメニュー内の「ページのソースを表示」をクリックします。

そうすると、SVGファイルのソースコードが別のタブで表示されるので、その全文をコピーします。

2. アイコンのスニペットを作成する

次はShopifyの管理画面から「オンラインストア > テーマ > アクション > コード編集」をクリックして、コード編集画面を開きます。

「Snippets」にある「新しいSnippetを追加する」をクリックし、ファイル名を入力します。

ファイル名はわかりやすいものにしてください。ここでは「cart-menu」という名前を設定します。

そうすると「cart-menu.liquid」という空のファイルが生成されるので、先ほどダウンロードしたSVGファイルのコードを貼り付けます。

「Snippets」にある「新しいSnippetを追加する」をクリックし、ファイル名を入力します。そうすると「cart-menu.liquid」という空のファイルが生成されるので、先ほどダウンロードしたアイコンのSVGファイルのコードを貼り付けます。

貼り付けたコードのclass名を「icon icon-cart」に変更して「保存する」をクリックします。

貼り付けたコードのclass名を「icon icon-cart」に変更して「保存する」をクリックします。

※今回はカートのアイコンについて説明していますが、検索ボタンの場合は「icon icon-search」、会員登録ボタンの場合は「icon icon-login」というclass名に変更してください。

3. スニペットをヘッダーで呼び出す

最後に、作成したスニペットをヘッダー上に呼び出します。

コード編集画面の「Sections」にある「header.liquid」をクリックします。

※編集前に必ずコードを別のファイルに保存してください。

header.liquidファイル内で「icon-cart」の文字を探します。すると周辺も含め、以下のように各ボタンのコードがわかります。

コード編集画面の「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;
 }
一番はじめに出てくる「site-header」について、コードを編集します。

最後に「保存する」をクリックして完成です。これでヘッダーが透明になり、常にサイトの画面上部に固定されます。

画像とアイコンのカラーが被って見えにくい場合は、先ほど説明した手順でアイコンのカラーを変更してください。

ページ途中からヘッダーを表示

ヘッダーを透過すると、ファーストビューで画像を目立たせることができます。

しかし、ページをスクロールする中で、背景カラーとヘッダー上の文字やアイコンのカラーが被って見えなくなる問題が発生します。

そこで次は、ページをスクロールすると途中でヘッダーをカラー表示する方法を説明します。

まずは「Layout」にある「theme.liquid」を開き、<head>内に以下のコード(jQuery)をコピペします。

※編集前に必ずコードを別のファイルに保存してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
まずは「Layout」にある「theme.liquid」を開き、<head>内にjQueryのコードをコピペします。

同じく「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>
同じく「theme.liquid」の<body>内に以下のコードをコピペします。

「保存する」をクリックします。

次に「Assets」にある「theme.css」を開き、先ほど編集した「site-header」の下に以下のコードをコピペします。

※編集前に必ずコードを別のファイルに保存してください。

.site-header.transform{
background-color: #333;
}

ちなみに「#333」の部分は、好みのカラーコードで設定が可能です。

次に「Assets」にある「theme.css」を開き、先ほど編集した「site-header」の下に以下のコードをコピペします。

最後に「保存する」をクリックして完成です。プレビュー画面から確認してください。

【最後に】ヘッダーのコード編集に挑戦してみよう

今回はShopifyのヘッダー編集について解説しました。

ヘッダーはほとんどのページに表示され、サイトのファーストビューでもあります。

とても重要な部分なので、ぜひ本記事を参考に自分好みのデザインに編集してみください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Shopify構築・ネットショップ担当者 育成

これからネットショップを始めようと考えているけど、ECサイト運営に強い人材が社内にいないと困っていませんか?

イチ役では、ネットショップ運営を内製化できるように、Shopifyを活用したネットショップ構築から運営までをサポートし、同時にネットショップ担当者の育成を行います。


詳しくはこちら

SNSでもご購読できます。