← Web Components

Web Components · PDP

<mmm-pdp-custom-note>

A single-line note + optional inline link, placed near the buying area. Useful for tax, shipping disclaimers, size-guide hooks, or any "see X for more" pointer.

Overview

Text-first component. Set note-text for the body and optionally link-text + link-url for an inline anchor. The link is styled independently from the note text.

When to use

  • Below the price for tax-included notes ("Inclusive of all taxes").
  • Near variants for size-guide hooks ("Find your size").
  • Above add-to-cart for shipping disclaimers ("Ships from EU warehouse").

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-custom-note
  note-text="Inclusive of all taxes."
  link-text="Learn more"
  link-url="/tax-info">
</mmm-pdp-custom-note>

Attributes

AttributeTypeDefaultDescription
note-textstringFor custom or note, Please find this form byThe note body.
link-textstringclicking hereInline link label. Set together with link-url.
link-urlstring#Inline link destination.
note-font-sizestring0.875remNote font size.
note-colorstringtheme secondary text / #666Note text colour.
note-margin-bottomstring1.5625remSpacing below the note.
link-colorstringtheme primary text / #111Link text colour.
link-text-decorationstringunderlineDefault text-decoration.
link-cursorstringpointerLink cursor.
link-hover-text-decorationstringnoneText-decoration on hover.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

store sample-store tag <mmm-pdp-custom-note>

Examples

1. Tax-inclusive note with learn-more

<mmm-pdp-custom-note
  note-text="Inclusive of all taxes."
  link-text="Learn more"
  link-url="/tax-info">
</mmm-pdp-custom-note>

2. Size-guide pointer

<mmm-pdp-custom-note
  note-text="Not sure of your size?"
  link-text="Open size guide"
  link-url="/size-guide"
  link-color="#c8a8ff">
</mmm-pdp-custom-note>
<mmm-pdp-custom-note note-text="Ships from EU warehouse. Local taxes may apply on delivery."></mmm-pdp-custom-note>