Login & Logout Functionality

Highlighted
Shopify Partner
33 0 2

My theme has a login button that links to the customer portal that I set up in the navigation area via standard navigation items. Users are able to login to their accounts. Problem is, when a user is logged in, the login button doesn't turn into logout button.  How can I alter the code to make it have a logout button and logout? check out site here.

Here is the code to the action bar...assuming there isn't a better place to edit? Should just be some sort of conditional statement right? Thanks in advance.

 

 

<!-- snippets/action-bar.liquid -->
{% comment %}
  Action Bar
    - Only appears on pages which contain a link that is in the action bar
    - Exceptions: always on for collections. Always off for product.

    To remove the action bar, remove or comment out `{% include 'action-bar' %}
    anythwere it appears.
{% endcomment %}

{% assign action_bar_main_active = true %}
{% for link in linklists.main-menu.links %}
  {% if link.active or template == 'index' or template == 'collection' %}
    {% assign child_list_handle = link.title | handleize %}
    {% if linklists[child_list_handle].links == blank and link.active %}
      {% assign action_bar_active_url = link.url %}
    {% endif %}

    {% if linklists[child_list_handle].links != blank %}
      {% for childlink in linklists[child_list_handle].links %}
        {% if childlink.active or link.active %}
          {% assign active_child_link = true %}
          {% assign active_child_link_handle = child_list_handle %}

          {% comment %}
            make sure we're handling duplicate links in the action bar and
            sub action bar menus.
          {% endcomment %}
          {% if childlink.active.url == action_bar_active_url %}
            {% assign action_bar_main_active = false %}
          {% else %}
          {% endif %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endif %}
{% endfor %}

{% comment %}
  If on index, it should be at the bottom of the hero area
{% endcomment %}
<div class="action-bar-wrapper {% if template == 'index' %} action-bar--hero{% endif %}">
  <nav class="action-bar action-bar--has-menu" role="presentation">
    <ul class="action-bar__menu--main action-bar__menu list--inline {% if action_bar_main_active %} action-bar--show{% endif %}" id="SiteNav" role="navigation">

      {% comment %}
        Assign which child linklist is associated with the action bar
        link
      {% endcomment %}
      {% for link in linklists.main-menu.links %}
        {% assign child_list_handle = link.title | handleize %}
        {% if linklists[child_list_handle].links != blank %}
          {% if child_list_handle == active_child_link_handle %}
            {% assign active_children = true %}
          {% else %}
            {% assign active_children = false %}
          {% endif %}
          <li class="action-bar__menu-item action-bar--has-dropdown{% if link.active or active_children %} action-bar--active{% endif %}{% if active_children %} action-bar--disabled{% endif %}" data-child-list-handle="{{ child_list_handle }}" >
            <a href="{{ link.url }}" class="action-bar__link" aria-controls="{{ child_list_handle | capitalize }}">{{ link.title }}</a>
          </li>
        {% else %} 
          <li {% if forloop.last %} class="login-button"{% endif %}class="action-bar__menu-item {% if link.active %}action-bar--active{% endif %}">
            <a href="{{ link.url }}" class="action-bar__link">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    {% for link in linklists.main-menu.links %}
      {% assign child_list_handle = link.title | handleize %}
      {% if linklists[child_list_handle].links != blank %}
        <ul class="action-bar__menu--sub action-bar__menu list--inline  {% if child_list_handle == active_child_link_handle %} action-bar--show{% endif %}" id="{{ child_list_handle | capitalize }}" data-child-list-handle="{{ child_list_handle }}" role="navigation">
          <li>
            <button type="button" class="btn action-bar__back action-bar__link" aria-controls="SiteNav">
              <span class="icon icon-arrow-left" aria-hidden="true"></span>
              <span class="icon__fallback-text">{{ 'layout.navigation.action_bar_back' | t }}</span>
            </button>
          </li>
          {% for childlink in linklists[child_list_handle].links %}
            <li class="action-bar__menu-item {% if childlink.active %}action-bar--active{% endif %}">
              <a href="{{ childlink.url }}" class="action-bar__link">{{ childlink.title | escape }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    {% endfor %}
  </nav>
</div>


 

 

 

0 Likes
Highlighted
Tourist
3 0 3

I think your asking about the log in/log out feature for customers when they create and account with your store....if so, here's where you can find the log out feature:

When the customer logs in and wishes to log out, have them tap on the person icon (My Account) and under the title My Account is the Log Out button.

I missed this 100 times :). Hope this helps.

0 Likes