Short codes
Global Settings
86 tokens under the settings.* namespace. Drop these anywhere the SSR layer can see them — HTML, attribute values, JS, or CSS.
Overview
86 tokens under the settings.* scope. Resolves on every page.
Usage
Drop a token anywhere the SSR layer will see it — HTML body, attribute value, inline JS, or inline CSS.
Inline in markup
<mmm-pdp-title>{{settings.logo.primary}}</mmm-pdp-title>
<!-- rendered -> -->
<mmm-pdp-title>https://cdn.commmerce.com/logos/primary.svg</mmm-pdp-title>Inside attribute values
<a href="/p/{{pdp.slug}}" title="Buy {{pdp.title}} for {{pdp.price}}">Shop</a>Brand 14
TokenPage bindingComponentDescription & sample
{{settings.brand.logo_type}}anyheader-logo.jsBrand logo render mode ("image" or "text")Sample:
text{{settings.brand.logo_width}}anyheader-logo.jsLogo width (number) numberSample:
150{{settings.brand.logo_width_unit}}anyheader-logo.jsLogo width unitSample:
px{{settings.brand.logo_height}}anyheader-logo.jsLogo height (number) numberSample:
50{{settings.brand.logo_height_unit}}anyheader-logo.jsLogo height unitSample:
px{{settings.brand.logo_object_fit}}anyheader-logo.jsCSS object-fit applied to image logoSample:
contain{{settings.brand.logo_text_font_family}}anyheader-logo.jsText-logo font familySample:
Roboto, sans-serif{{settings.brand.logo_text_font_weight}}anyheader-logo.jsText-logo font weightSample:
700{{settings.brand.logo_text_font_size}}anyheader-logo.jsText-logo font size (number) numberSample:
24{{settings.brand.logo_text_font_size_unit}}anyheader-logo.jsText-logo font-size unitSample:
px{{settings.brand.logo_text_letter_spacing}}anyheader-logo.jsText-logo letter spacing (number) numberSample:
0{{settings.brand.logo_text_letter_spacing_unit}}anyheader-logo.jsText-logo letter-spacing unitSample:
px{{settings.brand.logo_text_color}}anyheader-logo.jsText-logo colourSample:
#000000{{settings.brand.logo_text_transform}}anyheader-logo.jsText-logo CSS text-transformSample:
noneColor 29
TokenPage bindingComponentDescription & sample
{{settings.color.primary}}anywc-sdk-loader.jsPrimary text colourSample:
#000000{{settings.color.secondary}}anywc-sdk-loader.jsSecondary text colourSample:
#6F6F6F{{settings.color.button_fill}}anywc-sdk-loader.jsDefault button fill colourSample:
#000000{{settings.color.button_stroke}}anywc-sdk-loader.jsDefault button stroke colourSample:
#000000{{settings.color.button_hover_fill}}anywc-sdk-loader.jsButton hover fill colourSample:
#000000{{settings.color.button_hover_stroke}}anywc-sdk-loader.jsButton hover stroke colourSample:
#000000{{settings.color.add_to_cart_fill}}anywc-sdk-loader.jsAdd-to-cart fill colourSample:
#000000{{settings.color.add_to_cart_stroke}}anywc-sdk-loader.jsAdd-to-cart stroke colourSample:
#000000{{settings.color.add_to_cart_text}}anywc-sdk-loader.jsAdd-to-cart text colourSample:
#FFFFFF{{settings.color.add_to_cart_hover_fill}}anywc-sdk-loader.jsAdd-to-cart hover fill colourSample:
#333333{{settings.color.add_to_cart_hover_stroke}}anywc-sdk-loader.jsAdd-to-cart hover stroke colourSample:
#333333{{settings.color.add_to_cart_hover_text}}anywc-sdk-loader.jsAdd-to-cart hover text colourSample:
#FFFFFF{{settings.color.variant_btn_fill}}anywc-sdk-loader.jsVariant-button fill colourSample:
#FFFFFF{{settings.color.variant_btn_stroke}}anywc-sdk-loader.jsVariant-button stroke colourSample:
#000000{{settings.color.variant_btn_text}}anywc-sdk-loader.jsVariant-button text colourSample:
#000000{{settings.color.variant_btn_hover_fill}}anywc-sdk-loader.jsVariant-button hover fillSample:
#F5F5F5{{settings.color.variant_btn_hover_stroke}}anywc-sdk-loader.jsVariant-button hover strokeSample:
#000000{{settings.color.variant_btn_hover_text}}anywc-sdk-loader.jsVariant-button hover textSample:
#000000{{settings.color.border}}anywc-sdk-loader.jsDefault border colourSample:
#BFBFBF{{settings.color.border_radius}}anywc-sdk-loader.jsDefault border radius (number) numberSample:
0.375{{settings.color.border_radius_unit}}anywc-sdk-loader.jsDefault border-radius unitSample:
rem{{settings.color.input_stroke}}anywc-sdk-loader.jsInput box stroke colourSample:
#BFBFBF{{settings.color.input_stroke_width}}anywc-sdk-loader.jsInput box stroke width (number) numberSample:
1{{settings.color.link}}anywc-sdk-loader.jsHyperlink default colourSample:
#6F6F6F{{settings.color.link_hover}}anywc-sdk-loader.jsHyperlink hover colourSample:
#000000{{settings.color.checkbox}}anywc-sdk-loader.jsCheckbox default colourSample:
#000000{{settings.color.checkbox_tick}}anywc-sdk-loader.jsCheckbox selected-tick colourSample:
#000000{{settings.color.radio_border}}anywc-sdk-loader.jsRadio button border colourSample:
#000000{{settings.color.radio_dot}}anywc-sdk-loader.jsRadio button selected-dot colourSample:
#000000Custom attribute 16
TokenPage bindingComponentDescription & sample
{{settings.custom_attribute.count}}any*Number of custom attributes the merchant has registered numberSample:
2{{settings.custom_attribute.first.name}}any*Display name of the first custom attributeSample:
Color Scheme{{settings.custom_attribute.first.key}}any*HTML attribute key of the first custom attributeSample:
data-color-scheme{{settings.custom_attribute.first.type}}any*Input type of the first custom attributeSample:
dropdown{{settings.custom_attribute.first.default}}any*Default value of the first custom attributeSample:
light{{settings.custom_attribute.first.description}}any*Description of the first custom attributeSample:
Light or dark theme{{settings.custom_attribute.second.name}}any*Display name of the second custom attributeSample:
Layout Density{{settings.custom_attribute.second.key}}any*HTML attribute key of the second custom attributeSample:
data-density{{settings.custom_attribute.second.type}}any*Input type of the second custom attributeSample:
radio{{settings.custom_attribute.second.default}}any*Default value of the second custom attributeSample:
comfortable{{settings.custom_attribute.second.description}}any*Description of the second custom attributeSample:
Spacing density{{settings.custom_attribute.third.name}}any*Display name of the third custom attributeSample:
Highlight Tone{{settings.custom_attribute.third.key}}any*HTML attribute key of the third custom attributeSample:
data-tone{{settings.custom_attribute.third.type}}any*Input type of the third custom attributeSample:
value-unit{{settings.custom_attribute.third.default}}any*Default value of the third custom attributeSample:
12px{{settings.custom_attribute.third.description}}any*Description of the third custom attributeLogo 5
TokenPage bindingComponentDescription & sample
{{settings.logo.primary}}anyheader-logo.jsPrimary logo URL urlSample:
https://cdn.commmerce.com/logos/primary.svg{{settings.logo.favicon}}anyheader-logo.jsFavicon URL urlSample:
https://cdn.commmerce.com/logos/favicon.ico{{settings.logo.image}}anyheader-logo.jsBrand logo image URL urlSample:
https://cdn.commmerce.com/logos/brand.svg{{settings.logo.image_alt}}anyheader-logo.jsBrand logo alt textSample:
Brand Name{{settings.logo.text}}anyheader-logo.jsText-mode brand nameSample:
Brand NameProduct 16
TokenPage bindingComponentDescription & sample
{{settings.product.background_color}}anyproduct-card.jsProduct card background colourSample:
#FFFFFF{{settings.product.media_width}}anyproduct-media.jsProduct media width (number) numberSample:
100{{settings.product.media_width_unit}}anyproduct-media.jsProduct media width unitSample:
%{{settings.product.media_height}}anyproduct-media.jsProduct media height (number) numberSample:
18.75{{settings.product.media_height_unit}}anyproduct-media.jsProduct media height unitSample:
rem{{settings.product.object_fit}}anyproduct-media.jsProduct media object-fitSample:
cover{{settings.product.short_desc.color}}anyproduct-card.jsShort description text colourSample:
#6F6F6F{{settings.product.short_desc.font_family}}anyproduct-card.jsShort description font familySample:
Roboto, sans-serif{{settings.product.short_desc.font_weight}}anyproduct-card.jsShort description font weightSample:
400{{settings.product.short_desc.font_size}}anyproduct-card.jsShort description font size numberSample:
0.875{{settings.product.short_desc.font_size_unit}}anyproduct-card.jsShort description font-size unitSample:
rem{{settings.product.desc.color}}anypdp-description.jsLong description text colourSample:
#333333{{settings.product.desc.font_family}}anypdp-description.jsLong description font familySample:
Roboto, sans-serif{{settings.product.desc.font_weight}}anypdp-description.jsLong description font weightSample:
400{{settings.product.desc.font_size}}anypdp-description.jsLong description font size numberSample:
1{{settings.product.desc.font_size_unit}}anypdp-description.jsLong description font-size unitSample:
remSeo 6
TokenPage bindingComponentDescription & sample
{{settings.seo.default_title}}anypdp-shared-utils.jsSite-wide default page titleSample:
Sample Store{{settings.seo.prefix_title}}anypdp-shared-utils.jsTitle prefix prepended on every page{{settings.seo.suffix_title}}anypdp-shared-utils.jsTitle suffix appended on every pageSample:
— Sample Store{{settings.seo.default_description}}anypdp-shared-utils.jsSite-wide default meta descriptionSample:
Sample store description{{settings.seo.default_keywords}}anypdp-shared-utils.jsSite-wide default meta keywordsSample:
sample, store, ecommerce{{settings.seo.default_meta_image}}anypdp-shared-utils.jsSite-wide default Open Graph image urlSample:
https://cdn.commmerce.com/og.jpgTips
- Tokens are case-sensitive —
{{settings.title}}resolves;{{SETTINGS.TITLE}}does not. - Whitespace inside the braces is tolerated:
{{ settings.title }}works identically. - Unresolvable tokens fall through as empty strings rather than rendering the raw placeholder, so missing-data states stay clean.