> This page is for Help center.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fiftytwo-demo.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fiftytwo-demo.ferndocs.com/_mcp/server.

# ViKING POS Designer layouts

In [ViKING POS Designer](/help/pos-designer/wpud), a layout contains the [components](/help/pos-designer/component) that are required for a particular workflow. You may, for example, create a layout for logging in to a till, a layout for selling articles and accepting payment, etc. You'll typically end up with a number of layouts in your [diagram](/help/pos-designer/diagram), and the layouts can then refer to each other so that you can transparently offer even complex combinations of workflows in your diagram.

If required, you can design the same layout in different variants for use on mobile phones, tablets as well as 4:3 and 16:9 POS screens.

## Layout types

When you add a new layout, you can select between these layout types:

* **DrawerWithCarousel:** A special layout type for accommodating the carousel component (and any other components you may need). It's prepopulated with a carousel, some drawers, and some other components, but you can remove the components that you don't need and add new components as required.

  #### What's a drawer?

  A drawer is a space-saving component that's primarily meant for use on layouts for smaller devices, where it can display collapsible side-content on small section of your layout. The content is often menu navigation, but it can be any content.

  #### What's a carousel?

  A carousel is a space-saving component that's primarily meant for use on layouts for smaller devices, where it can display multiple other components, typically browsers, in a single side pane. Shop assistants can then swipe to move between the carousel's content.
* **DrawerWithStackPanel:** A special layout type for accommodating drawer components. It's prepopulated with a left drawer, a right drawer, and a bottom drawer as well as some buttons, but you can remove the components that you don't need and add new components as required.
* **StackPanel:** The most common type of layout. You can add any type of component to it, except carousel and drawer components. By default, this layout type has three columns, but you can change that when you add it.
* **GlobalPrompt:** A special layout type for creating notification dialogs that can be defined once and then used across all layouts.

## Modify existing layout

Because many people use a POS Designer [template](/help/pos-designer/diagram) as the basis for their design, they often modify the template diagram's layouts rather than adding and designing new layouts from scratch.

How to modify an existing layout of course depends on what you want to do with it, but most people begin by either editing one of the layout's components or by adding a new component.

To edit component in a layout:

1. In the dark bar in the left side of POS Designer, select the **Explorer** tab.
2. In the **Layout** field, make sure that you have selected the required layout.
3. The **Explorer** tab displays the structure of the layout, including its components and their elements. In this example, we've selected a menu component's *Outlet* element:

![Wpud explorer component edit](/_fern-files/_img/0a7c6847852ecccc7df1fe8378dcafa10386cb202160a1cb2d82d5b5fbeafe76.webp)

4. Select the required option, for example the edit

![Wpud edit pencil](/_fern-files/_img/e7a08e2138ed51d9ed3acbbec778d51278c2f3dfc22231e0178f3575e7bf52c6.webp)

option.

To add a new component to a layout:

1. In the dark bar in the left side of POS Designer, select the **Explorer** tab.
2. In the **Layout** field, make sure that you have selected the required layout.
3. In the dark bar in the right side of POS Designer, select the **Toolbox** tab.
4. Expand the required components section, for example **Basic** or **Action**, and drag the required component to the required position on the layout. Then edit the component as required, for example changing its color properties.

Learn more about components in [ViKING POS Designer components](/help/pos-designer/component).

## Add new layout

1. Select the **Explorer** tab in the dark bar in the left side of the POS Designer
2. In the **Layout** field, click the plus sign

![Wpud addplus 9x9](/_fern-files/_img/4279ec7c950e6cc001ce95efa7ca5b7d94579a9d35a989fcb80c60fb2e9c75eb.webp)

3. Select required display format (mobile, tablet, screen 4:3, etc.)
4. Select the required layout type
5. Specify a name for the new layout

> **Info**
>
> The name can't contain spaces.

6. Specify the required number of columns in your layout
7. Click **Create**
8. A detailed **Add layout** window opens. If required you can specify details about the new layout's size, padding, margins, borders, etc.
9. When ready, click **Add**

You can now add components to your new layout. Learn more about components in [ViKING POS Designer components](/help/pos-designer/component).

## Clone existing layout

If required, you can make a clone of the layout that you currently have open in your POS Designer.

1. Make sure that you have opened an existing layout
2. In the POS Designer top menu, click

![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

, and select **Clone layout**
3\. In the **Layout name** field, specify a name for the new clone of the layout

> **Info**
>
> The name can't contain spaces.

4. Edit other settings as required

> **Info**
>
> Note that some settings may conflict with the original layout if you edit them. For example, if the original layout is a three-column layout where all three columns contain components, the original layout will break if you reduce the number of columns on the copy. On the other hand, you can easily add a fourth column to the copy without breaking the functionality of the original three-column layout.

5. When ready, click **Clone**

## Download layout

If others have created a layout, they can upload it to a local file system.

You can then download the layout from the local file system:

1. In the POS Designer top menu, click

![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

, and select **Download layout**
2\. Navigate to the required layout (it's in the .json file format) and download it

## Specify layout size (4:3, 16:9, mobile, tablet)

When you design a layout, you can design it for mobile phones, tablets, or desktop screens with 4:3 or 16:9 aspect ratios.

> **Info**
>
> If you want to design a layout that matches multiple screen sizes, you must design a separate layout for each required screen size (example: returns_4_3, returns_16_9, returns_mobile, and returns_tablet). However, thanks to the copy feature, you don't need to recreate the layout from scratch for each required screen size.

In the menu above your layout, select either **Mobile**, **Tablet**, **Desktop)**, or **DesktopXL**.

Each format has a default size, for example 411×731 pixels for Mobile, that you can adjust to suit your organization's needs.

If you click the **Edit** button in the **Screens** menu, you can furthermore add new screen layouts to suit your organization's exact needs.

![Wpud screens menu](/_fern-files/_img/52d8ad5824595feecc81862bb0cedf3f851394f14be4f81e35633f38c8175743.webp)

## Add components to layout

As described in the topic [ViKING POS Designer](/help/pos-designer/wpud), a diagram contains layouts, and layouts contain components. Together, they make it possible for till users to complete all required workflows.

* For information about how to add components to a layout, see [ViKING POS Designer components](/help/pos-designer/component)

## Connect layouts to support workflows

Each layout typically supports a group of related workflows. Examples:

* A layout for logging in to the till
* A layout for selling articles and accepting payment
* A layout for handling customer club queries and registrations

When we say that the layouts can refer to each other so that you can transparently offer even complex combinations of workflows, it's not the layouts themselves that are linked. Rather, it's the [components](/help/pos-designer/component) on the layouts – primarily the action components, such as buttons and menus – that can have properties that let users transparently move between layouts.

For example, the layout for selling articles and accepting payment can have a Customer Club menu button, and if the user taps that button, an action defined for that button will make the till display automatically switch to the layout for handling customer club queries and registrations.

Likewise, if the user taps a Back to Sales menu button on the customer club layout, an action defined for that button will automatically switch to the layout for selling articles and accepting payment.

This way ...

* Users will not know that there may be multiple layouts in the design that you've created. Users will simply experience that their till display supports all the workflows that they need to do their tasks.
* Layouts themselves don't connect to each other. It's the properties of the layouts' components that make layouts seamlessly connect into a complete till display.

## Upload a layout

If you've created a layout, you can upload the layout to a local file system.

Others can then download the layout into their POS Designer from the local file system:

1. In the POS Designer top menu, click

![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

, and select **Upload layout**

POS Designer will store the layout in your local Downloads folder with a file name based on this structure: `[layout name].json`
2\. Place the .json file on a local file system, and notify the people who should be able to download the layout

## Send layout to another diagram

If you have multiple [diagrams](/help/pos-designer/diagram), you can send a layout from one diagram to another. This can be useful, for example, if you design user interfaces for two chains with identical workflows but different branding. In such a case, you can create a layout on one of the diagrams and then send the layout to the other diagram, where you can reuse the layout by changing its branding elements.

To send a layout to another diagram:

1. Make sure that you have opened the layout that you want to send.
2. In the POS Designer top menu, click

![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

, and select **Send layout**
3\. In the dialog that opens, select the required **Destination diagram**.
4\. If the destination diagram contains a layout with the same name as the one that you're going to send, you can choose to overwrite the existing layout on the destination diagram with the layout that you're going to send. If you are absolutely sure that you want to do that, select **Overwrite layout**.

> **Note**
>
> If you're unsure, don't select this option.

5. Click **Send**.

## Default layout

If you've created a series of layouts, you can mark one of them as your default layout, so that you can quickly jump to it, for example in order to clone it so that you can base other layouts on it.

To mark a layout as your default layout:

1. Make sure that you have opened an existing layout.
2. In the POS Designer top menu, click

![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

, and select **Mark as default**

To quickly jump to a layout that you've marked as your default layout:

* In the POS Designer top menu, click

  ![Wpud i18n resources lang menupripripri](/_fern-files/fiftytwo.docs.buildwithfern.com/1e29d9fb4ac6c421d780221729ecff37371c24a14e31353e2cf1dd8a132a9f0e/assets/img/help/Images-wpud-i18n-resources-lang-menupripripri.png)

  , and select **Default layout**.

> **Note**
>
> When you work with a layout, remember that you must save your changes. To save your changes, click the
>
> ![Wpud layout menu save](/_fern-files/_img/a628f9e66a1f6670a694cab7339f46c66b214d0765bb7bf14db48c380730c518.webp)
>
> button in the menu above your layout. Alternatively, you can use [autosave](/help/pos-designer/diagram#autosave).

Typical next step: [Add components to your layout](/help/pos-designer/component)