How can I customize the Impulse theme for a coming soon password page?

oliveandhicks
Visitor
3 0 0

Hi there, 

 

I'm hoping someone can help me if possible!

 

I've just bought the Impulse theme and i'm looking to create a coming soon password page. 

 

For Desktop I would like to centre the logo 

 

On Mobile I would to remove the header text and replace it with the logo. Is this possible?

 

Any help would be much appreciated!

 

www.oliveandhicks.com 

Replies 4 (4)

PageFly-Amelia
Navigator
317 96 138

Hello @oliveandhicks 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

What you're requesting is achievable. First, I need you to display both the text and logo on the Password page. Then, I can assist you in hiding the logo or text on specific devices.

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

oliveandhicks
Visitor
3 0 0

Hi Amelia, 

 

Thanks for getting back to me! 

 

As far as I can see the title and logo are present on both desktop and mobile?

 

Thanks!

diego_ezfy
Shopify Partner
2967 571 899

@oliveandhicks@oliveandhicks, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > normalize.css and paste this at the bottom of the file:

@media (min-width: 750px){
     .password-page__header__grid {
             justify-content: flex-end;
     }
    .password-page__header__grid > *:nth-child(1){
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 749px){
[id*='password']~ * .hero__text-content *{
    font-size: 0 !important;
}

[id*='password']~ * .hero__text-content{
    position: relative;
}
[id*='password']~ * .hero__text-content:after{
    content: url("//www.oliveandhicks.com/cdn/shop/files/White_transparent.png?v=1712943175&width=357");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
}

 

diego_ezfy_0-1713153201120.png



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

oliveandhicks
Visitor
3 0 0

Diego, thanks for your help!

 

I can't find the normalize.css in edit code? I tried looking and searching?

 

Cheers