How to add a Sign-in link next to the account login icon

Result:

or without icon:

After customer is logged in, the text is removed, only the icons is shown:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

1

Modify header.liquid file

Modify sections/header.liquid:

Modify this line from (usually line number 9):

<a href="/account"><img src="{{ 'account.svg' | asset_url }}"></a>

Option 1: With account icon

Replace that line with this code:

{% if customer %}            
  <a href="/account"><img src="{{ 'account.svg' | asset_url }}"></a> 
{% else %}      
  <a href="/account"><img src="{{ 'account.svg' | asset_url }}"> <span class="show-desktop-only"> Sign-in</span></a>          	                   
{% endif %}

Example:

Another example:

Save the file.

Option 2: Remove icon and only use text

To remove the icon completely and only have the Sign-in text, use this instead:

{% if customer %}            
  <a href="/account"><img src="{{ 'account.svg' | asset_url }}"></a> 
{% else %}      
  <a href="/account"><span class="show-desktop-only"> Sign-in</span></a>          	                   
{% endif %}

Example:

Result with additional CSS applied:

2

Options to style and display text

Option 1: Hide on mobile only

Since mobile space is limited, you may not want the text to display. To only show the text on desktop/tablets and hide on mobile, use this code:

/* -- code to hide account message on mobile only -- */
@media all and (max-width: $small) {
.show-desktop-only {display:none;}
}
/* -- end -- */

Example hidden on mobile only:

Option 2: Uppercase 

/* -- code to change account link text to uppercase -- */
.header-account-link {
  text-transform: uppercase;
}
/* -- end -- */

Example:

Option 3: Adjust positioning of text

/* -- code to modify account link text position -- */
.show-desktop-only {
    position:relative; bottom:2px; left: 2px;
}
/* -- end -- */

Example moved up and left by 2px:

The next three options will allow you to use the same font as other elements on your theme:

Option 4: Use title font

/* -- code to change font for header account area -- */
.header-account-link {
  font-family: $titleFontStack; 
}
/* -- end -- */

Option 5: Use subheading font

/* -- code to change font for header account area -- */
.header-account-link {
  font-family: $accentFontStack; 
}
/* -- end -- */

Option 6: Use body font

/* -- code to change font for header account area -- */
.header-account-link {
  font-family: $bodyFontStack; 
}
/* -- end -- */

Where do I add any of these style/display code snippets?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

Still need help? Contact Us Contact Us