Selz Theme Kit is currently in beta release.
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"
}
]
}
]
The pagination configuration is specified as an array of IPaginationConfig properties.
{
"currentPage" : 2 ,
"nextTitle" : "Next Page" ,
"numPages" : 5 ,
"previousTitle" : "Previous Page"
}
All interfaces
IBlockCommonProps
IAudioBlockProps
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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 .