How can I add an email sign-up overlay on my password page?

[Colee424]

Hi -

For my password page, I'd like to have a simple email signup form overlay the hero video that I have looping in the background. I've attached an image of what I'd like to achieve, visually.

I am using the "Streamline" theme for reference. 
Link to store: https://71733f.myshopify.com/password

Is there custom code that can be used to achieve this? And if so, can that be provided please?

Thanks in advance

[PaulNewton]

Hi @Colee424 That can be achieved with custom code but it's work as the templates already seems like it's been heavily modified so anyone doing this may have a lot of running around.

Generally you need to send that video background to the lowest z-index and using absolute positioning make sure the other elements have a higher z-index.

If DIY'ing you want to first work on every BUT the background-video and get their layout and positioning done.

If you need this customization work done for you then contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact info in signature.

[sahilsharma9515]

Hi @Colee424 You can achieve this, but you have to follow these steps to accomplish the same.

First you need to add the email section in password page so that it will be available there.

If you are not sure how to add it then please follow the steps.

• Login in shopify admin.
• Click on the Online Store.
• Then click on the button next to Customize in your theme.
• In header you will see Homepage click on that and click others.

• You will see Password Page Click on that.

• Then in left hand side you will see Add section from there you need to add the Email signup section

• Once you add this now edit the text and save the page.

Now you need to add some custom code.

Please note: You need to change some code according to your theme so that it will work correctly I am providing you the base code so that you can achieve this.

.index-section.newsletter-container.newsletter-template--21574063194420__newsletter.color-scheme- (This will be different at your theme so you need to change this) {
    position: absolute;
    z-index: 20;
    top: 200px; (please adjust it according to your need)
    left: 275px; (please adjust it according to your need)
}

.newsletter-section.newsletter-section--image-right.newsletter-section--no-image {
    background-color: transparent !important;
}

You need to add this code in you base.css file or in password file in theme.

If you are not sure where is your base.css file or Password file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in Streamline Theme.
4. Click Edit Code.
5. Search Base.css in the code in left hand side.
6. Add the code given above.

Result(at my end in the trail theme):

If you need any assistance then please feel free to ask the same.

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

Best Regards

Sahil

[Colee424]

@sahilsharma9515 thanks for the detailed steps.
I tried the above an it's unfortunately not working. I did search for the base.css file but the streamline template doesn't have one. Alternately, when I attempt to paste the code in the password.liquid file, nothing changes at all. Do you know what may be the issue or have another workaround?

[sahilsharma9515]

Hi @Colee424 You can try adding the code in Theme.liquid file.

If you are not sure where is your theme.liquid file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in Streamline Theme.
4. Click Edit Code.
5. Search Theme.liquid in the code in left hand side.
6. Add the code given above.

<style>
.index-section.newsletter-container.newsletter-template--21574063194420__newsletter.color-scheme- (This will be different at your theme so you need to change this) {
    position: absolute;
    z-index: 20;
    top: 200px; (please adjust it according to your need)
    left: 275px; (please adjust it according to your need)
}

.newsletter-section.newsletter-section--image-right.newsletter-section--no-image {
    background-color: transparent !important;
}
</style>

Please note: You need to change some code according to your theme so that it will work correctly I am providing you the base code so that you can achieve this.

If you still unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

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

Best Regards

Sahil

[Colee424]

@sahilsharma9515 thank you - would love your direct help in implementing this as I'm still having some issues. Would you be able to DM me directly to work through this?

Thanks in advance!

[sahilsharma9515]

Hi @Colee424 Can you please provide me your email id or you can directly message me on Private message or can mail me so that we can work on this.

Best Regards

Sahil