Documentation
Feedback
Guides
API Reference

Guides
UI Customization
My Authentication

This guide shows the steps to change the appearance of the Authentication tab in My Account using CSS.

This guide is for stores that do not use VTEX IO, making the customization through CMS. If your store is a VTEX IO store, check the My Authentication Customization Guide using IO article.

To customize the appearance of My Authentication components, first you have to create your own CSS file with the desired customization settings. Below you can find the list of CSS handles and a CSS file example.

{"base64":"  ","img":{"width":637,"height":187,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20375,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-0.png"}}

CSS Handles
vtex_my-authentication_box_container
vtex_my-authentication_box_header
vtex_my-authentication_box_headerSeparator
vtex_my-authentication_box_content
vtex_my-authentication_box_footer
vtex_my-authentication_errorAlert_container
vtex_my-authentication_warnAlert_container
vtex_my-authentication_authenticationScreen_container
vtex_my-authentication_authenticationScreen_passBox
vtex_my-authentication_newPassInput_container
vtex_my-authentication_passValidation_container
vtex_my-authentication_passValidation_title
vtex_my-authentication_passValidation_content
vtex_my-authentication_passValidation_minLengthNumber
vtex_my-authentication_passValidation_minLength
vtex_my-authentication_passValidation_number
vtex_my-authentication_passValidation_lowerUpper
vtex_my-authentication_passValidation_lower
vtex_my-authentication_passValidation_upper
vtex_my-authentication_passValidation_iconSuccess
vtex_my-authentication_passValidation_iconFailure
vtex_my-authentication_savePassButton_container
vtex_my-authentication_skeletonEditPassword_content
vtex_my-authentication_skeletonEditPassword_button
vtex_my-authentication_currPassInput_container
vtex_my-authentication_createPassword_text
vtex_my-authentication_codeInput_container
vtex_my-authentication_resendCodeButton_container
vtex_my-authentication_maskedPassword_title
vtex_my-authentication_maskedPassword_content
vtex_my-authentication_loginSessionsBox_title
vtex_my-authentication_loginSessionsBox_content
vtex_my-authentication_skeletonLoginSessions_content
vtex_my-authentication_skeletonLoginSessions_button
vtex_my-authentication_loginSessionsScreen_container
vtex_my-authentication_loginSessions_skeleton
vtex_my-authentication_loginSessions_error
vtex_my-authentication_loginSessions_list
vtex_my-authentication_loginSessions_box
vtex_my-authentication_skeletonLoginSessionsScreen_title
vtex_my-authentication_skeletonLoginSessionsScreen_text1
vtex_my-authentication_skeletonLoginSessionsScreen_text2
vtex_my-authentication_loginSession_currSession
vtex_my-authentication_loginSession_currSessionIcon
vtex_my-authentication_loginSession_currSessionText
vtex_my-authentication_loginSession_device
vtex_my-authentication_loginSession_lastAccess
vtex_my-authentication_loginSession_originDetails
vtex_my-authentication_loginSession_fullAddress
vtex_my-authentication_loginSession_firstAccess

Then go to the Admin of your store and do the following steps:

  1. Open the Admin and go to the Storefront section.
  2. Click Layout.
  3. In the Frontend CMS left panel, navigate to CMS > Files Manager > .css.
  4. In the Files Manager tab, click on the Add button.
    {"base64":"  ","img":{"width":1417,"height":786,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":120323,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-2.png"}}
  5. In the Files Maintenance tab, click on the Localizar button.
  6. A window with a file explorer will open. Choose the CSS file you created.
  7. Click on the Salvar arquivo button. This will upload your CSS file to the CMS of the store.
    {"base64":"  ","img":{"width":715,"height":278,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":24341,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-3.png"}}
  8. In the Frontend CMS left panel, navigate to CMS > HTML Templates > Account.
    {"base64":"  ","img":{"width":303,"height":143,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":7053,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-4.png"}}
  9. In the right panel will appear the My Account HTML template. Inside the <head> section, insert the tag <link href="https://{accountName}.vteximg.com.br/arquivos/{cssFile}" rel="stylesheet"></link>, replacing {accountName} for the account name of your store and {cssFile} for the name of the CSS file you uploaded.
    {"base64":"  ","img":{"width":952,"height":145,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17791,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-5.png"}}
  10. A popup window will show up. In the last field type yes.
  11. Click on the Update Item button.
    {"base64":"  ","img":{"width":508,"height":463,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":24021,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-6.png"}}
  12. A new popup window will appear. If there are no errors, the HTML template will be saved. Then click on Ok.
    {"base64":"  ","img":{"width":633,"height":184,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":10916,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/ui-customization-my-authentication-7.png"}}
    After updating the HTML template, you should see the changes in the Authentication tab of your store.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page