モバイルでのヘッダーアイコン表示について

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

問題の内容:
Shopifyの「Prestage」テーマで、タブレット・PCではヘッダー右側にアカウントとカートのアイコンが表示されるが、モバイルではカートアイコンのみ表示される。モバイルでもアカウントアイコンを表示させたい。

原因:
メディアクエリによって、一定以下の画面幅でアカウントアイコンが非表示になる設定になっている。コード内の sm-max:hidden や md:hidden などのクラスが原因。

解決方法:
header.liquidファイルまたは適用するCSSファイルに以下のコードを追加:

@media (max-width: [スマホサイズのpx値]) {
  .header__nav-icon {
    display: block !important;
  }
}

結果:
質問者は無事に解決した。

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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

現在、タブレットとPCではヘッダーの右側にアカウントとカートのアイコンが表示されていますが、モバイルではカートアイコンのみの仕様になっています。

モバイルでも、同様にアカウントアイコンを表示させたいのですが、どなたかご教授いただけますでしょうか。

▽アカウントアイコンのコード

{%- if shop.customer_accounts_enabled -%}

{{ ‘header.general.open_account’ | t }}

{%- if section.settings.show_icons -%}
{%- render ‘icon’ with ‘account’, class: ‘header__nav-icon’ -%}
{%- else -%}
{%- render ‘icon’ with ‘account’, class: ‘header__nav-icon’ -%}

{%- if customer -%} {{- 'header.general.account' | t -}} {%- else -%} {{- 'header.general.login' | t -}} {%- endif -%} {%- endif -%} {%- endif -%}

▽カートアイコンのコード

<a href=“{{ routes.cart_url }}” class=“relative” {% if settings.cart_type != ‘page’ and request.page_type != ‘cart’ %}aria-controls=“cart-drawer”{% endif %}>
{{ ‘header.general.open_cart’ | t }}

{%- if section.settings.show_icons -%}
{%- render ‘icon’ with ‘cart’, class: ‘header__nav-icon’ -%}
{%- else -%}
{%- render ‘icon’ with ‘cart’, class: ‘header__nav-icon’ -%}
{{ ‘header.general.cart’ | t }} ({{ cart.item_count }})
{%- endif -%}


2

質問拝見しました。

メディアクエリでアイコンが一定以下の画面幅の時に表示されな設定となっているのかと思います。

なので以下コードをheader.liquidファイルや適用するcssファイルに追加を検討してみてください。

@media (max-width: (スマホサイズに切り替わる)px) {
.header__nav-icon {
display: block !important;
}
}

header__nav-iconは例になりますので実際のアイコンのクラス名を入れてください。

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

1 Like
3

無事に解決しました！

ご丁寧にご説明いただきありがとうございました。

1 Like