FROM CACHE - jp_header
解決済

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

merrow
新規メンバー
7 0 0

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

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

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

 

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1049 428 412

成功

ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、liquidファイルを調整する方法と、cssで調整する方法の2通り調整方法がありますが、今回は設定が簡単なcssで調整する方法を記載させていただきます。

 

設定方法

1.管理画面 > オンラインストア > カスタマイズボタンをクリック

2.左側テーマ設定をクリック

Qcoltd_0-1682911983836.png

3.カスタムCSSを選択し、下記CSSを追加し保存

Qcoltd_1-1682911983837.png

@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;
  }
}

 

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

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

Qcoltd_2-1682911983837.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1049 428 412

成功

ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、liquidファイルを調整する方法と、cssで調整する方法の2通り調整方法がありますが、今回は設定が簡単なcssで調整する方法を記載させていただきます。

 

設定方法

1.管理画面 > オンラインストア > カスタマイズボタンをクリック

2.左側テーマ設定をクリック

Qcoltd_0-1682911983836.png

3.カスタムCSSを選択し、下記CSSを追加し保存

Qcoltd_1-1682911983837.png

@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;
  }
}

 

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

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

Qcoltd_2-1682911983837.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
merrow
新規メンバー
7 0 0

キュー小坂様

 

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

設定変更できました。