How can I add a newsletter form to my password page?

Store Design
, , ,
1

I am working on a password page in a third party theme and I wrote the codes myself. I cannot see this page directly in the theme personalization screen, so I cannot add my theme parts to the page. this page can only be edited through code editing. i want to see this page in the theme personalization screen and add a newsletter form to the page.

website link: moonlever.co

templates/password.liquid:

{% layout none %}

Please Log In * { margin: 0; padding: 0; box-sizing: border-box; }

body {
margin: 0;
background-color: #000;
font-family: “Helvetica Neue”, Arial, sans-serif;
color: #fff;
overflow: hidden;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.card {
background-color: #000;
color: #000;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 90%;
width: 550px;
text-align: center;
animation: slideIn 0.5s ease-in-out;
}

h1 {
font-size: 24px;
margin-bottom: 18px;
color: #333;
}

p {
margin-bottom: 20px;
font-size: 16px;
color: #555;
}

label {
display: block;
margin-bottom: 5px;
color: #777;
font-size: 14px;
text-align: left;
}

input[type=“password”] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
font-size: 14px;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
color: #fff;
font-size: 16px;
text-align: center;
text-decoration: none;
border-radius: 50%;
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
width: 40px;
height: 40px;
}

.btn:hover {
background-color: #7d7d7d;
}

.footer {
margin-top: 15px;
font-size: 13px;
color: #666;
}

.footer a {
color: #9c9c9c;
text-decoration: none;
}

.social-icons {
margin-top: 20px;
}

.social-icons a {
display: inline-block;
margin-right: 10px;
}

.error-message {
color: #ff0000;
margin-top: 5px;
font-size: 14px;
text-align: left;
}

/* Additional Styles */
.logo {
margin-bottom: 20px;
}

.store-link {
margin-top: 20px;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
.card {
width: 90%;
}
}

@media only screen and (max-width: 480px) {
.card {
width: 90%;
padding: 20px;
max-width: 90%;
}
}

@media only screen and (max-width: 480px) {
body {
font-size: 14px;
}
}

@keyframes slideIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

{% if shop.password_message and shop.password_message != '' %} {{ shop.password_message }} {% else %}

{% endif %} {% form 'storefront_password' %}
{% if form.errors %}
{% for error in form.errors %} {{ error.message }} {% endfor %}
{% endif %} {% endform %}
Mağaza sahibi misiniz? Giriş Yap