Add text next to the account login icon

Result:

After customer is logged in, the text is changed to LOG-OUT:

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 for the theme that you'll be changing. Example live theme:

Example draft theme:

1

Modify header.liquid file

Modify sections/header.liquid:

Use the find feature in the code editor (Command-F on Mac or Control-F in Windows) and search for:

/account

Example:

We will be replacing that entire line with new code. This is the line we will be replacing:

Replace that line with this new code:

Click to view code

Example:

Save the file:

2

Optional: Add CSS style to hide on mobile

Since mobile space is limited, you may want to hide the text in order to help display your announcement message. To only show the text on desktop/tablets and hide on mobile, use this CSS code snippet in theme.scss.liquid:

/* -- code to hide account message on mobile only -- */
@include at-query ($max, $small) {
  .show-desktop-only {display:none;}
}
/* - end - */

Example hidden on mobile only:

Instructions on where to add the CSS code snippet:

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us