Layouts in Point of Sale offer flexible and modular design options, enabling seamless customization for a variety of user needs. By leveraging Layouts, customers can easily adapt and enhance their digital experiences, ensuring a tailored and efficient solution.
What Are Layouts?
Let's start with a definition of what a Layout is:
A Layout tells the app how to display a particular screen
Depending on how many screens an app has, the app may require 20 or 30 different Layouts to build the entire user experience.
Different Types of Layouts
There are many different types of Layouts that target different screens in the app. Here are some of the most important use cases for Layouts:
- Tabs - Each app typically has 4 - 5 different tabs. Each tab usually corresponds with a Layout that defines what the user sees and what happens when the user interacts with the different elements on the screen.
- PDP - The PDP, or Product Display Page, is controlled by either a PDP V1 Layout or a PDP V2 Layout.
- Search Screen (aka PLP) - The Search Screen, or PLP, is controlled by the Search (PLP) Layout.
- Hamburger Menu - If your app has a hamburger menu, then the links in the hamburger menu are defined in a Hamburger Menu Layout.
- Sign Up / Sign In Screens - These screens are controlled by Layouts that define what the different input fields are and what the button says and looks like.
You can see all of the different types of Layouts by expanding the Layout Pages section of the left hand navigation in the CMS.
Layouts at a Glance
It is easy to get overwhelmed by the number of capabilities in the CMS. Try not to. If you have a solid understanding of a few key ideas, then you will have more success when you try to make changes to Layouts in the CMS. Make sure that you understand the following points:
- Layouts are tied to an App Config - Layouts are in some way tied back to an App Config (see Segment App Configs). A Layout can be assigned to one of the tabs in the App Config or it can be assigned somewhere else in the App Config (e.g., PDP, PLP, Hamburger Menu, Sign Up / Sign In screens, and many others).
- Layout Editor Layouts vs Other Layouts - All Layouts fall into one of two camps: (1) Layouts that are created in the Layout Editor and (2) other Layouts. Layouts that are created with the Layout Editor consist of rows and cells that specify exactly what you should see and where.
- Always Verify Behavior in App - Each time you save a Layout in the CMS you will need to force close the app, reload the app, and navigate to the relevant screen to see changes. Always check the behavior in the app to verify that what you changed in the CMS did what you think it did.