---
schema_version: "1"
id: 97dd18ee2cdca2dbe13534632dadc198be9027d98ce9dd0cf51963c2bfb4a1af
title: Set Up a Login Layout
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/rt_cms_layouts_templates_login.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_templates_login.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: aad7fcc8c25e21a3a926d076e5e67189bf151eb1abba3d56e34bc2731fab51f0
description: Learn how to create a Point of Sale login layout with input fields and link it to an app config, ensuring seamless user authentication and a smooth login experience. Set up the login deep link to direct users to the correct page, enhancing user convenience and security.
products:
  - Commerce
release: "264"
---
# Set Up a Login Layout

Learn how to create a Point of Sale login layout with input fields and link it to an app config, ensuring seamless user authentication and a smooth login experience. Set up the login deep link to direct users to the correct page, enhancing user convenience and security.

Login Layouts are built with the Layout Editor. The easiest way to get started is with a template:

## Create a Login Layout

1. In the CMS, go to **Layout Pages** | **All Layouts**.
2. Click **Add From Template** and select **Login**.
3. Select a font and click **SELECT**.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)
    
    Note In addition to the dropdown list of fonts you can enter the font name manually. Out-of-the-box iOS supports many fonts. Go to [iosfonts.com](https://iosfonts.com) for the entire list.

## Input Fields

The input fields are configured as form elements. To edit the login input fields:

1. Double-click the input field to launch the form element editor.
2. Make edits.
3. Click **SET FIELD**.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)
    
    Note The JSON key values in the sign-up template are configured for Point of Sale demos. For a production application, the JSON key values for each input should be configured to match the values that the relevant backend systems expect. The possible values include: credentials.userId credentials.password

## Login Button

The login button is configured as a form element with a "Login" button action. To edit the login button:

1. Double-click the button to launch the form element editor.
2. Enter the text to display on the button and select **Login** as the button action.
3. Click **SET FIELD**.

## Linking a Login Layout with an App Config

A Login Layout must be assigned to the app config before the login deep link will work.

1. Click **EDIT CONFIG**.
2. Go to **ADVANCED** | **SIGNUP / FORM LAYOUTS**.
3. Select the Login Layout from the dropdown.

## Editing a Login Layout

A Login Layout is assigned to the app config, so start by editing the app config:

1. Click **EDIT CONFIG**.
2. Go to **ADVANCED** | **SIGNUP / FORM LAYOUTS**.
3. Click the **Edit** icon next to the Login Layout.

## Login Deep Link

The login screen can be launched from a tab, hamburger menu, or layout. In the deep link picker select **Deeplink Type** | **Account** | **Sign In**.