Shopify themes, liquid, logos, and UX
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 %}
Solved! Go to the solution
This is an accepted solution.
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:
a.header__icon-touch.no-transition:nth-of-type(2) {
display:none!important;
}
This is an accepted solution.
hello @INFRA
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.header__icon-touch.no-transition:nth-child(2){
display:none !important;
}
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.header__icon-touch+.header__icon-touch{
display: none;
}
Hope this works.
Thanks!
This is an accepted solution.
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:
a.header__icon-touch.no-transition:nth-of-type(2) {
display:none!important;
}
This is an accepted solution.
hello @INFRA
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.header__icon-touch.no-transition:nth-child(2){
display:none !important;
}
Hello. do you know how to remove the hamburger menu in the same theme?
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.header__icon-touch+.header__icon-touch{
display: none;
}
Hope this works.
Thanks!
Thanks @dmwwebartisan and @Kinjaldavra @ZestardTech these all worked perfectly!🙂
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
Thanks @ZestardTech I was actually wondering how to turn the 'contact us' into a button. I have hidden the add to cart button and would like the 'contact us' to be a button (linking to the contact page). Do you know how this is done?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024