# Password page

Before you launch your store, you can use Shopify's password page feature to restrict access to your store. When the password page is active, all store pages are hidden and will not appear in search engine results.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FlH3yJfqCiXPP9rMPLnl5%2Fpassword-page.jpg?alt=media&#x26;token=1ec18301-2fee-4116-9220-1ad4ec29540f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
See Shopify's guide on [Password protection for your online store](https://help.shopify.com/en/manual/online-store/themes/password-page).
{% endhint %}

## Customize page styles

***

Click the page section to edit the **general styles**, available for all page templates:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td><a href="../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></td></tr></tbody></table>

## Set up password header

***

The **Password page header** displays your store title and a login link to allow users to access the site with a password.

* Change the **color scheme** of the password header
* Change the header **layout**
* Add a **logo image**
* Enable the **transparent header**

`Click Password header section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a set of colors to apply to the password header. You can add and define different color schemes in Theme settings > Colors. <a href="../../sections/overview/section-styles#section-colors">Learn more</a></td><td></td></tr><tr><td><mark style="color:blue;">Layout</mark></td><td>Position the logo to the left or center of the page header.</td><td><strong>Logo center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Logo left</strong></td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.</td><td><mark style="background-color:yellow;">Default: Brand logo</mark></td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the maximum width (in pixels) of the image on desktop.</td><td><strong>20-350 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 120</mark></td></tr><tr><td><mark style="color:blue;">Mobile image width</mark></td><td>Set the maximum width (in pixels) of the image on mobile.</td><td><strong>20-250 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 90</mark></td></tr><tr><td><mark style="color:blue;">Transparent header</mark></td><td>Make the header transparent.</td><td></td></tr></tbody></table>

## Set up background image

***

`Click Password page section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background image</mark></td><td>Select or upload an image for the password page background.</td><td></td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image for mobile devices.</td><td></td></tr><tr><td><mark style="color:blue;">Desktop height</mark></td><td>For desktop, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>250 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 100%</mark></td></tr><tr><td><mark style="color:blue;">Custom mobile height</mark></td><td>For mobile, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>150 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 100%</mark></td></tr></tbody></table>

### Add image overlay

***

The image **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

* Choose a **Color scheme** for the overlay and overlay text
* Change the **Opacity** to make the overlay more or less transparent

`Click Password page section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td><p>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.</p><p>Set to 100% to display a solid color (instead of the image).</p></td><td><p><strong>0 - 100%</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20%</mark></p></td></tr></tbody></table>

## Add content blocks

***

Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F2bJuQwRSZ37zWPCfgEVZ%2Fcontent-blocks-add.png?alt=media&#x26;token=b226c9a1-d607-4439-8f9a-325707fb411f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" alt=""><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td><a href="../../sections/overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><strong>Text</strong></td><td><a href="../../sections/overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><strong>Overline text</strong></td><td><a href="../../sections/overview/content-blocks#overline-block">#overline-block</a></td></tr><tr><td><strong>Image</strong></td><td><a href="../../sections/overview/content-blocks#image-block">#image-block</a></td></tr><tr><td><strong>Spacer</strong></td><td><a href="../../sections/overview/content-blocks#spacer-block">#spacer-block</a></td></tr><tr><td><strong>Divider</strong></td><td><a href="../../sections/overview/content-blocks#divider-block">#divider-block</a></td></tr></tbody></table>

## Show share buttons

***

Click **(+) Add block** and select **Share** to show icons for sharing your page to social media.

The **Native OS sharing** option replaces the social sharing icons with button that allows users to share to apps on their device (e.g. Messages).

`Click Share block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable native OS sharing</mark></td><td>Allow sharing using the device's native sharing options</td><td></td></tr></tbody></table>
