テーマ「Dawn」で制作しています。
スマートフォンで閲覧したときに、ヘッダーの「サーチアイコン」を消して「アカウントアイコン」を表示することは可能でしょうか？
デフォルトだと「アカウントアイコン」が消えてしまうので、これを残したいと思っています。
ご教授いただけると幸いです。
Topic summary
Dawnテーマを使用したスマートフォン表示で、ヘッダーの「サーチアイコン」を非表示にし、「アカウントアイコン」を表示させる方法についての質問。
解決方法（CSS調整）：
- 管理画面 > オンラインストア > カスタマイズ
- テーマ設定 > カスタムCSSを選択
- 提供されたCSSコード（メディアクエリ使用）を追加して保存
結果：
- スマートフォン表示時にサーチアイコンが非表示になる
- アカウントアイコンが表示される
質問者は設定変更に成功し、解決済み。liquidファイル調整とCSS調整の2つの方法があるが、今回は設定が簡単なCSS方式で対応。
ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、liquidファイルを調整する方法と、cssで調整する方法の2通り調整方法がありますが、今回は設定が簡単なcssで調整する方法を記載させていただきます。
設定方法
**1.**管理画面 > オンラインストア > カスタマイズボタンをクリック
**2.**左側テーマ設定をクリック
**3.**カスタムCSSを選択し、下記CSSを追加し保存
@media screen and (max-width: 749px) {
.header__search {
display: none !important;
}
.header__icon--account.small-hide {
display: flex !important;
align-items: center;
justify-content: center;
}
}
以上でスマートフォンでサイトを閲覧した際、「サーチアイコン」は非表示となり、
「アカウントアイコン」が表示されます。
ご参考まで。
(キュー小坂)
2 Likes
キュー小坂様
ご丁寧ありがとうございます。
設定変更できました。