--- schema_version: "1" id: 28cc7ab120fbec719214ccb83d04d45cfa5acb86a8f900a3af0a8f48472ea0e4 title: Create a Category 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_manage_category.md canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_manage_category.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: a950b88c6c2e35adefaed89f59f1bf7fc661921460600513e035f5a7d7e9f833 description: Learn how to design a visually engaging category page in Point of Sale that contains six images and product search deep links. products: - Commerce release: "264" --- # 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. - For information on defining the content and behavior of cells, refer to [Cell Configuration in Layouts](https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_manage_cell_config.htm&release=264.0.0&type=5 "Learn about the different ways that cells can be configured in Point of Sale layouts with content and interactive behavior."). - For information on how to create and edit rows and cells within a layout, refer to [Layout Editor](https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_manage_editor.htm&release=264.0.0&type=5 "Easily manage and customize your layout in Point of Sale with powerful editing tools. Add, insert, resize, and delete rows and cells, and adjust cell padding for precise control. Enhance user experience with features like Paginate for full-screen views, override app config settings for tailored UI options, and Snap to Grid for accurate overlay alignment."). - For information on creating and publishing layouts, refer to [Create and Publish Layouts](https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_manage_process.htm&release=264.0.0&type=5 "Learn how to create and publish layouts using the Point of Sale Layout Editor, including starting from a blank layout or a template, and managing live versions, drafts, and scheduling. Discover how to edit, save, publish, and restore layouts, ensuring your content is always up-to-date and tailored to your needs."). 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_manage_category_outcome.png) ## 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_manage_category_step3.png) ## 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_tip.png) 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_manage_category_step5.png) ## 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** Sample images: [Bottom-left](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/bottom-left.png), [Bottom-right](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/bottom-right.png), [Middle-left](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/middle-left.png), [Middle-right](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/middle-right.png), [Top-left](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/top-left.png), [Top-right](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/top-right.png),