Shopify Password Page

[peakclo]

Store name: www.peakclo.com

I have 2 questions for the community regarding the password landing page design.

1. as you can see in my first image I have repositioned the enter using password button by editing the password.liquid file. I would like to centre this button using CSS and need some advice.

2. I would like to remove the highlihted section from the password pop up screen but cannot find the code in any of the password files. Maybe I’m looking in the wrong place?

Any help appreciated.

[rajweb]

Hey @peakclo ,

1. Centering the “Enter using password” button with CSS:

To center the button in your password modal, you can use the following CSS. Add this to your theme.css or any other relevant stylesheet:

.password-modal .modal__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.password-modal .modal__toggle-open {
  text-align: center;  /* Ensures the text within is centered */
}

This should center the “Enter using password” button within its container.

2. Removing the highlighted section from the password modal popup:

It seems you’re trying to remove the highlighted section in the modal, likely referring to the area around the password field or the button. However, the highlighted section is not defined explicitly in the code you provided.

If the highlighted section refers to the field or button border styles, you can try modifying or overriding the default CSS. Here’s an approach that may help you remove unwanted highlights or borders:

.password-modal__content,
.password-modal .password-field {
  border: none !important; /* Remove borders if highlighted sections are caused by borders */
  box-shadow: none !important; /* Remove any shadows */
}

.password-modal .password-field input:focus {
  outline: none !important; /* Remove the focus outline */
}

This CSS will remove any borders, box shadows, or outlines that may be causing the highlighted effect when interacting with the input fields.

If you’re still not sure what section is causing the highlight, could you clarify whether you’re referring to a specific visual effect, like a focus outline or background highlight?

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

But for the second question, I can’t find the highlihted section. Can you sign it?
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[peakclo]

Hi, the solution to question 1 worked, thank you. For question 2 I think you have misunderstood, I would like to remove the text in this section completed. I manually highlighted it to show which section I was talking about. How can I remove it completely

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[peakclo]

This worked great, could you also help me remove this line between the footer and body

[AnneLuo]

Add the code in the same location

Result: