Skip to main content
The Template Editor is where you design and customize your web store template. It allows you to arrange store sections, apply branding, and preview how your store will look to players. This article guides you through each part of the interface so you can quickly and easily understand how to navigate and use the Template Editor. The Template Editor is organized into four main areas:
  • Left Sidebar: Manage the Blocks that make up your store layout.
  • Center Panel: Preview your web store in real time.
  • Right Sidebar: Apply global branding and style settings using the Brand Kit.
  • Top Bar: Access template tools and preview options.
The Left Sidebar displays the list of pre-configured Blocks that define the structure and layout of your web store. Each Block represents a section of the store, such as the header, bundles, banners, or footer, and includes settings specific to that section. From the Left Sidebar, you can:
  • Hide or show Blocks to control which sections appear in the store.
  • Configure Blocks to control how a section is displayed in the store.
  • Reorder Blocks to change where a section appears in the page layout.
Blocks control the layout of the store, not the content. The content displayed in each section depends on your active offers and other configurations in the Publisher Dashboard. To learn more about working with Blocks, see Customize Your Web Store Layout Using Blocks.

​
Center Panel

The Center Panel shows a live preview of your web store. As you make changes in the Template Editor, the preview updates automatically so you can see how your store will look before saving or activating. By default, the preview displays the web store as it would appear on a mobile device. You can switch between mobile and desktop views using the controls in the Top Bar. The Right Sidebar contains the Brand Kit, where you configure global design and style settings for the template. While you can’t modify the internal structure of layouts, such as text position, or card spacing, the Brand Kit allows you to apply consistent branding across your entire store, including:
  • Fonts
  • Button colors
  • Logos
  • Background images
  • Footer images
Changes made in the Brand Kit apply across multiple Blocks at once, making it the fastest way to style your store. The Brand Kit includes two sections:
  • Branding: Global design settings for the template.
  • External Buttons: Style settings for optional buttons such as Back to Game and Add to Home Screen.
The Brand Kit is open by default. If you don’t see it, click the Brand Kit icon in the Top Bar to open it.

​
Top Bar

The Top Bar runs across the top of the Template Editor and provides tools for managing your template. From the Top Bar, you can:
  • Rename the template.
  • Preview the store on mobile or desktop.
  • Undo or redo changes made while editing.
  • Open the Brand Kit.
  • Test personalization responses.
  • Save your changes.
  • Go back to the list of templates.

​
Rename the template

To edit the template name:
  1. Hover over the template name.
  2. Click the Edit icon.
  3. Enter a new name and press Enter.

​
Test Personalization Response

The Test Personalization Response tool allows you to preview how your store will appear when using the Web Store Personalization feature. Open this tool from the Top Bar, and when you configure it, you’ll see the preview in the Center Panel. You can paste a JSON response from the Personalize Web Store Callback, and the Template Editor renders the personalized store preview in the Center Panel. For step-by-step instructions, see Preview the Web Store with Personalization Data.