The password page displays when password protection is enabled on your online store and a customer tries to visit your website. This page has three main section groups. Password Header, Template, and Password Footer. Each of them contains multiple sections. A section can be added in with blocks.
This article provides an overview of all sections and blocks in default Password page.
On this page
1. Password header
The header of this page contains only the password header section.
Section settings | Settings | Description |
---|---|---|
Transparent header
|
||
Text color | The text color. | |
Button text | The button text color. | |
Button background | The button background color. | |
Background gradient | The background gradient color. | |
Popup
|
||
Text | The text color. | |
Background | The background color. | |
Button text | The button text color. | |
Button background | The button background color. | |
Button background gradient | The button background gradient. | |
Overlay | The overlay color. | |
Section | ||
Top padding | Determines the height of the Top inner space of the section. Can be from 0px to 120px, increasing arithmetically of 4px. | |
Bottom padding | Determines the height of the Bottom inner space of the section. Can be from 0px to 120px, increasing arithmetically of 4px. | |
Custom CSS | Adds custom CSS to this section. |
No blocks can be added to this section.
2. Template group
The template of this page contains only the Email signup banner section in default.
You can add up to 30 more sections in the Add section list.
Section settings | Settings | Description |
---|---|---|
Email signup banner
|
||
Allow transparent header | Enables to allow transparent header. This setting only applies when this section is the first one. |
|
Allow transparent footer | Enables to allow transparent header. This setting only applies when this section is the last one. |
|
Image | Chooses/Uploads a background image for the section. | |
Desktop height | Determines the height of the image when viewed on desktop:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
Mobile layout | ||
Mobile image | Chooses/Uploads a background image for the section on mobile. | |
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color
|
You can optionally customize the colors of the section, including the following:
|
|
Section | ||
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
Show section divider | Shows a line divider above this section.. | |
Make section full width | Makes the container full width. | |
Make section rounded | Applies a rounded edge to the top two corners. | |
Enable parallax effect | Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene. | |
Custom CSS | Adds custom CSS to this section. |
Available blocks:
- 1.1 Heading
- 1.2 Text
- 1.3 Button
- 1.4 Link
- 1.5 Image
- 1.6 Form
- 1.7 Social media icons
- 1.8 Empty space
- 1.9 Custom liquid
1.1 The settings for the Heading block.
Block settings | Settings | Description |
---|---|---|
Heading | ||
Heading | The block title. | |
Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
Highlighted text
|
||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
1.2 The settings for the Text block.
Block settings | Settings | Description |
---|---|---|
Text | ||
Text | Adding your text. | |
Text size | The text size can be set to one of the following option:
Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2px. |
|
Text font | Choose between 2 options for the text formatting: Body or Heading. | |
Use secondary color | Enable seconday color. | |
Highlighted text
|
||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
1.3 The settings for the Button block.
Block settings | Settings | Description |
---|---|---|
Button | ||
Button label | The text that displays on the button. | |
Button link | The URL of the button. | |
Button size | Adjust size of the button in 3 options: Small, Medium or Large | |
Use outline button style | Uses the outline style for the button. |
1.4 The settings for the Link block.
Block settings | Settings | Description |
---|---|---|
Link | ||
Text | The text of the link, which is placed right beside the button. | |
Link | Add the URL you want to link. |
1.5 The settings for the Image block.
Block settings | Settings | Description | Image |
---|---|---|
Image | Selects an image for block. | |
Image width | Chooses one of two image width options:
|
1.6 The settings for the Form block.
No customizable settings available.
1.7 The settings for the Social media icons block.
To display your social media accounts, link them in your theme settings.
1.8 The settings for the Empty space block.
Block settings | Settings | Description |
---|---|---|
Empty space | ||
Desktop height | Determines the height of the empty space when viewed on desktop. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 40px. | |
Mobile height | Determines the height of the empty space when viewed on mobile. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 28px. |
1.9 The settings for the Custom liquid block.
You can add your own Liquid code to create a custom block.
3. Password footer
The footer of this page contains only the password footer section.
Section settings | Settings | Description |
---|---|---|
Transparent footer
Add a section on last position which allows transparent footer such as slideshow or image with text overlay. |
Text color | The text color. |
Section | ||
Top padding | Determines the height of the Top inner space of the section. Can be from 0px to 120px, increasing arithmetically of 4px. | |
Bottom padding | Determines the height of the Bottom inner space of the section. Can be from 0px to 120px, increasing arithmetically of 4px. | |
Custom CSS | Adds custom CSS to this section. |
No blocks can be added to this section.
We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.