🕌

【Shopify ヘッダー構築①】『おしゃれなヘッダー』 PC版

2023/02/18に公開

Shopify

tech

はじめに

この記事では、Shopifyでおしゃれなヘッダーの実装について解説します。

まずはPC版の実装についてまとめていきます。

このようなおしゃれなデザインのPC版ヘッダーを構築していきます。

ちなみに使用テーマDawnのデフォルトのヘッダーはこちらです。

編集ファイルについて

今回編集するファイルは、sectionフォルダ > header.liquidです。

※念のためheader.liquidファイルを別ファイルで保存しておいてください。

CSSファイルも新しくassetsフォルダ内に作成しておいてください。名前は何でも良いです。

全体設定について

ヘッダーの各設定は、こちらのようにします。

文字フォント： Amiri (Googleフォント)
背景色：antiquewhite #FAEBD7
文字サイズ：19px
文字間隔：0.2rem
ヘッダーのSVGアイコン：3rem

これらをCSSファイル内に記述します。

ヘッダーのHTMLについて

ヘッダーの大まかなHTML構造は、こちらのようになっています。

<sticky-header ~ >
  <header class= ... >
    <header-drawer >
    <h1 ... >
    <nav ... >
    <div class="header__icons ~ " ... >
  </header>
</sticky-header>
<!-- すべてif文は省略してあります -->

検索タグの設置について

まずは、こちらの検索タグを設定します。

検索タグはデフォルトのコードをコピペします。
コードの場所はheader.liquidの327~383行目または558~614行目です。
Ctrl + Fで{%- if settings.predictive_search_enabled -%}
を検索してください。

検索タグコード

{%- if settings.predictive_search_enabled -%}
  <predictive-search ~ >
  ～
　</search-form>
{%- endif -%}

上記のコードをまるごと切り取り、header.liquidの418行目に挿入します。

418行目はCtrl + Fで{%- if section.settings.logo_position != 'middle-center' -%}
を検索し、そのif文に対する{% endif %}です。その直後に切り取ったコードを挿入します。

<sticky-header ~ >
  <header class= ... >
    <header-drawer >
    <h1 ... >
    <!-- 検索タグコードの挿入箇所 -->
    <nav ... >
    <div class="header__icons ~ " ... >
  </header>
</sticky-header>

ちなみにデフォルトの検索アイコンは不要なので、非表示設定にします。

メニューの設置について

次にメニューを設定します。

先述のnavタグ(正確にはその直前の{% if ~ }文から)を丸ごとheaderタグの外に出します。
コードの場所はCtrl + Fで{%- if section.settings.menu != blank -%}を検索し、直後にnavタグがあるコードです。

navタグコード

{%- if section.settings.menu != blank -%}
  <nav class="header__inline-menu page-width">
  ～
  </nav>
{%- endif -%}

修正前

<sticky-header ~ >
  <header class= ... >
    <header-drawer ~ >
    <h1 ... >
    <検索タグ>
    <nav ... ~ > <!-- navタグコード -->
    <div class="header__icons ~ " ... >
  </header>
</sticky-header>

修正後

<sticky-header ~ >
  <header class= ... >
    <header-drawer ~ >
    <h1 ... >
    <検索タグ>
    <div class="header__icons ~ " ... >
  </header>
  <nav ... > <!-- navタグコード -->
</sticky-header>

メニューのホバー時に下線を表示させる仕様について

メニューをホバーした際に、下線が表示される設定をします。

  .header__inline-menu .header__menu-item > span::after {
    position: absolute;
    content: "";
    height: 2px;
    bottom: -10px;
    left: 0;
    width:100%;
    transform: scaleX(0);
    transform-origin: center;
    background: #000000;
    transition: all .3s;
  }
  .header__inline-menu .header__menu-item:hover > span::after {
    transform: scaleX(1);
  }
  .header__inline-menu .header__menu-item .header__active-menu-item::after {
    transform: scaleX(1);
  }

ヘッダーアイコンの変更について

ヘッダーアイコンの変更方法については、別の記事でまとめてあります。

動作確認

きれいな仕上がりですね！

終わり

これにて解説は終了です。
次は、スマホ版の実装(レスポンシブ対応)について解説していきます。

Shopifyの構築を承ります！

Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！