スマートフォン表示でのヘッダーアイコンの変更

[merrow]

テーマ「Dawn」で制作しています。

スマートフォンで閲覧したときに、ヘッダーの「サーチアイコン」を消して「アカウントアイコン」を表示することは可能でしょうか？

デフォルトだと「アカウントアイコン」が消えてしまうので、これを残したいと思っています。

ご教授いただけると幸いです。

[Qcoltd · Accepted solution]

ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、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;
  }
}

以上でスマートフォンでサイトを閲覧した際、「サーチアイコン」は非表示となり、

「アカウントアイコン」が表示されます。

ご参考まで。

(キュー小坂)

[merrow]

キュー小坂様

ご丁寧ありがとうございます。

設定変更できました。