Salesforce Docs Portal

Create a Home Layout

Learn how to design a visually engaging Point of Sale app home page with a GIF, text overlay, padded image, and carousel. Enhance user experience by integrating dynamic elements and clean layout techniques.

Before going through this article, it is recommended that you read the related articles.

This article walks you through creating a home as shown in this image.A Point of Sale home screen with an image with overlay text and a toolbar.

Step 1: Create a Blank Layout

  1. Click LAYOUT PAGES from the CMS homepage or go to Layout Pages | All Layouts.
  2. Click Add Blank Template.
  3. Enter a name for the layout in the toolbar.A screenshot shows the toolbar option for adding a layout name.

Step 2: Override the App Config Settings

  1. Select the ADVANCED tab in the toolbar.
  2. Expand UX.
  3. Enable Override App Config Settings. This ensures that there is no margin around the cells regardless of what the app config settings are.A screenshot shows the advanced toolbar option to override app config settings.

Step 3: Upload the Images

  1. Download these images: Carousel-1, Carousel-2, Carousel-3, Home-1, Home-2, Home-3, and Home-4. Alternatively, you can use your images.
  2. Select the blank cell.
  3. Expand More Media in the toolbar.
  4. Click the Create New Folder icon in the top left of the Media Library.
  5. Enter a name and press the Save icon.
  6. Drag the images into the Media Library window.A screenshot shows files dragged into the media library.A screenshot shows images added to the media library.

Step 4: Insert and Resize Multiple Images

  1. Select home-1.gif, home-2.png, home-3.png, and home-4.png (in that order).
  2. Click SELECT ASSET.A screenshot shows an image added to the layout editor.
    Tip
    Tip The images are inserted into the layout in the same order in which they were selected.

Step 5: Add Text Overlay

  1. Select the first cell that contains the GIF.
  2. Expand Cell Overlays in the toolbar.
  3. Click Text.

Step 6: Edit Text Overlay HTML

  1. Double-click the blue text overlay to edit it.
  2. Click the <> (Source code) icon.A screenshot highlights the source code menu option.
  3. Paste the HTML snippet below: 
    <p style="text-align: center;"><span style="font-size: 120px; font-family: Avenir-Heavy; color: #ffffff;">Tailored</span></p> <p style="text-align: center;"><span style="font-size: 120px; font-family: Avenir-Heavy; color: #ffffff;">Essentials</span></p>
  4. Click OK to set the source code.
  5. Click OK to apply the changes.
    Your layout should now look like this:A layout shows the text tailored cropped.

Step 7: Move and Resize the Text Overlay

  1. Go to the ADVANCED tab of the toolbar.
  2. Click Guides and enable Grid.
  3. Drag and drop the text overlay to move it.
  4. Drag the blue square at the bottom right corner to resize it.
    A Point of Sale home screen layout shows the blue square used to resize a text overlay.

Step 8: Insert Spacer and Set Row Height

  1. Select the cell with the GIF.
  2. Click Insert Below from the toolbar.
  3. Select the blank row that was inserted.
  4. Expand Cell Operations.
  5. In the Set Row Height input enter 20.A screenshot shows the field for entering a row's height.

Step 9: Insert and Resize Spacers

  1. Select the cell that has the "EXPLORE THIS COLLECTION" image.
  2. Click Insert Below from the toolbar.
  3. Drag the bottom of the spacer row up until it is 80 pixels.
    A screenshot shows the layout editor handle used to resize a spacer.
  4. Hover over the spacer row and click the Copy icon in the bottom left.
  5. Select the cell with the shop trousers image and click Insert Below from the toolbar.
  6. Select the row that was created and press cmd + v.

Step 10: Add Padding to Image

  1. Select the cell with the shop trousers image.
  2. Expand Cell Operations in the toolbar.
  3. Click Split in Thirds.
  4. Under Padding on Sides click Split.
  5. Click Split to apply the default of 10% padding.A screenshot shows an image with padding.

Step 11: Add a Carousel

  1. Select the cell with the "ORANGE IS TRULE THE NEW BLACK" image.
  2. Click Insert Above from the toolbar.
  3. Expand Carousel in the toolbar and enable Add Carousel.
  4. Double-click the blank slide.
  5. Select the first carousel image and click SELECT ASSET.
  6. Select the first slide and click Cell Operations | Resize to Fit Media.
  7. Click the second dot to show the second slide.
  8. Double-click the second slide.
  9. Select the second carousel image and click SELECT ASSET.
  10. Hover over the carousel and click the + icon in the bottom right to add a third slide.
  11. Double-click the third slide
  12. Select the third carousel image and click SELECT ASSET.
    Tip
    Tip To change the indicator from dots to lines, use the app config setting, go to Apps | All | your app config | EDIT | UI | Layouts. Then enable Carousel Indicator and click SAVE.

Step 12: Deep Link and Publish the Layout

  1. Creating deep links for some or all of the cells. Refer back to Cell Configuration in Layouts for instructions on how to do so.
  2. Click PUBLISH NOW.