My website uses the Dawn theme. I need to customize the header cart and account login icon hide in both mobile and desktop views.
Website: https://varthagamin.myshopify.com/
password: var
Topic summary
A user needs to hide the cart and account login icons from the Dawn theme header on both mobile and desktop views.
Three solutions were proposed:
-
Comment out Liquid code: Locate
header.liquidfile and comment out the code blocks for both the account icon and cart icon sections. Alternatively, wrap the code in HTML tags and applydisplay:none;CSS. -
CSS-only approach (DaisyVo): Add CSS to
base.cssfile:
.header__icon--cart,
a.header__icon.header__icon--account.link.focus-inset .small-hide {
display: none !important;
}
- Alternative CSS (Rahul_dhiman): Add different CSS to
base.css:
.header__icon--cart, a.header__icon.header__icon--account.link .focus-inset.small-hide {
display: inherit;
align-items: center;
}
Note: The third solution appears to show icons rather than hide them, which contradicts the original request. The CSS-based solutions (options 2-3) are simpler than editing Liquid code. Screenshots were provided demonstrating the results.
Go to Dawn Theme file > Edit theme > search for header.liquid
Comment this code
{%- if shop.customer_accounts_enabled -%}
{%- if customer and customer.has_avatar? -%}
{{ customer | avatar }}
{%- else -%}
{% render ‘icon-account’ %}
{%- endif -%}
{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}
{%- if cart.item_count < 100 -%}
{{ cart.item_count }}
{%- endif -%}
{{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
or
you can wrap that code with html tag and add a css to display:none;
Hi @Sivadarshan
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.header__icon--cart,
a.header__icon.header__icon--account.link.focus-inset.small-hide {
display: none !important;
}
Result
Best,
DaisyVo
Hello @Sivadarshan
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.
.header__icon--cart, a.header__icon.header__icon--account.link.focus-inset.small-hide {
display: inherit;
align-items: center;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks