layout.ts

The layout.ts file defines the layout settings available to developers for custom sections in the website Editor. Developers can use this file to configure and manage layouts for merchants allowing them to select predefined or custom layout icons.

Each layout is defined as an object with specific properties. You can add multiple layouts to the layout.ts file, in which case, a layout selector appears in the Design tab of the Editor. Merchants can switch between layouts using the provided icons. If fewer than two layouts are defined, the layout selector is hidden, and the default layout is applied.

If two or more layouts are defined in the file, you'll see the layout selector in the Editor:

Find the full list of layout settings below:

Setting	Type	Description
layoutId	string	Unique identifier for each layout defined in the file. Required
layoutIcon	string	Icon displayed to merchants in the layout selector. If not set, a default icon with the layout index is used. Find a full list of available icons below. Optional
selectedContentSettings	array of strings	Content elements used in the layout. If empty, all content settings are shown. Optional
selectedDesignSettings	array of objects	Design settings for the content elements added to the layout. Each object includes field names, types, and default values. If empty, all design settings are shown. The structure inside each object matches the one from the design.ts file. Optional
defaults	object	Default values for the layout design settings. If specified, override defaults from `selectedDesignSettings` but can still be changed by users in the editor. Optional

Code example for 'design.ts':

{
  layoutId: 'Custom_layout_1', 
  layoutIcon: 'COVER_FULLSCREEN_CENTER',
  selectedContentSettings: ['section_title', 'section_description],
  selectedDesignSettings: [
    {
      fieldName: 'section_description',  // Design setting field name
    },
    {
      fieldName: 'image_text',
      type: 'TEXT',                      // Optional. Design setting type. Required when defaults is setting here
      defaults: {                        // Optional. Design setting default. The value setted here will replace
        font: 'global.fontFamily.body',  // the one in the design.ts for this layout. Wrong defaults or type will
        size: 16,                        // result in possible breaking the reference section.
        bold: true,
        italic: false,
        color: '#000000',
        visible: true,
      },
    },
  ],
},

`layoutIcon`

Full list of icons for layout selector you can use in the layoutIcon field:

HEADER_LEFT
HEADER_CENTER_LOGO_BURGER
HEADER_CENTER_LOGO_COMPACT
HEADER_CENTER_LOGO_DETAILED
HEADER_LEFT_LOGO_BURGER
HEADER_LEFT_LOGO_COMPACT
HEADER_LEFT_LOGO_DETAILED
HEADER_LEFT_LOGO_SEARCH
HEADER_LEFT_LOGO_TEXT
TEXT_ONE_COLUMN
TEXT_TITLE_LEFT
TEXT_SUBTITLE_RIGHT
TEXT_TWO_COLUMNS
TEXT_CENTER
TEXT_DESCRIPTION_RIGHT
CTA_BANNER_LEFT
CTA_BANNER_RIGHT
CTA_BANNER_CENTER
CTA_BANNER_BOTTOM
CTA_PROMO_BAR_LEFT
CTA_PROMO_BAR_RIGHT
CTA_STORY_LEFT
CTA_STORY_RIGHT
CTA_FULLWIDTH_CENTER
CTA_FULLWIDTH_LEFT
COVER_FULLSCREEN_CENTER
COVER_FULLSCREEN_LEFT
COVER_FULLSCREEN_CENTER_LEFT
COVER_FULLSCREEN_RIGHT
COVER_FULLSCREEN_BOTTOM
COVER_FULLSCREEN_BOTTOM_RIGHT
COVER_FULLSCREEN_BOTTOM_LEFT
COVER_FULLSCREEN_TOP
COVER_SIDEBAR_RIGHT
COVER_SIDEBAR_LEFT
COVER_HALFSCREEN_LEFT
COVER_HALFSCREEN_CENTER
COVER_COLLAGE_BOTTOM
COVER_COLLAGE_LEFT
IMAGE_SUBTITLE_RIGHT
IMAGE_TITLE_LEFT
IMAGE_LEFT
IMAGE_RIGHT
IMAGE_CENTER
IMAGE_SIDE_TITLE
LOCATION_MAP_RIGHT
LOCATION_MAP_LEFT
LOCATION_IMAGE_RIGHT
LOCATION_IMAGE_LEFT
LOCATION_BACKGROUND_RIGHT
LOCATION_BACKGROUND_LEFT
LOCATION_FULL
LOCATION_SHORT
REVIEWS_MINIMAL
REVIEWS_CARDS
REVIEWS
REVIEWS_CLASSIC
REVIEWS_FULLSCREEN_BG
REVIEWS_FULLSCREEN_SIDEBAR_LEFT
REVIEWS_FULLSCREEN_SIDEBAR_RIGHT
REVIEWS_CARDS_PHOTO
REVIEWS_PHOTO_SPEECH_RIGHT
REVIEWS_PHOTO_SPEECH_LEFT
REVIEWS_SOCIAL_FEED
REVIEWS_ADAPTIVE
FEATURES_CLASSIC_CENTER
FEATURES_CLASSIC_LEFT
FEATURES_ACCORDION
FEATURES_MINIMAL
FEATURES_SMALL_ICONS
FEATURES_CAROUSEL
FEATURES_IMAGE_LEFT
FEATURES_IMAGE_RIGHT
ANNOUNCEMENT_CENTER
SLIDER_FULLSCREEN_CENTER
SLIDER_FULLSCREEN_LEFT