テーマ「Dawn」で制作しています。
スマートフォンで閲覧したときに、ヘッダーの「サーチアイコン」を消して「アカウントアイコン」を表示することは可能でしょうか？
デフォルトだと「アカウントアイコン」が消えてしまうので、これを残したいと思っています。
ご教授いただけると幸いです。
ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、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
キュー小坂様
ご丁寧ありがとうございます。
設定変更できました。