template-name.ts
The template-name.ts
file describes the pre-configured website layout and design for Instant Site users. Build the template by listing sections in the order they should appear on the storefront. There is no limitation on the number of sections you include in the template, but any template must have a header, footer, and at least one custom section.
The template-name.ts
uses Typescript language and consists of two main entities called metadata
and sections
:
metadata
object defines the name and description of the template visible in the Instant Site Editor.- sections array defines the actual content of the template. Sections order from this array is applied to the template when users install it.
Metadata
Metadata
It is an object with the following fields:
Name | Type | Description |
---|---|---|
name | string | Template name displayed in the IS Editor. Required field |
description | string | Template description displayed in the IS Editor. Required field |
cover_image{ set{ ORIGINAL{ url: ' VALUE '} } } | string | VALUE is the filename of the cover image used in the template. Place the image into the/templates/assets/ folder.Optional field |
Code example:
metadata: {
name: 'My Template Name',
description: 'My Template Description',
cover_image: {
set: {
ORIGINAL: {
url: 'template_cover_image.png',
},
}
}
Sections
Sections
It is an array of objects, where each object represents a specific section. Each section inside the array contains the following fields:
Name | Type | Description |
---|---|---|
type | string | Section type. Available values: - default : One of the default Ecwid sections.- custom : One of the custom sections available in the same app. Required field |
id | string | Section ID. Value here depends on the section type :- default type: ID from the list of default Ecwid sections- custom type: name of the section defined in the same app. You can find it in the package.json file or as a name of the sections section-name folder. Required field |
showcase_id | string | Specific showcase for the custom section. Optional field |
Code example:
sections: [
{
type: 'default',
id: 'header'
},
{
type: 'default',
id: 'slider'
showcase_id: '001',
},
{
type: 'custom',
id: 'example-section'
showcase_id: '005',
},
{
type: 'custom',
id: 'favorite-images-section'
},
{
type: 'default',
id: 'footer'
}
]
List of default sections:
Type | IDs | Description |
---|---|---|
Cover | cover_002 , cover_005 , cover_007 , cover_009 , cover_010 , cover_011 , cover_012 , cover_013 , cover_014 , cover_015 . | Serves as a brief intro to the store's business and brand. It works best as the first section of the site and can be used to grab customers’ attention. |
Announcement | announcement_bar_001 , announcement_bar_002 , announcement_bar_004 , announcement_bar_005 , announcement_bar_007 , announcement_bar_008 | Adds a top bar to the website. Use it for announcements about promotions, sales, unique selling points, or store updates. |
Store | store_002 , store_003 , store_004 , store_005 , store_006 | Represents store catalog by highlighting a wide assortment, drawing customer attention to most actual collections, or bringing bestsellers into the spotlight. |
Slider | slider_001 , slider_002 | Adds a carousel slider to promote special deals, discounts, or highlight your brand features. |
Video | video_001 , video_002 , video_003 , video_004 , video_005 , video_006 | Introduces store brand or a product via video. Use it to tell customers about store brand’s mission, show how the products are made or how to use them. |
Special Offer | special_offer_007 , special_offer_008 , special_offer_009 , special_offer_010 , special_offer_011 , special_offer_012 , special_offer_013 , special_offer_014 | Adds a section to promote special offers, such as seasonal sales, discount coupons, or free delivery. |
Customer Review | customer_review_001 , customer_review_002 , customer_review_003 , customer_review_004 , customer_review_006 , customer_review_007 , customer_review_008 , customer_review_009 , customer_review_010 , customer_review_011 | Use this section to demonstrate feedback store customers have shared about its products and services. Customer reviews are a good way to gain potential customers’ trust. |
Company Info | company_info_001 , company_info_003 , company_info_004 , company_info_009 , company_info_013 , company_info_014 , company_info_015 , company_info_016 , company_info_017 , company_info_018 , company_info_019 , company_info_020 , company_info_021 , company_info_022 , company_info_023 , company_info_024 , company_info_025 , company_info_026 | Use this section to show why store business stands out from the competition: describe production process, show the benefits of products, or write about the history of the company. |
Delivery & payment | shipping_payment_001 , shipping_payment_002 , shipping_payment_003 , shipping_payment_005 , shipping_payment_006 , shipping_payment_007 | This section contains information about delivering orders and accepting payments. Use it to tell about shipping and payment methods available, delivery services the store works with, return policies, and provide any other relevant details. |
Location | location_001 , location_002 , location_003 , location_004 , location_005 , location_006 | Use this section to provide store contact information and the physical location where the goods can be purchased or ordered. |
Coming soon
The header
and footer
sections don’t have any customization settings. We’ll add such settings and describe them here.
Updated about 1 month ago