Shopifyのヘッダーのアイコン一部を消したい！
Koby0213
Shopifyのデザインをいじる時に地味に時間がかかるところです！クラスは検証ツールで見れば一発で分かるものではありますが、毎回のことなのに面倒ください！忘れてしまうのでここに残しておきます！
Contents
CSSで簡単に対応！
.header__search {
display: none;
}
SP（モバイル）だけ消したい／PCだけ消したい という場合は、CSSで制御する方が柔軟です
Liquidで根本から非表示にする場合（コメントアウト）
カスタマイズからheader.liquidを開きこのコードを</header>直前に張り付けてサーチアイコンの箇所を削除
{% render ‘header-search’, input_id: ‘Search-In-Modal’ %}
{% comment %}{% render ‘header-search’, input_id: ‘Search-In-Modal’ %}{% endcomment %}ログイン・カートアイコンをCSSで非表示にする方法
何かと便利。
/* ログインアイコンを非表示 */
.header__icon--account {
display: none !important;
}
/* カートアイコンを非表示 */
.header__icon--cart {
display: none !important;
}補足：特定の画面サイズだけ消したい場合
SP（モバイル）だけ消したいというときはこれ！
@media screen and (max-width: 767px) {
.header__icon--account {
display: none !important;
}
.header__icon--cart {
display: none !important;
}
}注意！：カスタマイザーのサイドバーからCSSを簡易的にいじる場合
わかりやすくするために/*SP*/とかコメントメモを残してしまい、ですがこれをするとCSSが効かないことがあるみたい。コメント残さなければ普通に残ります。
この記事を書いた人
ラスベガス在住WEB系クリエイター。アメリカ人の夫とワンコと暮らす29歳。
「とにかく分かりやすく解説」をモットーに役に立つ観光情報から海外生活のあれ、WEB制作の備忘録を発信しています。