Hi all, would love some guidance on how to hide the cart icon at the top right. I tried to comment it out, but the entire header disappeared.
Below is the header code. The website is https://trg-natural-pharmaceuticals.myshopify.com/ and password: honevo
Thanks so much!
{% liquid
assign logo = section.settings.logo
assign logo_max_width = section.settings.logo_max_width
assign logo_position = section.settings.logo_position
assign navigation_position = section.settings.navigation_position
assign style = section.settings.style
assign transparent_home = section.settings.enable_transparent_home
assign color_text_transparent = section.settings.color_text_transparent
assign color_icon_transparent = section.settings.color_icon_transparent
assign color_border_transparent = section.settings.color_border_transparent
assign color_count_transparent = section.settings.color_count_transparent
assign opacity_border_transparent = section.settings.opacity_border_transparent
assign logo_transparent = section.settings.logo_transparent
assign border_opacity = opacity_border_transparent | divided_by: 100.0
assign menu = section.settings.menu
assign secondary_menu = section.settings.secondary_menu
assign links = linklists[menu].links
assign secondary_links = linklists[secondary_menu].links
assign secondary_menu_valid = false
if secondary_menu != blank and secondary_menu != menu
assign secondary_menu_valid = true
endif
if cart.item_count > 0
assign count_visible = true
endif
%}
{%- capture header_logo -%}
<h1 class="header__logo">
<a
class="header__logo-link" href="{{ routes.root_url }}"
{% if logo != blank or logo_transparent != blank %}
aria-label="{{ shop.name }}"
{% endif %}
>
{%- if logo != blank -%}
{%- render 'image' with image: logo, wrapper_class: 'regular-logo', preload: true -%}
{%- endif -%}
{%- if logo_transparent != blank -%}
{%- render 'image' with image: logo_transparent, wrapper_class: 'transparent-logo', preload: true -%}
{%- endif -%}
{%- if logo == blank or logo_transparent == blank -%}
<span class="header__logo-text">{{ shop.name }}</span>
{%- endif -%}
</a>
</h1>
{%- endcapture -%}
{%- capture search_icon -%}
<a
class="header__icon-touch header__icon-touch--search no-transition"
href="{{ routes.search_url }}"
data-search
aria-label="{{ 'general.accessibility.open_search' | t }}"
>
{% render 'icon-button' with icon: 'search' %}
</a>
{%- endcapture -%}
{%- capture account_icon -%}
<a
class="header__icon-touch header__icon-touch--account"
href="{{ routes.account_url }}"
aria-label="{{ 'general.accessibility.go_account' | t }}"
>
{% render 'icon-button' with icon: 'account' %}
</a>
{%- endcapture -%}
{%- capture cart_icon -%}
<a
class="header__icon-touch no-transition"
href="{{ routes.cart_url }}"
aria-label="{{ 'general.accessibility.open_cart' | t }}"
data-js-cart-icon
>
{% render 'icon-button' with icon: 'shopping-cart' %}
<div class="header__cart-count" data-js-cart-indicator>
<span data-js-cart-count>{{ cart.item_count }}</span>
</div>
</a>
{%- endcapture -%}
{%- capture nav -%}
<nav class="header__links" data-navigation>
{%- if menu == blank and secondary_menu != blank -%}
{% render 'navigation' with menu: secondary_links %}
{%- else -%}
{% render 'navigation' with menu: links %}
{%- endif -%}
</nav>
{%- endcapture -%}
{%- capture burger -%}
<button class="header__menu-icon header__icon-touch header__icon-menu" aria-label="{{ 'general.accessibility.open_menu' | t }}" data-js-menu-button>
{% render 'icon-button' with icon: 'menu' %}
</button>
{%- endcapture -%}
{%- capture filler -%}<div class="header__filler"></div>{%- endcapture -%}
{% capture search_settings %}
{
"limit": {{ settings.search_max_result_size | json }},
"show_articles": {{ settings.search_show_articles | json }},
"show_pages": {{ settings.search_show_pages | json }},
"show_price": {{ settings.search_show_price | json }},
"show_vendor": {{ settings.search_show_vendor | json }}
}
{% endcapture %}
<header
data-section-id="{{ section.id }}"
data-section-type="header"
class="
header
header--{{ style }}
header--{{ logo_position }}
header--navigation-{{ navigation_position }}
{% if logo != blank -%}
header--has-logo
{%- endif %}
{% if transparent_home and template.name == 'index' %}
header--transparent-home
{% endif %}
{% if logo_transparent != blank %}
header--has-transparent-logo
{% endif %}
{% if shop.customer_accounts_enabled -%}
header--has-accounts
{%- endif %}
{% if secondary_menu_valid -%}
header--has-secondary-menu
{%- endif %}
{% if menu == blank and secondary_menu != blank -%}
header--primary-menu-is-secondary
{%- endif %}
"
style="
--width-max-logo: {{ logo_max_width }}px;
--color-cart-count-transparent: {{ color_count_transparent }};
--color-text-transparent: {{ color_text_transparent }};
--color-icon-transparent: {{ color_icon_transparent }};
--color-border-transparent: {{ color_border_transparent | color_modify: 'alpha', border_opacity }};
"
>
<script type="application/json" data-search-settings>{{ search_settings }}</script>
<a href="#main" class="header__skip-top-content btn btn--primary btn--small">
{{ 'general.accessibility.skip_to_content' | t }}
</a>
<div class="header__inner">
<div class="header__left">
{%- if logo_position == 'center' and navigation_position == 'below' and style == 'inline' -%}
{{ burger }}
{{ search_icon }}
{%- elsif logo_position == 'left' and style == 'inline' and navigation_position != 'below' -%}
{{ header_logo }}
{{ burger }}
{{ nav }}
{%- elsif logo_position == 'left' and style == 'inline' and secondary_menu_valid and navigation_position == 'below' -%}
{{ burger }}
{{ header_logo }}
{%- elsif logo_position == 'left' and style == 'inline' and navigation_position == 'below' -%}
{{ burger }}
{{ header_logo }}
{%- elsif logo_position == 'left' and style == 'icon' -%}
{{ header_logo }}
{{ burger }}
{%- elsif logo_position == 'center' and style == 'inline' -%}
{{ burger }}
{{ nav }}
{%- elsif logo_position == 'center' and style == 'icon' -%}
{{ burger }}
{%- endif -%}
</div>
<div class="header__center">
{{ header_logo }}
</div>
<div class="header__right">
{%- unless logo_position == 'center' and navigation_position == 'below' and style == 'inline' -%}
{{ search_icon }}
{%- endunless -%}
{%- if shop.customer_accounts_enabled -%}
{{ account_icon }}
{%- endif -%}
{{ cart_icon }}
</div>
{%- if navigation_position == 'below' and style == 'inline' -%}
<div class="header__below-left">
<!-- logo menu needs to always be somewhre else -->
{%- if logo_position == 'left' -%}
{%- if secondary_menu_valid -%}
{{ burger }}
{%- endif -%}
{{ nav }}
{%- else -%}
{{ filler }}
{%- endif -%}
</div>
<div class="header__below-center">
{%- if logo_position == 'center' -%}
{{ nav }}
{%- endif -%}
</div>
{%- endif -%}
{% render 'header-quick-search' %}
{% render 'quick-cart' %}
</div>
<div class="no-js-menu no-js-menu--desktop">
{% render 'no-js-navmenu' with menu: menu, secondary_menu: secondary_menu %}
</div>
{% render 'drawer-menu' with menu: menu, secondary_menu: secondary_menu %}
</header>
<style>
{% if transparent_home %}
.template-index #main {
margin-top: calc(var(--height-header) * -1);
}
.template-index #main .offset-section:first-child .slideshow__content-inner,
.template-index #main .offset-section:first-child .video-hero__content-inner {
padding-top: calc(var(--height-header) - var(--space-outer));
}
{% endif %}
</style>
{% schema %}
{
"name": "Header",
"class": "header__outer-wrapper",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"id": "logo_max_width",
"type": "range",
"min": 50,
"max": 350,
"step": 10,
"unit": "px",
"label": "Logo max width",
"default": 200
},
{
"id": "menu",
"type": "link_list",
"label": "Main menu",
"default": "main-menu"
},
{
"id": "secondary_menu",
"type": "link_list",
"label": "Secondary menu"
},
{
"id": "style",
"type": "select",
"label": "Style",
"options": [
{ "value": "inline", "label": "Links" },
{ "value": "icon", "label": "Menu icon" }
],
"default": "inline"
},
{
"id": "navigation_position",
"type": "select",
"label": "Links position",
"options": [
{ "value": "inline", "label": "Inline"},
{ "value": "below", "label": "Below"}
],
"default": "inline"
},
{
"id": "logo_position",
"type": "select",
"label": "Logo position",
"options": [
{ "value": "left", "label": "Left"},
{ "value": "center", "label": "Center"}
],
"default": "left"
},
{
"type": "header",
"content": "Transparent header"
},
{
"id": "enable_transparent_home",
"type": "checkbox",
"label": "Enable on home page",
"info": "Ensure that you have a Slideshow or Video hero section as the first section on your homepage.",
"default": false
},
{
"id": "color_text_transparent",
"type": "color",
"label": "Text color",
"default": "#ffffff"
},
{
"id": "color_icon_transparent",
"type": "color",
"label": "Icon color",
"default": "#ffffff"
},
{
"id": "color_count_transparent",
"type": "color",
"label": "Cart count color",
"default": "#000"
},
{
"id": "color_border_transparent",
"type": "color",
"label": "Border color",
"default": "#ffffff"
},
{
"id": "opacity_border_transparent",
"type": "range",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Border opacity",
"default": 50
},
{
"id": "logo_transparent",
"type": "image_picker",
"label": "Logo image",
"info": "Default logo will be used if no image is set."
}
]
}
{% endschema %}
