Password page more advanced customization

Before you launch your store, you can display a password page to prevent anyone from seeing your unfinished site. If you'd like to customize the page, here's how you can access the password page settings in the Theme Editor.

You'll first need to setup a password, that's required for the Theme Editor to display the settings.

1

Setup a password for the store

Add a password in your Online Store Preferences:

https://shopify.com/admin/online_store/preferences

Find the Password page section and enable with the password page checkbox. Add a password that you can give out to anyone that might need to preview your site:

2

Use the Theme Editor to customize

Open your theme editor:

https://shopify.com/admin/themes/current/editor

You will now have an option in the top left drop-down menu for the Password page:

Choose that and the left section options will change:

Click on the left sidebar section option for Password page. The customization options will then appear:

You can add your company logo and a branded background image here.

Code options to hide the pop-up box and login with password link

The following code snippets can be added to your theme. Where to add the code is based on your version of Pipeline. I've included that information lower down after the code snippets. 

Remember:
Modifying the theme code will make it difficult to update your theme. Use this code at your own risk. Groupthought does not provide any warranty or further support for this code. The code provided is only a suggestion. Please work with a developer or  Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.

To remove:

(1) Password page message box

(2) Password page footer

Option 1: Hide Password page message box

/* -- code to hide password page message  -- */
.password__main {display:none;}
/* - end - */

Option 2: Hide Password page footer

/* -- code to hide password page footer  -- */
.password__footer {display:none;}
/* - end - */

Option 3: Hide both Password page message box and footer

/* -- code to hide password page message and footer -- */
.password__main, .password__footer {display:none;}
/* - end - */

To reduce padding above the logo:

You can use this code:

h2.password__hero {padding-top:0px; }

To change the font size for your main message:

Sample code to use:

.template-password p { font-size: 24px; }

Example result:

Add transparency

Example:

Use this code:

.password__login-form,.password__signup-form {background-color: rgba(255, 255, 255, 0);}
.password__box {
    background-color: rgba(255, 255, 255, 0.55);    
}

To change the button

Example:

Sample code to use:

/* -- code to change password button -- */
.template-password .btn {    
    border-radius:15px !important;
    background-color: #F44336;
    color: #fff
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Further customizations

The main file that's used for this page is located here:

You can additional images or text here if you like.