---
schema_version: "1"
id: f0f0538e5930fe11e06ab5a0d7f704191d515d2332396cabbde3ff0bf822cab7
title: Creating a Zone in the Template Designer (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_creating_a_zone_in_the_template_designer.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_creating_a_zone_in_the_template_designer.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 5a4451e790e5ba4d32285a648cbad0298ef3240411967e537c3a4f77d29f3663
description: For the managed package runtime, organize cards into sections by creating zones in the Template Designer.
products:
  - Omnistudio
release: "264"
---
# Creating a Zone in the Template Designer (Managed Package)

For the managed package runtime, organize cards into sections by creating zones in the Template Designer.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

1. In your org, click App Launcher, click Vlocity Templates, and click a version of a template to open the Template Designer.
    
    Clone a template that has zones, such as `card-canvas-3x-zones-slds`. Then update, remove, or add zones as needed.
2. Click the **Edit** tab.
3. In the **Zones** section, click **Add Zone**.
    
    ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/zones_add_zone.png)
4. Enter a unique zone **Name** and descriptive zone **Label**, such as footer and Footer, respectively.
5. Click **Save**.
6. Click the **HTML** tab.
7. To reference the zone by **Zone Name** in the HTML add data.zones\['Zone Name'\].cards to an `ng-repeat` directive, such as in `card-canvas-3x-zones-slds`:
    
    ```
    <!-- Name of zone here is "Body" -->        
    <div ng-repeat="card in data.zones['Body'].cards |orderBy:order|filter: searchFunc(card, searchTerm.value)" vloc-card ctrl="{{ctrl}}" ng-model="card" data="card" records="records" index="{{$index}}" session-id="{{sessionId}}"            class="slds-p-around--small slds-size--1-of-1 slds-medium-size--3-of-6 slds-large-size--4-of-12" use-existing-element-type>
    </div>                    
    ```
8. Click **Save**.