Hide cart icon in Spark Theme

Solved
INFRA
Shopify Expert
42 0 20

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 %}

 

Pallavi
Shopify Expert
2239 370 486

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Natztech
Shopify Partner
1446 405 963

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;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
dmwwebartisan
Shopify Partner
7480 1776 2381

This is an accepted solution.

@INFRA 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
INFRA
Shopify Expert
42 0 20

Thanks @dmwwebartisan and @Natztech  @Pallavi these all worked perfectly!

Pallavi
Shopify Expert
2239 370 486

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
INFRA
Shopify Expert
42 0 20

Thanks @Pallavi  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?

0 Likes