How Do I Add a Logout Link to Superstore's Basic Header?

The Basic option for Superstore's header layout excludes a logout link. If a logout link is important for your store, consider using this guide to adjust the theme files to include it. This process could be adapted to display the logout link for other themes, as well.

Edit theme files with the template editor (add link HTML, then CSS codes) to include a logout link for Superstore's Basic header.

Edit theme files with the template editor

It's always worthwhile to back up your work before making theme file adjustments, so consider duplicating your theme and other best practices before completing this adjustment.

What steps should I take before modifying theme files?

In the Online Store, select Actions, then Edit code.

Add the link code

In the theme files, open Sections, then static-basic-header.liquid.

Use the search function of your browser to locate this block of code:

<span class="visually-hidden">{{ 'general.accessibility.cart' | t }}</span> 
 </div> 
 </a>

After the last </a>, add this code as a new line (i.e. don't replace any code):

{% if shop.customer_accounts_enabled %}
 {% if customer %}
 <div class="site-header-button site-header-logout-link">
 <a href="{{ routes.logout_url }}" data-no-instant>
 {{ 'header.account.logout' | t }}
 </a>
 </div>
 {% endif %}
 {% endif %}

Here's a side-by-side example:

Save.

Add some styling to improve the appearance

Add this code to the very bottom of your theme.css.liquid file in Assets:

/* basic header logout button styling */
.site-header-logout-link a {
  margin: auto;
  color: $color-header-text;
  text-decoration: none;
}

Save, then Preview changes.

Optional logout link for accounts page  

Consider adjusting the customers/accounts.liquid file in Templates, as well. This provides a logout link for the main customer accounts page.

In this file, search for this line of code:

<p class="account-info-item">

Just above this, on a new line, add this block:

 <p class="account-info-item">
 <a href="{{ routes.account_logout_url }}" data-no-instant>
 {{ 'header.account.logout' | t }}
 </a>
 </p>

Here's a side-by-side example:

Save, then Preview changes.