Re: Hide cart icon in Spark Theme

Solved

How to hide the cart icon in Spark Theme?

INFRA
Shopify Partner
158 0 58

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

 

Accepted Solutions (3)

ZestardTech
Shopify Partner
5835 1058 1397

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

View solution in original post

Kinjaldavra
Shopify Partner
2303 570 1426

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

 

 

View solution in original post

dmwwebartisan
Shopify Partner
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Partner
5835 1058 1397

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

Kinjaldavra
Shopify Partner
2303 570 1426

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

 

 

kljlaielk
Shopify Partner
4 0 0

Hello.  do you know how to remove the hamburger menu in the same theme?

dmwwebartisan
Shopify Partner
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Partner
158 0 58

Thanks @dmwwebartisan and @Kinjaldavra  @ZestardTech these all worked perfectly!🙂

ZestardTech
Shopify Partner
5835 1058 1397

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 Partner
158 0 58

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?