Documentation
Feedback
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Troubleshooting
Release Notes
Storefront Development
Getting started with storefront solutions
FastStore
Store Framework
(Legacy) CMS Portal
FastStoreCustomizing sections and components
List of Native Sections and Overridable Components
Sections in FastStore are components that organize and encapsulate other components, enabling you to create cohesive and functional content for your store.
For example, the Hero is a native section designed to capture your brand's identity and messaging. To effectively function in the store, the Hero comprises three components: Hero, HeroImage, and HeroHeader.

Considerations while customizing default components

Overriding certain FastStore components can affect the store’s behavior. For example, customizing __experimentalProductCard and SearchInput can impact your store's analytics tracking. These components collect data for the Intelligent Search Analytics, so it's crucial to maintain their tracking functionality when making modifications.
See below how customizing certain components can affect your store.

__experimentalProductCard

Impacted sections: ProductGallery and ProductShelf.
To ensure that click events on this component continue to be recorded after overriding the component, use the useProductLink_unstable hook. For more information on how to use the useProductLink_unstable hook and how to add it to the component, see the Experimental exports - Hooks and Components.
For reference, view the default ProductCard implementation on GitHub.

SearchInput

Impacted section: Navbar
Customizing the SearchInput may affect the tracking of search events. To maintain this functionality, you'll need to ensure that search events are logged even after modifications to the component.
  1. Add the following code to the custom component you are overriding (based on the default SearchInput component):

_10
const sendAnalytics = async (term: string) => {
_10
import('@faststore/sdk').then(({ sendAnalyticsEvent }) => {
_10
sendAnalyticsEvent<SearchEvent>({
_10
name: 'search',
_10
params: { search_term: term },
_10
})
_10
})
_10
}

  1. Within the custom component, make sure the sendAnalytics function is called whenever a user enters a search term. The following code is an example calling the sendAnalytics function based on the FastStore default implementation. Adjust the code to suit your specific context as needed.

_10
const onSearchSelection: SearchProviderContextValue['onSearchSelection'] = (
_10
term,
_10
path
_10
) => {
_10
addToSearchHistory({ term, path })
_10
sendAnalytics(term)
_10
setSearchDropdownVisible(false)
_10
setSearchQuery(term)
_10
}

FastStore Native Sections

Check out below a list of FastStore native sections, their components that can be overridden, and if there are props that can be changed through the Headless CMS.
Components prefixed with __experimental indicate that they can be overridden. However, their props are not accessible. We do not recommend overriding these components unless it is necessary.

Alert

TypeAvailability
Overridable components
Headless CMS: props customization
  • Icon
  • dismissible
Alert - Available schema
Check the available Headless CMS schema that you can customize for this component:

_38
{
_38
"name": "NewSectionName",
_38
"schema": {
_38
"title": "Add the Section name",
_38
"description": "Short description for the section's purpose",
_38
"type": "object",
_38
"required": ["icon", "content", "dismissible"],
_38
"properties": {
_38
"icon": {
_38
"type": "string",
_38
"title": "Icon",
_38
"enumNames": [
_38
"Bell",
_38
"BellRinging",
_38
"Checked",
_38
"Info",
_38
"Truck",
_38
"User"
_38
],
_38
"enum": ["Bell", "BellRinging", "Checked", "Info", "Truck", "User"]
_38
},
_38
"content": { "type": "string", "title": "Content" },
_38
"link": {
_38
"title": "Link",
_38
"type": "object",
_38
"properties": {
_38
"text": { "type": "string", "title": "Link Text" },
_38
"to": { "type": "string", "title": "Action link" }
_38
}
_38
},
_38
"dismissible": {
_38
"type": "boolean",
_38
"default": false,
_38
"title": "Is dismissible?"
_38
}
_38
}
_38
}
_38
}

BannerText

TypeAvailability
Overridable components
Headless CMS: props customization
  • ColorVariant
  • Variant
BannerText - Available schema
Check the available Headless CMS schema that you can customize for this component:

_52
{
_52
"name": "NewSectionName",
_52
"requiredScopes": [],
_52
"schema": {
_52
"title": "Add the Section name",
_52
"description": "Short description for the the section's purpose",
_52
"type": "object",
_52
"required": ["title", "caption", "link"],
_52
"properties": {
_52
"title": {
_52
"title": "Title",
_52
"type": "string"
_52
},
_52
"caption": {
_52
"title": "Caption",
_52
"type": "string"
_52
},
_52
"link": {
_52
"title": "Call to Action",
_52
"type": "object",
_52
"required": ["text", "url"],
_52
"properties": {
_52
"text": {
_52
"title": "Text",
_52
"type": "string"
_52
},
_52
"url": {
_52
"title": "URL",
_52
"type": "string"
_52
},
_52
"linkTargetBlank": {
_52
"type": "boolean",
_52
"title": "Open link in new window?",
_52
"default": false
_52
}
_52
}
_52
},
_52
"colorVariant": {
_52
"type": "string",
_52
"title": "Color variant",
_52
"enumNames": ["Main", "Light", "Accent"],
_52
"enum": ["main", "light", "accent"]
_52
},
_52
"variant": {
_52
"type": "string",
_52
"title": "Variant",
_52
"enumNames": ["Primary", "Secondary"],
_52
"enum": ["primary", "secondary"]
_52
}
_52
}
_52
}
_52
}

TypeAvailability
Overridable components
Headless CMS: props customization
  • Icon (HomeIcon)
Breadcrumb - Available schema
Check the available Headless CMS schema that you can customize for this component:

_22
{
_22
"name": "NewSectionName",
_22
"requiredScopes": ["pdp", "plp"],
_22
"schema": {
_22
"title": "Add the Section name",
_22
"description": "Short description for the the section's purpose",
_22
"type": "object",
_22
"required": ["icon", "alt"],
_22
"properties": {
_22
"icon": {
_22
"title": "Icon",
_22
"type": "string",
_22
"enumNames": ["House"],
_22
"enum": ["House"]
_22
},
_22
"alt": {
_22
"title": "Alternative Label",
_22
"type": "string"
_22
}
_22
}
_22
}
_22
}

CrossSellingShelf

TypeAvailability
Overridable components
Headless CMS: props customization
  • title
  • kind
CrossSellingShelf - Available schema
Check the available Headless CMS schema that you can customize for this component:

_51
{
_51
"name": "NewSectionName",
_51
"requiredScopes": ["pdp", "custom"],
_51
"schema": {
_51
"title": "Add the Section name",
_51
"description": "Short description for the the section's purpose",
_51
"type": "object",
_51
"required": ["title", "numberOfItems", "kind"],
_51
"properties": {
_51
"title": {
_51
"title": "Title",
_51
"type": "string"
_51
},
_51
"numberOfItems": {
_51
"title": "Total number of items",
_51
"type": "integer",
_51
"default": 5,
_51
"description": "Total number of items. The quantity may be smaller if the query returns fewer products."
_51
},
_51
"itemsPerPage": {
_51
"type": "integer",
_51
"title": "Number of items per page",
_51
"default": 5,
_51
"description": "Number of items to display per page in carousel"
_51
},
_51
"kind": {
_51
"title": "Kind",
_51
"description": "Change cross selling types",
_51
"default": "buy",
_51
"enum": ["buy", "view"],
_51
"enumNames": ["Who bought also bought", "Who saw also saw"]
_51
},
_51
"taxesConfiguration": {
_51
"title": "Taxes Configuration",
_51
"type": "object",
_51
"properties": {
_51
"usePriceWithTaxes": {
_51
"title": "Should use taxes to calculate the price?",
_51
"type": "boolean",
_51
"default": false
_51
},
_51
"taxesLabel": {
_51
"title": "Tax label to be displayed",
_51
"type": "string",
_51
"default": "Tax included"
_51
}
_51
}
_51
}
_51
}
_51
}
_51
},

EmptyState

TypeAvailability
Overridable componentsEmptyState
Headless CMS: props customization
  • title
  • titleIcon
  • variant
  • bkgColor
Empty State - Available schema
Check the available Headless CMS schema that you can customize for this component:

_73
{
_73
"name": "NewSectionName",
_73
"schema": {
_73
"title": "Add the Section name",
_73
"type": "object",
_73
"description": "Short description for the the section's purpose",
_73
"properties": {
_73
"title": {
_73
"title": "Title",
_73
"type": "string"
_73
},
_73
"titleIcon": {
_73
"title": "Title Icon",
_73
"type": "object",
_73
"properties": {
_73
"icon": {
_73
"title": "Icon",
_73
"type": "string",
_73
"enumNames": ["CircleWavy Warning"],
_73
"enum": ["CircleWavyWarning"]
_73
},
_73
"alt": {
_73
"title": "Alternative Label",
_73
"type": "string"
_73
}
_73
}
_73
},
_73
"subtitle": {
_73
"title": "Subtitle",
_73
"type": "string"
_73
},
_73
"showLoader": {
_73
"type": "boolean",
_73
"title": "Show loader?",
_73
"default": false
_73
},
_73
"errorState": {
_73
"title": "Error state used for shown errorId and fromUrl properties in 500 and 404 pages",
_73
"type": "object",
_73
"properties": {
_73
"errorId": {
_73
"title": "errorId used in 500 and 404 pages",
_73
"type": "object",
_73
"properties": {
_73
"show": {
_73
"type": "boolean",
_73
"title": "Show errorId in the end of message?"
_73
},
_73
"description": {
_73
"type": "string",
_73
"title": "Description shown before the errorId"
_73
}
_73
}
_73
},
_73
"fromUrl": {
_73
"title": "fromUrl used in 500 and 404 pages",
_73
"type": "object",
_73
"properties": {
_73
"show": {
_73
"type": "boolean",
_73
"title": "Show fromUrl in the end of message?"
_73
},
_73
"description": {
_73
"type": "string",
_73
"title": "Description shown before the fromUrl"
_73
}
_73
}
_73
}
_73
}
_73
}
_73
}
_73
}
_73
}

Hero

TypeAvailability
Overridable Components
Headless CMS: props customization
  • ButtonProps (Label, Icon)
  • ColorVariant
  • Variant
Hero - Available schema
Check the available Headless CMS schema that you can customize for this component:

_51
{
_51
"name": "NewSectionName",
_51
"requiredScopes": [],
_51
"schema": {
_51
"title": "Add the Section name",
_51
"description": "Short description for the the section's purpose",
_51
"type": "object",
_51
"required": ["title"],
_51
"properties": {
_51
"title": { "title": "Title", "type": "string" },
_51
"subtitle": { "title": "Subtitle", "type": "string" },
_51
"link": {
_51
"title": "Call to Action",
_51
"type": "object",
_51
"properties": {
_51
"text": { "type": "string", "title": "Text" },
_51
"url": { "type": "string", "title": "URL" },
_51
"linkTargetBlank": {
_51
"type": "boolean",
_51
"title": "Open link in new window?",
_51
"default": false
_51
}
_51
}
_51
},
_51
"image": {
_51
"type": "object",
_51
"title": "Image",
_51
"properties": {
_51
"src": {
_51
"type": "string",
_51
"title": "Image",
_51
"widget": { "ui:widget": "media-gallery" }
_51
},
_51
"alt": { "type": "string", "title": "Alternative Label" }
_51
}
_51
},
_51
"colorVariant": {
_51
"type": "string",
_51
"title": "Color variant",
_51
"enumNames": ["Main", "Light", "Accent"],
_51
"enum": ["main", "light", "accent"]
_51
},
_51
"variant": {
_51
"type": "string",
_51
"title": "Variant",
_51
"enumNames": ["Primary", "Secondary"],
_51
"enum": ["primary", "secondary"]
_51
}
_51
}
_51
}
_51
}

TypeAvailability
Overridable components
Headless CMS: props customization
  • NavbarRow: Logo
  • NavbarButtons: SignIn Button Icon, Cart Icon
  • Navigation: Regionalization Icon, Menu Icon, Home Icon
Navbar - Available schema
Check the available Headless CMS schema that you can customize for this component:

_207
{
_207
"name": "NewSectionName",
_207
"requiredScopes": [],
_207
"schema": {
_207
"title": "Add the Section name",
_207
"description": "Short description for the the section's purpose",
_207
"required": ["logo"],
_207
"properties": {
_207
"logo": {
_207
"title": "Logo",
_207
"type": "object",
_207
"required": ["src"],
_207
"properties": {
_207
"src": {
_207
"title": "Image",
_207
"type": "string",
_207
"widget": { "ui:widget": "media-gallery" }
_207
},
_207
"alt": { "title": "Alternative Label", "type": "string" },
_207
"link": {
_207
"title": "Logo Link",
_207
"type": "object",
_207
"required": ["url", "title"],
_207
"properties": {
_207
"url": { "title": "Link URL", "type": "string" },
_207
"title": { "title": "Link Title", "type": "string" }
_207
}
_207
}
_207
}
_207
},
_207
"searchInput": {
_207
"title": "Search Input",
_207
"description": "Search Input configurations",
_207
"type": "object",
_207
"required": ["sort"],
_207
"properties": {
_207
"sort": {
_207
"title": "Results default sort value",
_207
"type": "string",
_207
"default": "score_desc",
_207
"enumNames": [
_207
"Price, descending",
_207
"Price, ascending",
_207
"Top sales",
_207
"Name, A-Z",
_207
"Name, Z-A",
_207
"Release date",
_207
"Discount",
_207
"Relevance"
_207
],
_207
"enum": [
_207
"price_desc",
_207
"price_asc",
_207
"orders_desc",
_207
"name_asc",
_207
"name_desc",
_207
"release_desc",
_207
"discount_desc",
_207
"score_desc"
_207
]
_207
}
_207
}
_207
},
_207
"signInButton": {
_207
"title": "Sign In Button",
_207
"type": "object",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "object",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "string",
_207
"enumNames": ["User"],
_207
"enum": ["User"],
_207
"default": "User"
_207
},
_207
"alt": {
_207
"title": "Alternative Label",
_207
"type": "string",
_207
"default": "User"
_207
}
_207
}
_207
},
_207
"label": {
_207
"title": "Call to Action",
_207
"type": "string",
_207
"default": "Sign In"
_207
},
_207
"myAccountLabel": {
_207
"title": "My Account Label",
_207
"type": "string",
_207
"default": "My Account"
_207
}
_207
}
_207
},
_207
"cartIcon": {
_207
"title": "Cart Icon",
_207
"type": "object",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "string",
_207
"enumNames": ["Shopping Cart"],
_207
"enum": ["ShoppingCart"],
_207
"default": "ShoppingCart"
_207
},
_207
"alt": {
_207
"title": "Alternative Label",
_207
"type": "string",
_207
"default": "Shopping Cart"
_207
}
_207
}
_207
},
_207
"navigation": {
_207
"title": "Navigation",
_207
"type": "object",
_207
"properties": {
_207
"regionalization": {
_207
"type": "object",
_207
"title": "Regionalization",
_207
"properties": {
_207
"enabled": {
_207
"type": "boolean",
_207
"title": "Use Regionalization?",
_207
"default": true
_207
},
_207
"icon": {
_207
"title": "Icon",
_207
"type": "object",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "string",
_207
"enumNames": ["Map Pin"],
_207
"enum": ["MapPin"],
_207
"default": "MapPin"
_207
},
_207
"alt": {
_207
"title": "Alternative Label",
_207
"type": "string",
_207
"default": "MapPin"
_207
}
_207
}
_207
},
_207
"label": {
_207
"title": "Call to Action",
_207
"type": "string",
_207
"default": "Set Location"
_207
}
_207
}
_207
},
_207
"pageLinks": {
_207
"title": "Links",
_207
"type": "array",
_207
"maxItems": 8,
_207
"items": {
_207
"title": "Link",
_207
"type": "object",
_207
"required": ["text", "url"],
_207
"properties": {
_207
"text": { "title": "Link Text", "type": "string" },
_207
"url": { "title": "Link URL", "type": "string" }
_207
}
_207
}
_207
},
_207
"menu": {
_207
"type": "object",
_207
"title": "Menu",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "object",
_207
"properties": {
_207
"icon": {
_207
"title": "Icon",
_207
"type": "string",
_207
"enumNames": ["List"],
_207
"enum": ["List"],
_207
"default": "List"
_207
},
_207
"alt": {
_207
"title": "Alternative Label",
_207
"type": "string",
_207
"default": "List"
_207
}
_207
}
_207
}
_207
}
_207
},
_207
"home": {
_207
"title": "Home",
_207
"type": "object",
_207
"properties": {
_207
"label": {
_207
"title": "Go to Home Label",
_207
"type": "string",
_207
"default": "Go to Home"
_207
}
_207
}
_207
}
_207
}
_207
}
_207
}
_207
}
_207
}

Newsletter

TypeAvailability
DocumentationComing soon!
Overridable components
  • ToastIconSuccess
  • ToastIconError
  • HeaderIcon
  • InputFieldName
  • InputFieldEmail
  • Button
Headless CMS: props customization
  • Icon
  • Variant (Lite / Full)
Newsletter - Available schema
Check the available Headless CMS schema that you can customize for this component:

_132
{
_132
"name": "NewSectionName",
_132
"requiredScopes": [],
_132
"schema": {
_132
"title": "Add the Section name",
_132
"description": "Short description for the the section's purpose",
_132
"type": "object",
_132
"required": ["title"],
_132
"properties": {
_132
"icon": {
_132
"title": "Icon",
_132
"type": "object",
_132
"properties": {
_132
"icon": {
_132
"title": "Icon",
_132
"type": "string",
_132
"enumNames": ["Envelope"],
_132
"enum": ["Envelope"],
_132
"default": "Envelope"
_132
},
_132
"alt": {
_132
"type": "string",
_132
"title": "Alternative Label",
_132
"default": "Envelope"
_132
}
_132
}
_132
},
_132
"title": {
_132
"title": "Title",
_132
"type": "string",
_132
"default": "Get News and Special Offers!"
_132
},
_132
"description": {
_132
"title": "Description",
_132
"type": "string",
_132
"default": "Receive our news and promotions in advance"
_132
},
_132
"privacyPolicy": {
_132
"title": "Privacy Policy Disclaimer",
_132
"type": "string",
_132
"widget": { "ui:widget": "draftjs-rich-text" }
_132
},
_132
"emailInputLabel": {
_132
"title": "Email input label",
_132
"type": "string",
_132
"default": "Your Email"
_132
},
_132
"displayNameInput": {
_132
"title": "Request name?",
_132
"type": "boolean",
_132
"default": true
_132
},
_132
"nameInputLabel": {
_132
"title": "Name input label",
_132
"type": "string",
_132
"default": "Your Name"
_132
},
_132
"subscribeButtonLabel": {
_132
"title": "Subscribe button label",
_132
"type": "string",
_132
"default": "Subscribe"
_132
},
_132
"subscribeButtonLoadingLabel": {
_132
"title": "Subscribe button loading label",
_132
"type": "string",
_132
"default": "Loading..."
_132
},
_132
"card": {
_132
"title": "Newsletter should be in card format?",
_132
"type": "boolean",
_132
"default": false
_132
},
_132
"colorVariant": {
_132
"title": "Color variant",
_132
"type": "string",
_132
"enumNames": ["Main", "Light", "Accent"],
_132
"enum": ["main", "light", "accent"],
_132
"default": "main"
_132
},
_132
"toastSubscribe": {
_132
"title": "Toast Subscribe",
_132
"type": "object",
_132
"properties": {
_132
"title": {
_132
"title": "Title",
_132
"description": "Message Title",
_132
"type": "string",
_132
"default": "Hooray!"
_132
},
_132
"message": {
_132
"title": "Message",
_132
"description": "Message",
_132
"type": "string",
_132
"default": "Thank for your subscription."
_132
},
_132
"icon": {
_132
"title": "Icon",
_132
"type": "string",
_132
"enumNames": ["CircleWavyCheck"],
_132
"enum": ["CircleWavyCheck"],
_132
"default": "CircleWavyCheck"
_132
}
_132
}
_132
},
_132
"toastSubscribeError": {
_132
"title": "Toast Subscribe Error",
_132
"type": "object",
_132
"properties": {
_132
"title": {
_132
"title": "Title",
_132
"description": "Message Title",
_132
"type": "string",
_132
"default": "Oops."
_132
},
_132
"message": {
_132
"title": "Message",
_132
"description": "Message",
_132
"type": "string",
_132
"default": "Something went wrong. Please Try again."
_132
},
_132
"icon": {
_132
"title": "Icon",
_132
"type": "string",
_132
"enumNames": ["CircleWavyWarning"],
_132
"enum": ["CircleWavyWarning"],
_132
"default": "CircleWavyWarning"
_132
}
_132
}
_132
}
_132
}
_132
}
_132
}

ProductDetails

TypeAvailability
Overridable components
Headless CMS: props customization
  • ProductTitle: showDiscountBadge, discountBadgeSize, showReferenceNumber
  • BuyButton: Icon
Product Details - Available schema
Check the available Headless CMS schema that you can customize for this component:

_133
{
_133
"name": "NewSectionName",
_133
"requiredScopes": ["pdp"],
_133
"schema": {
_133
"title": "Add the Section name",
_133
"description": "Short description for the the section's purpose",
_133
"type": "object",
_133
"properties": {
_133
"productTitle": {
_133
"title": "Product Title",
_133
"type": "object",
_133
"properties": {
_133
"discountBadge": {
_133
"title": "Discount Badge",
_133
"type": "object",
_133
"properties": {
_133
"showDiscountBadge": {
_133
"title": "Show Discount Badge?",
_133
"type": "boolean",
_133
"default": false
_133
},
_133
"size": {
_133
"title": "Size",
_133
"type": "string",
_133
"enumNames": ["Big", "Small"],
_133
"enum": ["big", "small"]
_133
}
_133
}
_133
},
_133
"refNumber": {
_133
"title": "Show Reference Number?",
_133
"type": "boolean",
_133
"default": false
_133
}
_133
}
_133
},
_133
"buyButton": {
_133
"title": "Buy Button",
_133
"type": "object",
_133
"properties": {
_133
"title": {
_133
"title": "Title",
_133
"type": "string",
_133
"default": "Add to Cart"
_133
},
_133
"icon": {
_133
"title": "Icon",
_133
"type": "object",
_133
"properties": {
_133
"icon": {
_133
"title": "Icon",
_133
"type": "string",
_133
"enumNames": ["Shopping Cart"],
_133
"enum": ["ShoppingCart"]
_133
},
_133
"alt": {
_133
"type": "string",
_133
"title": "Alternative Label",
_133
"default": "Shopping Cart"
_133
}
_133
}
_133
}
_133
}
_133
},
_133
"notAvailableButton": {
_133
"title": "Not Available Button",
_133
"description": "Shown when a SKU is not available",
_133
"type": "object",
_133
"properties": {
_133
"title": {
_133
"title": "Title",
_133
"type": "string",
_133
"default": "Not Available"
_133
}
_133
}
_133
},
_133
"shippingSimulator": {
_133
"title": "Shipping Simulation",
_133
"type": "object",
_133
"properties": {
_133
"title": {
_133
"title": "Title",
_133
"type": "string",
_133
"default": "Shipping"
_133
},
_133
"inputLabel": {
_133
"title": "Input Label",
_133
"type": "string",
_133
"default": "Postal Code"
_133
},
_133
"link": {
_133
"title": "Postal Code Discovery",
_133
"type": "object",
_133
"properties": {
_133
"text": {
_133
"title": "Link Text",
_133
"type": "string",
_133
"default": "I don't know my Postal Code"
_133
},
_133
"to": { "title": "URL", "type": "string" }
_133
}
_133
},
_133
"shippingOptionsTableTitle": {
_133
"title": "Shipping Options Table Header",
_133
"type": "string"
_133
}
_133
}
_133
},
_133
"productDescription": {
_133
"title": "Product Description",
_133
"type": "object",
_133
"properties": {
_133
"initiallyExpanded": {
_133
"type": "string",
_133
"title": "Initially Expanded?",
_133
"enumNames": ["First", "All", "None"],
_133
"enum": ["first", "all", "none"]
_133
},
_133
"displayDescription": {
_133
"title": "Should display description?",
_133
"type": "boolean",
_133
"default": true
_133
},
_133
"title": {
_133
"title": "Description section title",
_133
"type": "string",
_133
"default": "Description"
_133
}
_133
}
_133
}
_133
}
_133
}
_133
}

ProductGallery

TypeAvailability
DocumentationFastStore UI
Overridable components
Headless CMS: props customization
  • Previous Page Button: Icon
  • Mobile Filter Button: Icon
  • Product Card Configuration: showDiscountBadge, bordered
Product Gallery - Available schema
Check the available Headless CMS schema that you can customize for this component:

_197
{
_197
"name": "NewSectionName",
_197
"requiredScopes": ["plp", "search"],
_197
"schema": {
_197
"title": "Add the Section name",
_197
"description": "Short description for the the section's purpose",
_197
"type": "object",
_197
"required": ["filter"],
_197
"properties": {
_197
"searchTermLabel": {
_197
"title": "Search page term label",
_197
"type": "string",
_197
"default": "Showing results for:"
_197
},
_197
"totalCountLabel": {
_197
"title": "Total count label",
_197
"type": "string",
_197
"default": "Results"
_197
},
_197
"previousPageButton": {
_197
"title": "Previous page button",
_197
"type": "object",
_197
"required": ["icon", "label"],
_197
"properties": {
_197
"icon": {
_197
"title": "Icon",
_197
"type": "object",
_197
"properties": {
_197
"icon": {
_197
"title": "Icon",
_197
"type": "string",
_197
"enumNames": ["ArrowLeft"],
_197
"enum": ["ArrowLeft"],
_197
"default": "ArrowLeft"
_197
},
_197
"alt": {
_197
"title": "Alternative label",
_197
"type": "string",
_197
"default": "Arrow Left icon"
_197
}
_197
}
_197
},
_197
"label": {
_197
"title": "Previous page button",
_197
"type": "string",
_197
"default": "Previous Page"
_197
}
_197
}
_197
},
_197
"loadMorePageButton": {
_197
"title": "Load more products Button",
_197
"type": "object",
_197
"required": ["label"],
_197
"properties": {
_197
"label": {
_197
"title": "Load more products label",
_197
"type": "string",
_197
"default": "Load more products"
_197
}
_197
}
_197
},
_197
"filter": {
_197
"title": "Filter",
_197
"type": "object",
_197
"required": ["title", "mobileOnly"],
_197
"properties": {
_197
"title": {
_197
"title": "Filter title",
_197
"type": "string",
_197
"default": "Filters"
_197
},
_197
"mobileOnly": {
_197
"title": "Mobile Only",
_197
"type": "object",
_197
"required": [
_197
"filterButton",
_197
"clearButtonLabel",
_197
"applyButtonLabel"
_197
],
_197
"properties": {
_197
"filterButton": {
_197
"title": "Show filter button",
_197
"type": "object",
_197
"required": ["label", "icon"],
_197
"properties": {
_197
"label": {
_197
"title": "Label",
_197
"type": "string",
_197
"default": "Filters"
_197
},
_197
"icon": {
_197
"title": "Icon",
_197
"type": "object",
_197
"required": ["icon", "alt"],
_197
"properties": {
_197
"icon": {
_197
"title": "Icon",
_197
"type": "string",
_197
"enumNames": ["FadersHorizontal"],
_197
"enum": ["FadersHorizontal"],
_197
"default": "FadersHorizontal"
_197
},
_197
"alt": {
_197
"title": "Alternative label",
_197
"type": "string",
_197
"default": "Open Filters"
_197
}
_197
}
_197
}
_197
}
_197
},
_197
"clearButtonLabel": {
_197
"title": "Clear button label",
_197
"type": "string",
_197
"default": "Clear All"
_197
},
_197
"applyButtonLabel": {
_197
"title": "Apply button label",
_197
"type": "string",
_197
"default": "Apply"
_197
}
_197
}
_197
}
_197
}
_197
},
_197
"productCard": {
_197
"title": "Product Card Configuration",
_197
"type": "object",
_197
"properties": {
_197
"showDiscountBadge": {
_197
"title": "Show discount badge?",
_197
"type": "boolean",
_197
"default": true
_197
},
_197
"bordered": {
_197
"title": "Cards should be bordered?",
_197
"type": "boolean",
_197
"default": true
_197
}
_197
}
_197
},
_197
"emptyGallery": {
_197
"title": "Empty Gallery",
_197
"type": "object",
_197
"properties": {
_197
"title": {
_197
"title": "Title",
_197
"type": "string",
_197
"default": "Nothing matches with your search"
_197
},
_197
"firstButton": {
_197
"title": "First Button",
_197
"type": "object",
_197
"properties": {
_197
"label": {
_197
"type": "string",
_197
"title": "Label",
_197
"default": "Browse Offers"
_197
},
_197
"url": {
_197
"type": "string",
_197
"title": "URL",
_197
"default": "/office"
_197
},
_197
"icon": {
_197
"title": "Icon",
_197
"type": "string",
_197
"default": "CircleWavyWarning"
_197
}
_197
}
_197
},
_197
"secondButton": {
_197
"title": "Second Button",
_197
"type": "object",
_197
"properties": {
_197
"label": {
_197
"type": "string",
_197
"title": "Label",
_197
"default": "Just Arrived"
_197
},
_197
"url": {
_197
"type": "string",
_197
"title": "URL",
_197
"default": "/technology"
_197
},
_197
"icon": {
_197
"title": "Icon",
_197
"type": "string",
_197
"default": "RocketLaunch"
_197
}
_197
}
_197
}
_197
}
_197
}
_197
}
_197
}
_197
}

ProductShelf

TypeAvailability
Overridable components
  • ProductShelf
  • __experimentalCarousel
  • __experimentalProductCard
Headless CMS: props customization
  • Product Card Configuration: showDiscountBadge, bordered
Product Shelf - Available schema
Check the available Headless CMS schema that you can customize for this component:

_96
{
_96
"name": "NewSectionName",
_96
"requiredScopes": [],
_96
"schema": {
_96
"title": "Add the Section name",
_96
"description": "Short description for the the section's purpose",
_96
"type": "object",
_96
"required": ["title", "numberOfItems", "after", "sort"],
_96
"properties": {
_96
"title": { "type": "string", "title": "Title" },
_96
"numberOfItems": {
_96
"type": "integer",
_96
"title": "Total number of items",
_96
"default": 5,
_96
"description": "Total number of items. The quantity may be smaller if the query returns fewer products."
_96
},
_96
"itemsPerPage": {
_96
"type": "integer",
_96
"title": "Number of items per page",
_96
"default": 5,
_96
"description": "Number of items to display per page in carousel"
_96
},
_96
"after": {
_96
"type": "integer",
_96
"title": "After",
_96
"default": "0",
_96
"description": "Initial pagination item"
_96
},
_96
"sort": {
_96
"title": "Sort",
_96
"description": "Items order",
_96
"default": "score_desc",
_96
"enum": [
_96
"discount_desc",
_96
"name_asc",
_96
"name_desc",
_96
"orders_desc",
_96
"price_asc",
_96
"price_desc",
_96
"release_desc",
_96
"score_desc"
_96
],
_96
"enumNames": [
_96
"Discount: higher to lower",
_96
"Name: A-Z",
_96
"Name: Z-A",
_96
"Orders: higher to lower",
_96
"Price: lower to higher",
_96
"Price: higher to lower",
_96
"Release date: newer to older",
_96
"Relevance: higher to lower"
_96
]
_96
},
_96
"term": { "type": "string", "title": "Search term" },
_96
"selectedFacets": {
_96
"title": "Facets",
_96
"type": "array",
_96
"items": {
_96
"title": "Facet",
_96
"type": "object",
_96
"required": ["key", "value"],
_96
"properties": {
_96
"key": {
_96
"title": "Key",
_96
"description": "For collections use: productClusterIds",
_96
"type": "string",
_96
"default": "productClusterIds"
_96
},
_96
"value": {
_96
"title": "Value",
_96
"description": "E.g. For 'Most Wanted' collection, use: 140. To consult your collection ids go to Collections page",
_96
"type": "string",
_96
"default": "140"
_96
}
_96
}
_96
}
_96
},
_96
"productCardConfiguration": {
_96
"title": "Product Card Configuration",
_96
"type": "object",
_96
"properties": {
_96
"showDiscountBadge": {
_96
"title": "Show discount badge?",
_96
"type": "boolean",
_96
"default": true
_96
},
_96
"bordered": {
_96
"title": "Cards should be bordered?",
_96
"type": "boolean",
_96
"default": true
_96
}
_96
}
_96
}
_96
}
_96
}
_96
}

RegionBar

TypeAvailability
Overridable components
Headless CMS: props customization
  • LocationIcon: Icon
  • ButtonIcon: Icon
Region Bar - Available schema
Check the available Headless CMS schema that you can customize for this component:

_58
{
_58
"name": "NewSectionName",
_58
"requiredScopes": [],
_58
"schema": {
_58
"title": "Add the Section name",
_58
"description": "Short description for the the section's purpose",
_58
"type": "object",
_58
"required": ["label"],
_58
"properties": {
_58
"icon": {
_58
"title": "Location Icon",
_58
"type": "object",
_58
"properties": {
_58
"icon": {
_58
"title": "Icon",
_58
"type": "string",
_58
"enumNames": ["Map Pin"],
_58
"enum": ["MapPin"],
_58
"default": "MapPin"
_58
},
_58
"alt": {
_58
"title": "Alternative Label",
_58
"type": "string",
_58
"default": "Map Pin icon"
_58
}
_58
}
_58
},
_58
"label": {
_58
"title": "Location label",
_58
"type": "string",
_58
"default": "Set your location"
_58
},
_58
"editLabel": {
_58
"title": "Location edit label",
_58
"type": "string",
_58
"default": "Edit"
_58
},
_58
"buttonIcon": {
_58
"title": "Button Icon",
_58
"type": "object",
_58
"properties": {
_58
"icon": {
_58
"title": "Icon",
_58
"type": "string",
_58
"enumNames": ["Caret Right"],
_58
"enum": ["CaretRight"],
_58
"default": "CaretRight"
_58
},
_58
"alt": {
_58
"title": "Alternative Label",
_58
"type": "string",
_58
"default": "Caret Right icon"
_58
}
_58
}
_58
}
_58
}
_58
}
_58
}

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Creating a new section
« Previous
Experimental exports - Hooks and Components
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page