Announcement bar edits: Replace Login/Create Account Text with icon, remove cart/search text

Solved
avmhb
Tourist
7 0 2

Hello,

I am using minimal theme and would like to make some edits to the announcement bar.

1. Login or Create Account text:  I would like to replace this with My Account icon, linking to /account

2. Cart: I would like to delete the "cart" text next to the cart icon

3. Search: I would like to delete the "search" text next to the search icon

Thanks for any assistance!

0 Likes
suyash1
Shopify Partner
2735 290 452

@avmhb - this will need few code/css settings, it can be done. you will need to add developer to staff, you can contact me on my email.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
avmhb
Tourist
7 0 2

Hi Suyash,

Thanks for your help!  I can make changes to the header.liquid myself.

Are you able to provide some guidance on what I need to change?

Thanks!

 

 

<style>
  {%- assign logo_width = 695 -%}
  {%- assign logo_max_width = section.settings.logo_max_width | times: 1 -%}
  {% if logo_max_width < logo_width %}
    {%- assign logo_width = logo_max_width -%}
  {% endif %}
  .logo__image-wrapper {
    max-width: {{ logo_width }}px;
  }
  /*================= If logo is above navigation ================== */
  {% if section.settings.nav_below_logo %}
    .site-nav {
      {% if section.settings.show_header_lines %}
        border-top: 1px solid {{ settings.color_borders }};
        border-bottom: 1px solid {{ settings.color_borders }};
      {% endif %}
      margin-top: 30px;
    }

    {% unless section.settings.left_aligned_logo %}
      .logo__image-wrapper {
        margin: 0 auto;
      }
    {% endunless %}
  {% endif %}

  /*============ If logo is on the same line as navigation ============ */
  {% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %}
    .site-header .grid--full {
      border-bottom: 1px solid {{ settings.color_borders }};
      padding-bottom: 30px;
    }
  {% endunless %}


  {% unless section.settings.nav_below_logo %}
    @media screen and (min-width: 769px) {
      .site-nav {
        text-align: right!important;
      }
    }
  {% endunless %}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="header-bar">
    <div class="wrapper medium-down--hide">
      <div class="post-large--display-table">

        {% if section.settings.show_announcement or section.settings.header_search_enable %}
          <div class="header-bar__left post-large--display-table-cell">

            {% comment %}
              Add social links to header
            {% endcomment %}

            {% comment %}
            <div class="header-bar__module header-bar__module--list">
              {% include 'social-links' %}
            </div>
            {% endcomment %}

            {% if section.settings.show_announcement %}
              <div class="header-bar__module header-bar__message">
                {% if section.settings.announcement_link != blank %}
                  <a href="{{ section.settings.announcement_link }}">
                {% endif %}
                  {{ section.settings.header_text | escape }}
                {% if section.settings.announcement_link != blank %}
                  </a>
                {% endif %}
              </div>
            {% elsif section.settings.header_search_enable %}
              <div class="header-bar__module header-bar__search">
                {% include 'search-bar' with 'header' %}
              </div>
            {% endif %}

          </div>
        {% endif %}

        <div class="header-bar__right post-large--display-table-cell">

          {% if shop.customer_accounts_enabled %}
            <ul class="header-bar__module header-bar__module--list">
              {% if customer %}
                <li>
                  <a href="/account">{{ 'layout.customer.account' | t }}</a>
                </li>
                <li>
                  {{ 'layout.customer.log_out' | t | customer_logout_link }}
                </li>
              {% else %}
                <li>
                  {{ 'layout.customer.log_in' | t | customer_login_link }}
                </li>
                <li>{{ 'layout.customer.or' | t }}</li>
                <li>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                </li>
              {% endif %}
            </ul>
          {% endif %}

          <div class="header-bar__module">
            <span class="header-bar__sep" aria-hidden="true"></span>
            <a href="/cart" class="cart-page-link">
              <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            </a>
          </div>

          <div class="header-bar__module">
            <a href="/cart" class="cart-page-link">
              {{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
              <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
            </a>
          </div>

          {% if section.settings.header_search_enable %}
            {% if section.settings.show_announcement %}
              <div class="header-bar__module header-bar__search">
                {% include 'search-bar' with 'header' %}
              </div>
            {% endif %}
          {% endif %}

        </div>
      </div>
    </div>

    <div class="wrapper post-large--hide announcement-bar--mobile">
      {% if section.settings.show_announcement %}
        {% if section.settings.announcement_link != blank %}
          <a href="{{ section.settings.announcement_link }}">
        {% endif %}
          <span>{{ section.settings.header_text | escape }}</span>
        {% if section.settings.announcement_link != blank %}
          </a>
        {% endif %}
      {% endif %}
    </div>

    <div class="wrapper post-large--hide">
      {% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
        <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
          <span class="icon icon-hamburger" aria-hidden="true"></span>
          {{ 'layout.navigation.menu' | t }}
        </button>
      {% endunless %}
      <a href="/cart" class="cart-page-link mobile-cart-page-link">
        <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
        {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
      </a>
    </div>
    {% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
  </div>

  <header class="site-header" role="banner">
    <div class="wrapper">

      {% if section.settings.nav_below_logo %}
        <div class="grid--full">
          <div class="grid__item">
            {% if template.name == 'index' %}
              <h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo != blank %}
                <noscript>
                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
                  <div class="logo__image-wrapper">
                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
                  </div>
                </noscript>
                <div class="logo__image-wrapper supports-js">
                  <a href="/" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="logo__image lazyload"
                         src="{{ section.settings.logo | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ shop.name | escape }}"
                         itemprop="logo">
                  </a>
                </div>
              {% else %}
                <a href="/" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if template.name == 'index' %}
              </h1>
            {% else %}
              </div>
            {% endif %}
          </div>
        </div>
        <div class="grid--full medium-down--hide">
          <div class="grid__item">
            {% include 'site-nav' with linklists[section.settings.nav_menu] %}
          </div>
        </div>
      {% else %}
        <div class="grid--full post-large--display-table">
          <div class="grid__item post-large--one-third post-large--display-table-cell">
            {% if template.name == 'index' %}
              <h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo != blank %}
                <noscript>
                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
                  <div class="logo__image-wrapper">
                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
                  </div>
                </noscript>
                <div class="logo__image-wrapper supports-js">
                  <a href="/" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="logo__image lazyload"
                         src="{{ section.settings.logo | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ shop.name | escape }}"
                         itemprop="logo">
                  </a>
                </div>
              {% else %}
                <a href="/" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if template.name == 'index' %}
              </h1>
            {% else %}
              </div>
            {% endif %}
          </div>
          <div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">
            {% include 'site-nav' with linklists[section.settings.nav_menu] %}
          </div>
        </div>
      {% endif %}

    </div>
  </header>
</div>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "checkbox",
        "id": "header_search_enable",
        "label": "Show search bar"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo",
        "info": "450 x 200px recommended"
      },
      {
        "type": "text",
        "id": "logo_max_width",
        "label": "Custom logo width (in pixels)",
        "default": "450"
      },
      {
        "type": "header",
        "content": "Main menu"
      },
      {
        "type": "link_list",
        "id": "nav_menu",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "checkbox",
        "id": "nav_below_logo",
        "label": "Center main menu below logo"
      },
      {
        "type": "checkbox",
        "id": "left_aligned_logo",
        "label": "Left-align logo"
      },
      {
        "type": "checkbox",
        "id": "show_header_lines",
        "label": "Show divider lines in header"
      },
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "show_announcement",
        "label": "Show announcement",
        "default": true
      },
      {
        "type": "text",
        "id": "header_text",
        "label": "Text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Link",
        "info": "Optional"
      }
    ]
  }
{% endschema %}

 

0 Likes
suyash1
Shopify Partner
2735 290 452

@avmhb - check search bar snippet to remove search text and remove this line from cart to remvoe cart text - 

  {{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}

 

also you need to add font awesome library to replace text with icons 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
avmhb
Tourist
7 0 2

Hi Suyash,

Thanks for your help with removing the cart/search text.

I have now added the font awesome library by adding

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' | stylesheet_tag }}

into my themes.liquid file

Are you able to help with the code for replacing the Login or Create Account text?

Thank you so much!

0 Likes
suyash1
Shopify Partner
2735 290 452

This is an accepted solution.

@avmhb - you see this code? you need to add icons you like in place of text

 

{% if customer %}
                <li>
                  <a href="/account">{{ 'layout.customer.account' | t }}</a>
                </li>
                <li>
                  {{ 'layout.customer.log_out' | t | customer_logout_link }}
                </li>
              {% else %}
                <li>
                  {{ 'layout.customer.log_in' | t | customer_login_link }}
                </li>
                <li>{{ 'layout.customer.or' | t }}</li>
                <li>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                </li>
              {% endif %}
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes