Login form

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on section backgrounds settings
3. Company XYZ documentation on section padding settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to control the main sign-in area customers use to access their account. It helps you refine the page’s messaging and presentation while keeping the login experience clear and easy to use.

Core settings

The core settings let you customize the heading, subheading, and optional icon shown with the login form. For a broader setup overview, see Shopify documentation on sections and blocks. This is the best place to add a short welcome message, clarify that the page is for returning customers, or match the tone of the rest of your store.

If you leave the heading or subheading blank, the section can use the default theme content instead. That is useful when you want a clean setup quickly, but custom copy usually creates a more polished account experience.

Tip

Keep login-page copy brief and practical. Customers usually come here to sign in, not to browse or read promotional messaging.

Color settings

These settings override your general theme colors for this section only. Use them when the login area needs stronger contrast, a softer tone, or better alignment with a custom background.

You can adjust the icon, main text, and subheading separately to create a clear visual hierarchy. If you add a background image, gradient, or video, review the section on both desktop and mobile to make sure the text stays easy to read. Explicit color choices, gradients, and media overrides make this area feel more independent, while blank or transparent values usually preserve the theme’s fallback styling.

Decorative backgrounds should never reduce readability. If the login area feels harder to scan, simplify the background or increase overlay strength and text contrast.

Standard section settings

Section background settings

Use Section background settings to add a color, gradient, image, or video behind the login section. In this section, backgrounds work best when they support your brand without distracting from the form.

Overlay color and opacity help preserve readability over images and video. Mobile-specific background media is especially useful when desktop artwork crops awkwardly or feels too heavy on smaller screens, so check both viewports if you use different media for each.

Padding settings

Use Padding settings to control the space above and below the login content. This is useful when the page feels too cramped or when you want the sign-in area to sit more comfortably within the overall page layout.

Desktop and mobile spacing can be adjusted separately, so you can keep the section balanced across screen sizes. Tighter mobile padding often helps bring the form into view faster without making the page feel crowded.

Separator settings

Use Separator settings to add a line at the top or bottom of the section. In a login page, separators are mainly helpful when you want a clearer boundary between this section and surrounding content.

A subtle divider is usually enough here. If you leave the separator color transparent, the section falls back to the general border-color behavior.

Width settings

Use Width settings to control the content width and the overall section span. For most login pages, a narrower content width keeps the form focused and easier to scan.

Section width matters most when you are also using a background treatment. If you test full-width or full-bleed layouts, preview them on the live storefront too, since editor framing can make width changes appear differently than they do on the actual page.

Usage notes

1. Keep messaging short. Use a direct heading and concise supporting text so customers can sign in quickly.
2. Protect contrast. When using images, gradients, or video, adjust overlays and text colors until the section remains easy to read at a glance.
3. Check both viewports. Desktop and mobile controls can change layout, alignment, visibility, and cropping, so review the login form on both screen sizes before publishing.
4. Favor focused widths. A narrower content area usually suits login pages better than wide layouts because it keeps attention on the form.
5. Tune mobile spacing. Reduce mobile padding if the form sits too low on smaller screens.
6. Use clear states. Keep success and error messages easy to read so customers can recover quickly when the form is empty, submitted, or shows validation feedback.