🔖

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

2023/02/26に公開

はじめに

この記事では、
【Shopify ヘッダー構築①】『おしゃれなヘッダー』 PC版
の続きで、スマホ版の実装について解説します。

前回の記事はこちらです。

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

今回はスマホ版なので、すべて画面幅を749px以下で反映させていきます。

@media screen and (max-width: 749px) {
 CSSの記述
}

編集ファイルは、前回と同じくsectionフォルダ>header.liquidです。
CSSの記述もPC版と同じファイルに記述します。

PC版で設定した以下のメニューは非表示にします。

コードはこちらです。

nav.header__inline-menu {
 display: none;
}

デフォルトでは、headerタグのgrid-areaが以下のようになっています。

headerのgrid-areasについて

grid-template-areas: "left-icon heading icons";

今回は、headerは2行にするので、以下のコードにします。

headerのgrid-areas(新規コード)

grid-template-areas: "heading icons left-icon"
                     "search search search";

"heading"：ロゴ
"icons"：アカウントやカートのアイコン
"left-icon"：ハンバーガーメニュー(メニューまとめ)
"search"：検索窓
をそれぞれ指します。

これにより配置も変更できます。

検索タグをsearchに当てはめていきます。

.search-modal__form {
 grid-area: search;
}

あとは細かい修正をして終了です。

追加CSSコード

.header__icon.header__icon--cart {
 margin-left: 0;
 padding: 1rem;
}

.header > header-drawer {
 margin-left: 0;
 margin-right: -1.2rem;
}

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