Password Page: Sections and Blocks

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
  2. Template group
  3. Password footer

1. Password header

The header of this page contains only the password header section.

The settings for the Password header section

Edit your logo in theme settings.
Section settings Settings Description
Transparent header

Add a section on first position which allows transparent header such as slideshow or image with text overlay.
Text color The text color.
Button text The button text color.
Button background The button background color.
Background gradient The background gradient color.
Popup

These settings control the popup window.
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.

The settings for the Email signup banner section
Section settings Settings Description
Email signup banner

Subscribers added automatically to your "accepted marketing" customer list. Learn more.
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:
  • Adapt to image - Keeps the image's original aspect ratio.
  • 400px - 400px.
  • 450px - 450px.
  • 500px - 500px.
  • 550px - 550px.
  • 600px - 600px.
  • 650px - 650px.
  • 700px - 700px.
  • 750px - 750px
  • Full screen
    •  - Extends the image to adapt the height of the window browser.
Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
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:
  • Auto - The browser will decide based on the desktop value.
  • 200px - 200px.
  • 250px - 250px.
  • 300px - 300px.
  • 400px - 400px.
  • 500px - 500px.
  • 600px - 600px.
  • Full screen
    •  - Extends the image to be the height of the browser window.
Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
Color

Gradient replaces solid colors when set.

 You can optionally customize the colors of the section, including the following:
  • Text
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
  • Overlay
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

To add an animated highlight to text, simply wrap it with in italics. Click the "I" button in the editor to toggle italics when highlighting text.

Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
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:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.
    •

    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

To add an animated highlight to text, simply wrap it with in italics. Click the "I" button in the editor to toggle italics when highlighting text.

Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
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:
  • Full width: Image fills the entire browser window.
  • Custom:
    • On desktop - Sets the image width between 20px and 1000px in 10px increments.
    • On mobile - Sets the image width between 20px and 600px in 10px increments.
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.

The footer of this page contains only the password footer section.

The settings for 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.

Back to Concept Support