Loading
Quote Creation Issue - Non-USD CurrenciesRead More
Important Advisory: iOS Update Impacting CG Mobile ApplicationRead More
Point of Sale
Create a Category Layout

You are here:

  1. Salesforce Help
  2. Docs
  3. Point of Sale

Create a Category Layout

Learn how to design a visually engaging category page in Point of Sale that contains six images and product search deep links.

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

Once you've successfully created the following layouts, head over to Layouts - Home Layout Walkthrough, in which we will talk about creating a home page layout that has a GIF, a text overlay, an image with padding, and a carousel. The Point of Sale app category screen showing six category tiles and the 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 mame for the layout in the toolbar.

Step 2: Upload the Images

  1. Download and unzip the images attached to the end of the article. Alternatively, you can use your own images.
  2. Double-click the blank cell to launch the Media Library.
  3. Click the Create New Folder icon in the top left of the Media Library.
  4. Enter a name and press the Save icon.
  5. Drag the images from your desktop folder onto the Media Library window.

Step 3: Add the First Category Image

  1. Select one of the images.
  2. Click SELECT ASSET.
  3. Hover over the cell and click the Vertical Split icon in the top right of the cell.
  4. Select the image.
  5. Expand Cell Operations.
  6. Click Resize to fit media.Here is what your layout should look like so far:The layout editor showing one category tile.

Step 4: Add the Second Category Image

  1. Double-click the blank cell.
  2. Select another image and click SELECT ASSET. This time we won't need to resize the image.

Step 5: Set the Product Search Deeplinks

  1. Select the first image.
  2. Click Deep link in the toolbar.
  3. Select Product Search.
  4. (Optional) Enter a Search Query.
  5. Click SET.
  6. Repeat steps 1 - 5 with the second image.
    Tip
    Tip Notice the three dots next to Media and Deep link. This indicates that the selected cell has been configured with images and a deep link.The layout, editor showing two category tiles with the toolbox and three dots displayed against media and deep link options

Step 6: Copy the First Row

  1. Hover over the row and click the Copy icon.
  2. Click ADD BOTTOM ROW.
  3. Select the bottom row and press cmd + v.
    Now we have two identical rows that contain the same images and deep links.

Step 7: Change the Images and Deeplinks

  1. Double-click an image in the second row.
  2. Select a different category image.
  3. Click SELECT DEEP LINK.
  4. (Optional) Change the Search Query.
  5. Click SET DEEP LINK.
  6. Repeat steps 1 - 5 with the other image.

Step 8: Create the Third Row

Repeat steps 7 and 8 to create a third row.

Step 9: Publish the Layout

Click SAVE
 
Loading
Salesforce Help | Article