Data mocking

User-defined data mocks

Selz Theme Kit allows user-defined configurations for the following data mocks via JSON:

  • Store (store.stk.config.json)
  • Page (page.stk.config.json)
  • Blog (blog.stk.config.json)
  • Categories (categories.stk.config.json)
  • Editable regions (editable-regions.stk.config.json)
  • Menus (menus.stk.config.json)
  • Pagination (pagination.stk.config.json)

These files should either be placed in the working theme directory, or alternatively, their location passed as part of the --configDir option to Selz Theme Kit's mock generation utility.

store.stk.config.json

The store configuration is specified as an array of IStoreConfig properties.

{
    "cardsEnabled": true,
    "currencyCode": "aud",
    "language": "en-US",
    "logo": "https://path.to/example/logo.jpg",
    "sharingEnabled": true,
    "showCookieBanner": true,
    "showCurrency": true,
    "storeDescription": "My ecommerce store running a Selz theme.",
    "storeName": "My Selz Store",
    "useLogo": false,
    "viewAsOwner": false
}

page.stk.config.json

The page configuration is specified as an array of IPageConfig properties.

{
    "metaDescription": "Welcome to my awesome Selz ecommerce store.",
    "template": "index",
    "title": "My Selz Store"
}

blog.stk.config.json

The blog configuration is specified as an array of IArticleConfig properties.

[
   {
        "title": "10 Reasons Why Selz is Awesome",
        "content": "<h1>Hello, World!</h1><p>This is the first paragraph of my post</p> ... ",
        "createdTime": "Mon Aug 19 2019",
        "featuredImage": "https://path.to/example/image.jpg",
        "metaDescription": "Check out this awesome blog post!",
        "publishedTime": "Mon Aug 20 2019",
        "tags": ["selz", "ecommerce"]
    },
    {
        "title": "How to use Selz Theme Kit",
        "content": "<h1>Hello, World!</h1><p>This is the first paragraph of my post</p> ... ",
        "createdTime": "Mon Sep 27 2019",
        "featuredImage": "https://path.to/example/image.jpg",
        "metaDescription": "Check out this awesome blog post!",
        "publishedTime": "Mon Sep 27 2019",
        "tags": ["theme kit", "selz"]
    }
]

categories.stk.config.json

The category configuration is specified as an array of ICategoryConfig properties.

[
   {
        "description": "Professional online lessons for a range of musical instruments.",
        "featuredImage": "https://path.to/example/image.jpg",
        "title": "Online lessons",
        "numItems": 2,
        "items": [
            {
                "description": "Learn the basics of ecommerce through the Selz platform.",
                "price": 0.99,
                "title": "Ecommerce basics with Selz"
            },
            {
                "description": "Learn how you can speed up your selling through the Selz platform.",
                "price": 1.99,
                "title": "How to sell fast with Selz"
            }
        ]
    },
    {
        "description": "A rotating selection of high-quality ebooks.",
        "featuredImage": "https://path.to/example/image.jpg",
        "title": "EBooks",
        "numItems": 15
    },
    {
        "description": "Everyday wear for all ages.",
        "title": "Clothing",
        "numItems": 10
    }
]

editable-regions.stk.config.json

The editable region configuration is specified as an array of IEditableRegionConfig properties. While both rawMarkup and blocks are optional properties, the configuration only makes sense if at least one of the optional properties are included.

[
    {
        "regionName": "body",
        "rawMarkup": "<p>Welcome to {{ store.display_name }}!</p>",
        "blocks": [
            {
                "type": "quote",
                "props": {
                    "settings": {
                        "background_type": "none",
                        "cite": "John Heywood",
                        "color_text": "#333",
                        "enable_header": false,
                        "height": 2,
                        "quote": "Rome wasn't built in a day, but they were laying bricks every hour.",
                        "width": 100
                   }
                }
            },
            {
                "type": "map",
                "props": {
                    "url": "https://my.favourite.map/embed/link-to-location",
                    "settings": {
                        "alignment": "center",
                        "background_type": "none",
                        "enable_header": false,
                        "height": 2,
                        "width": 75
                    }
                }
            }
        ]
    }
]

The menu configuration is specified as an array of IMenuConfig properties.

[
    {
        "name": "main-menu",
        "links": [
            {
                "title": "Home"
            },
            {
                "title": "Our Story"
            },
            {
                "title": "Categories",
                "children": [
                    {
                        "title": "Ebooks"
                    },
                    {
                        "title": "Music lessons"
                    }
                ]
            }
        ]
    },
    {
        "name": "footer-menu",
        "links": [
            {
                "title": "Home"
            },
            {
                "title": "Contact"
            },
            {
                "title": "Legal"
            }
        ]
    }
]

pagination.stk.config.json

The pagination configuration is specified as an array of IPaginationConfig properties.

{
    "currentPage": 2,
    "nextTitle": "Next Page",
    "numPages": 5,
    "previousTitle": "Previous Page"
}

All interfaces

IBlockCommonProps

Properties
id string
The ID of the block.
type EBlockType or ESocialFeedBlockType
The type of the block. See EBlockType and ESocialFeedBlockType.

IAudioBlockProps

Properties
settings IAudioBlockPropsSettings
See IAudioBlockPropsSettings.

IAudioBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100.
background_type EBlockBackgroundType
The background type to use on the block. See EBlockBackgroundType.
enable_header boolean, optional
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block.
src string
The URI for the audio source to use for the block.
width number
The percentage width of the block.

IBlogBlockProps

Properties
settings IBlogBlockPropsSettings
See IBlogBlockPropsSettings.

IBlogBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType .
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
page_size number
Determines the number of articles per page to paginate the blog by.
paginate boolean
Flag for whether to paginate the blog articles.
tag string
The tag name to apply as a filter to the blog articles displayed in the block. The All' value can be used to display all blog articles.
width number
The percentage width of the block.

IButtonBlockProps

Properties
settings IButtonBlockPropsSettings
See IButtonBlockPropsSettings.

IButtonBlockPropsSettings

Properties
action EButtonAction
The action associated with the button. See EButtonAction.
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
auto_width boolean
Flag for whether the block's width should automatically be sized based on the content.
height EBlockHeight
Determines the height of the block. See EBlockHeight
item ProductDrop, optional
The product drop to associate with the block. Only needs to be set if action is not set to link. See the Drops reference for more information on ProductDrop.
link_target boolean, optional
Flag for whether the button should target a new browser tab. Only needs to be set if action is set to link.
link_url string, optional
The target URL that the button should direct to. Only needs to be set if action is set to link.
style EBlockStyle
The style variant to set for the block. See EBlockStyle
text string
The button text.
width number
The percentage width of the block. Will only be applied if auto_width is set to false.

ICategoryListBlockProps

Properties
settings ICategoryBlockPropsSettings
See ICategoryBlockPropsSettings.

ICategoryListBlockPropsSettings

Properties
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
categories CategoryDrop array
The category drops to list. See the Drops reference for more information on CategoryDrop.
dummy_category CategoryDrop
The category drop to use as a dummy category when no category is available. See the Drops reference for more information on CategoryDrop.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block.
per_row number
The number of items to list per row.
rows number
The number of rows to show items in.
width number
The percentage width of the block.

IDividerBlockProps

Properties
settings IDividerBlockPropsSettings
See IDividerBlockPropsSettings.

IDividerBlockPropsSettings

Properties
background_color - string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block.See EBlockBackgroundType .
divider_color string
The hexadecimal colour representation for the divider's colour.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
thickness number
The value used to derive the thickness of the divider.

IFeaturedCategoryBlockProps

Properties
settings IFeaturedCategoryBlockPropsSettings
See IFeaturedCategoryBlockPropsSettings.

IFeaturedCategoryBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
category CategoryDrop
The category drop to use for the block. See the Drops reference for more information on CategoryDrop.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
per_row number
The number of items to list per row.
rows number
The number of rows to show items in.
width number
The percentage width of the block.

IFeaturedProductBlockProps

Properties
item ProductDrop
The Product drop to use as the item. See the Drops reference for more information on ProductDrop.
settings IFeaturedProductBlockPropsSettings
See IFeaturedProductBlockPropsSettings.

IFeaturedProductBlockPropsSettings

Properties
action EButtonAction
The action associated with the block's button. See EButtonAction.
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType .
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
link_target boolean, optional
Flag for whether the button should target a new browser tab. Only needs to be set if action is set to link.
link_url string, optional
The target URL that the button should direct to. Only needs to be set if action is set to link.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
text string
Determines the text that will appear on the block's button.
width number
The percentage width of the block.

IGridBlockProps

Properties
settings IGridBlockPropsSettings

| See IGridBlockPropsSettings.

IGridBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
columns number
The number of grid columns to use.
columnTemplates string
Custom helper property for rendering out the blocks in grid columns. See IGridColumn.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
remove_margins boolean
Flag for whether to remove margins on the block.
vertical_alignment EBlockVerticalAlignment
The vertical alignment to set on the grid. See EBlockVerticalAlignment.
width number
The percentage width of the block.

IGridColumn

Properties
name string
The name of the column. This should be in the format "column_<X>" where X is an integer representing the sequential column number.
blocks IBlockConfig array, optional
The sequential block configurations to render into the column.

IHtmlBlockProps

Properties
settings IHtmlBlockPropsSettings
See IHtmlBlockPropsSettings.

IHtmlBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
html string
The HTML to be rendered.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
width number
The percentage width of the block.

IImageWithTextOverlayBlockProps

Properties
content string
The content of the text overlay. Supports HTML.
settings IImageWithTextOverlayBlockPropsSettings
See IImageWithTextOverlayBlockPropsSettings.

IImageWithTextOverlayBlockPropsSettings

Properties
action EButtonAction
The action associated with the block's button. See EButtonAction.
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_type EImageCombinationBlockBackgroundType
The background type to set for the block. See EImageCombinationBlockBackgroundType.
color_text string
The hexadecimal colour representation for the block's text colour.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
image_position EImagePosition
The horizontal alignment of the image in the block. See EImagePosition.
image_style EBlockBackgroundImageMode
The image mode to use for displaying the image in the block. See EBlockBackgroundImageMode.
item ProductDrop, optional
The product drop to use as the item. See the Drops reference for more information on ProductDrop. Only needs to be set if action is not set to link.
link_target boolean, optional
Flag for whether the button should target a new browser tab. Only needs to be set if action is set to link.
link_url string, optional
The target URL that the button should direct to. Only needs to be set if action is set to link.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
src string
The URI of the image to be included in the block.
text string
Determines the text that will appear on the block's button.
width number
The percentage width of the block.

IImageWithTextBlockProps

Properties
content string
The content of the text overlay. Supports HTML.
settings IImageWithTextBlockPropsSettings
See IImageWithTextBlockPropsSettings.

IImageWithTextBlockPropsSettings

Properties
action EButtonAction
The action associated with the block's button. See EButtonAction.
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_type EImageCombinationBlockBackgroundType
The background type to set for the block. See EImageCombinationBlockBackgroundType.
color_text string
The hexadecimal colour representation for the block's text colour.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
image_position EImagePosition
The horizontal alignment of the image in the block. See EImagePosition.
image_style EBlockBackgroundImageMode
The image mode to use for displaying the image in the block. See EBlockBackgroundImageMode.
item ProductDrop, optional
The product drop to use as the item. See the Drops reference for more information on ProductDrop. Only needs to be set if action is not set to link.
link_target boolean, optional
Flag for whether the button should target a new browser tab. Only needs to be set if action is set to link.
link_url string, optional
The target URL that the button should direct to. Only needs to be set if action is set to link.
src string
The URI of the image to be included in the block.
text string
Determines the text that will appear on the block's button.
width number
The percentage width of the block.

IImageBlockProps

Properties
settings IImageBlockPropsSettings
See IImageBlockPropsSettings.

IImageBlockPropsSettings

Properties
alt string
The value to set as the alt attribute in the resulting HTML img element.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
link_active boolean
Flag for determining whether the image should link to another resource.
link_target boolean, optional
Flag for whether the button should target a new browser tab. Only needs to be set if link_active is set to true.
link_url string, optional
The target URL that the button should direct to. Only needs to be set if link_active is set to true.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
src string
The URI of the image to be included in the block.
width number
The percentage width of the block.

IMapBlockProps

Properties
url string
The embed URL string for the map.
settings IMapBlockPropsSettings

| See IMapBlockPropsSettings.

IMapBlockPropsSettings

Properties
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
width number
The percentage width of the block.

IQuoteBlockProps

Properties
settings IQuoteBlockPropsSettings
See IQuoteBlockPropsSettings.

IQuoteBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
cite string
The author of the quote.
color_text string
The hexadecimal colour representation for the block's text colour.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
font_size string, optional
The nondefault font size to set for the quote text.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
quote string
The quote text for the block.
width number
The percentage width of the block.

ISocialFeedBlockProps

Properties
type ESocialFeedBlockType
The social feed block type (eg. Twitter feed).
settings ISocialFeedBlockPropsSettings
See ISocialFeedBlockPropsSettings.

ISocialFeedBlockPropsSettings

Properties
alignment EBlockAlignment
The alignment of the block. See EBlockAlignment.
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
count number
The number of images that should be displayed in the feed (eg. 1 - 20)
feed_logo boolean
Flag for whether to show the feed's logo.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
width number
The percentage width of the block.

ISocialLinksBlockProps

Properties
settings ISocialLinksBlockPropsSettings
See ISocialLinksBlockPropsSettings.

ISocialLinksBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment .
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
social_color_active boolean
Flag for determining whether the image should link to another resource.
social_link_color string, optional
The hexadecimal colour representation for the social links' non-default colour. Only needs to be set if social_color_active is set to true.
social_link_size ESocialIconSize
Setting for evaluating the final sizing for social links. See ESocialIconSize.
width number
The percentage width of the block.

ITextBlockProps

Properties
content string
The text block content. Supports HTML.
settings ITextBlockPropsSettings
See ITextBlockPropsSettings.

ITextBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment .
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
color_text string
The hexadecimal colour representation for the block's text colour.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
width number
The percentage width of the block.

IVideoBlockProps

Properties
settings IVideoBlockPropsSettings
See IVideoBlockPropsSettings.

IVideoBlockPropsSettings

Properties
alignment EBlockAlignment, optional
The alignment of the block. Only needs to be set if width is set to a value less than 100. See EBlockAlignment .
background_color string, optional
The hexadecimal colour representation for the block's background colour. Only needs to be set if the background_type is set to color.
backgound_image string, optional
The URI for the background image to use for the block. Only needs to be set if background_type is set to image.
backgound_image_mode EBlockBackgroundImageMode, optional
The background image mode to use for displaying the background image for the block. Only needs to be set if background_type is set to image. See EBlockBackgroundImageMode.
backgound_type EBlockBackgroundType
The background type to set for the block. See EBlockBackgroundType.
enable_header boolean
Flag for whether the block's header should be present. For example, setting this property to true would enable the header.
header_text string, optional
The text to place in the block header. Only needs to be set if enable_header is set to true.
height EBlockHeight
Determines the height of the block. See EBlockHeight.
overlay boolean, optional
Flag for whether to use an overlay on the block. Only needs to be set if background_type is set to image.
overlay_color string, optional
The hexadecimal colour representation for the block's overlay colour. Only needs to be set if overlay is set to true.
overlay_opacity number, optional
The opacity percentage to use for the overlay on the block. Only needs to be set if overlay is set to true.
poster string, optional
The URI for the poster to use. Only needs to be set if type is set to html5.
src string, optional
The video source URI for HTML5 videos. Only needs to be set if type is set to html5.
type EVideoType
The video source type. See EVideoType.
url string, optional
The video source URI for Vimeo and YouTube videos. Only needs to be set if type is set to vimeo or youtube.
width number
The percentage width of the block.

Configuration interfaces

IStoreConfig

Properties
cardsEnabled boolean
Flag for whether payment cards should be displayed.
currencyCode string, optional
The currency code to use for displaying prices.
dribbbleUrl boolean, optional
The Dribbble URL related to the store.
flickrUrl boolean, optional
The Flickr URL related to the store.
icon string
The favicon icon that should be used for the store.
instagramUrl string, optional
The Instagram URL related to the store.
language EStoreLanguage
The store language. See EStoreLanguage.
logo string, optional
The blog article title.
pinterestUrl string, optional
The Pinterest URL related to the store.
sharingEnabled boolean
Flag for whether social media sharing buttons should be displayed.
showCookieBanner boolean
Flag for whether the EU Cookie banner should be displayed.
showCurrency boolean
Flag for whether the store currency should be displayed.
storeDescription string
The store description.
storeName string
The store name.
soundcloudUrl string, optional
The SoundCloud URL related to the store.
tumblrUrl string, optional
The Tumblr URL related to the store.
twitterUrl string, optional
The Twitter URL related to the store.
useLogo boolean
Flag for whether the store logo should be displayed.
viewAsOwner boolean
Flag for whether pages should appear as they would for the store owner.
vimeoUrl string, optional
The Vimeo URL related to the store.
youtubeUrl string, optional
The YouTube URL related to the store.

IPageConfig

Properties
title string
The page title.
metaDescription string
The meta description related to the page.
template string
The page template name. This would typically correspond to the template being edited from the theme templates folder.

IArticleConfig

Properties
title string
The blog article title.
metaDescription string
The meta description related to the article.
content string
The HTML content of the article.
createdTime string
The date representing the creation time of the article. Must be convertible to a Date format.
publishedTime string, default is the current date in the format "Mon 19 Aug 2019"
The date representing the publication time of the article. Must be convertible to a Date format. This is effectively the last-published timestamp for the article.
featuredImage string, optional
The optional featured/banner image for the blog article.
tags string array
The tag names attached to the blog article.

ICategoryConfig

Properties
title string
The category title.
description string
The category description.
featuredImage string, optional
The featured/banner image for the category.
numItems integer
The number of items in the category.
items IProductConfig array, optional
The items belonging to the category, specified as an array of IProductConfig objects. If left unspecified a number of items corresponding to the numItems property will be auto-generated.

IProductConfig

Properties
title string
The product title.
description string
The product description.
featuredImage string, optional
The featured/banner image for the product.
sku string, optional
The Stock Keeping Unit for the product.
currency string, optional
The ISO 4217 currency code corresponding to the currency the product is listed in.
price float
The price of the product.
quantity integer, optional
The available quantity of the product.

IEditableRegionConfig

Properties
regionName string
The name of the target editable region to configure. This should match the name of the corresponding editable region in the Liquid template.
rawMarkup string, optional
Arbitrary HTML or Liquid that will be injected/compiled into the editable region before any blocks specified.
blocks IBlockConfig array, optional
See the appendix section on Block-related interfaces for all available blocks and their respective configuration properties.

IBlockConfig

Properties
type EBlockType or ESocialFeedBlockType
The block type to create. See EBlockType and ESocialFeedBlockType.
props TValidPartialBlockProps
The unique properties associated with the chosen block type. Block-related interfaces.

IMenuConfig

Properties
name string
The name of the menu. This should match the standard string identifiers for template menus ("main-menu", "footer-menu")
links IMenuLink array
The array of links to be included under the menu, specified in IMenuLink object format.
Properties
children IMenuLink array, optional
The child links associated with the link.
title string
The link title.

IPaginationConfig

Properties
numPages integer
The total number of pages encompassed by the mock paginator.
currentPage integer
The page number to be considered as current by the mock paginator.
previousTitle string, default is "Previous", optional
The title of the 'previous' pagination link.
nextTitle string, default is "Next", optional
The title of the 'next' pagination link.

All enumerators

EBlockAlignment

Member Value (string)
LEFT left
CENTER center
RIGHT right

EBlockBackgroundImageMode

Member Value (string)
COVER cover
CONTAIN contain
CENTERED centered
TILED tiled

EBlockBackgroundType

Member Value (string)
NONE none
IMAGE image
COLOR color

EBlockHeight

Member Value (number)
EXTRA_SMALL 0
SMALL 1
MEDIUM 2
LARGE 3
EXTRA_LARGE 4

EBlockStyle

Member Value (string)
PRIMARY primary
SECONDARY secondary
PINTEREST pinterest
FACEBOOK facebook
TWITTER twitter

EBlockType

Member Value (string)
AUDIO audio
BLOG blog
BUTTON button
CATEGORY_LIST category-list
DIVIDER divider
FEATURED_CATEGORY featured-category
FEATURED_PRODUCT featured-product
GRID grid
HTML html
IMAGE image
IMAGE_WITH_TEXT image-with-text
IMAGE_WITH_TEXT_OVERLAY image-with-text-overlay
MAP map
QUOTE quote
SOCIAL_FEED social-feed
SOCIAL_LINKS social-links
TEXT text
VIDEO video

EBlockVerticalAlignment

Member Value (string)
TOP top
MIDDLE middle
BOTTOM bottom

EButtonAction

Member Value (string)
BUY_NOW buy-now
ADD_TO_CART add-to-cart
VIEW_ITEM view-item
LINK link

EImageCombinationBlockBackgroundType

Member Value (string)
NONE none
COLOR color

EImagePosition

Member Value (string)
COLUMN_LEFT column-left
COLUMN_RIGHT column-right

ESocialFeedBlockType

Member Value (string)
SOCIAL_DRIBBBLE social-dribbble
SOCIAL_FLICKR social-flickr
SOCIAL_INSTAGRAM social-instagram
SOCIAL_TWITTER social-twitter

ESocialIconSize

Member Value (number)
SMALL 1
MEDIUM 2
LARGE 3
EXTRA_LARGE 4

EStoreLanguage

Member Value (string)
DANISH da-DK
GERMAN de-DE
ENGLISH en-US
FINNISH fi-FI
FRENCH fr-FR
ITALIAN it-IT
NORWEGIAN_BOKMAL nb-NO
DUTCH nl-NL
PORTUGUESE pt-PT
SWEDISH sv-SE
JAPANESE ja-JP

EVideoType

Member Value (string)
HTML5 html5
VIMEO vimeo
YOUTUBE youtube

Drops

ProductDrop

See the Themes Liquid Cheatsheet.

CategoryDrop

See the Themes Liquid Cheatsheet.