Editing Login Page Text Code

Topic summary

A user is attempting to customize the login page text “Choose how you’d like to log in” on their Shopify store to better explain the one-time code login process to new users. The text is not easily accessible because it’s masked when the one-time code login option is enabled.

Initial Problem:

  • User cannot locate the HTML/liquid files for this specific text in the Theme Editor
  • Switching to Legacy customer accounts didn’t reveal the location
  • Inspecting the page HTML hasn’t helped identify where to edit in the theme code

Attempted Solution:
A support representative suggested using CSS to replace the text by:

  • Hiding the original text with font-size: 0
  • Adding replacement content using ::after pseudo-element
  • Initially directed to a file path that doesn’t exist in the user’s theme

Current Status:
The issue remains unresolved. The user has tried adding the CSS code in multiple locations (base.css, theme.liquid, customer.css, main-login.liquid) without success. The solution worked in the support representative’s test environment but not on the actual store.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Hello, I am trying to edit the text highlighted in the image i provided “Choose how you’d like to log in”. I went into my Theme Editor to find the customer accounts but didnt see anything related to those liquid files, I found out they are masked when you have the “one-time” code login option available. But thats the whole reason I want to edit the text. I am looking to add text on how you enter your email to receive a code for login because its not very clear to new users when they click on the account icon and are met with only options of shop login or email address- there isnt a register/sign up nor clear instruction on the fact its a coded login.

I changed the customer account to Legacy (classic) to reveal the files but I couldn’t find the HTML text location for this specifically. SO my question is, when I inspect my login page and pull up the HTML code, how can I find out where to go within my theme code to edit this section?

URL: Flexiidesigns.com (no password needed)

Hi @Flexii

I am from Mageplaza - Shopify solution expert.

You can easily achieve what you want by using CSS in case you’re unable to locate the specific element.

Please open the file assets/access_and_auth/customer_authentication_provider/application.css, and then add the following CSS code:

#customer-account-description {
  font-size: 0;
  position: relative;
}

#customer-account-description::after {
  content: "Content replacement";
  font-size: 14px;
  display: block;
}

*result:

Please let me know if it works as expected.

Best regards!

So I went into the theme editor, and went to the assets folder- I did not find the file-map you mentioned. Here is a quick screen video of what the assets folder has on my end.

Assets Folder Dropdown

@Flexii

Please open the base.css file, then add the above code. Save the file and check the result.

I added your code to the top of the base.css file and this was the live result it gave me.

@Flexii

In your case, please locate the file in the layout directory that you’re confident is responsible for rendering the login page. Then, add the CSS code inside the tag within that file.


I tried adding it within that same location in the theme.liquid you are showing in the image, then tried adding it in a ton of different spots within the assets/customer.css file, and the main-login.liquid within the sections file. Unfortunately none of the locations I tried gave me a changed result.