Skip to main content

Price

The price component implements MWF compliant styling of pricing information. Use price to get the proper styling of the cost of a product, a discounted price or type of discount.

Example

$ 1,000
Full price was $1000 $1,000 Now $ 750
Price on a default theme
Discounted price on a default theme

Best practices

Always allow price to determine the styling of pricing information so that it remains standardized. Use the options detailed below and follow the examples to modify the pricing information. Use care to follow the pattern of the examples to achieve a consistent result. Pricing information is always contained in a dedicated span inside a div.

Do

  • Original price can be used without including discount text.
  • Use itemprop=”availability” when the item is out of stock. See the examples below for more information.
  • Use the <s> tag to create a strikethrough (although under HTML5 it is intended for use to define text that is no longer correct).

Don’t

  • Do not include discount text without an original price. If you do, the discount text will be ignored.
  • Do not include HTML markup inside the spans of the pricing component.
  • Do not include end tags for the <meta> or <link> elements. They are not required in HTML5.
  • Do not indicate one price currency and then use another currency symbol; both must agree.

Also known as

Sale price

Related

Hero
Metatext
Product placement

Accessibility

  • Discounted: Set the discount so it can be read by a screen reader by adding the statement
        <s><span class="x-screen-reader">Full price was $1,000</span>$1,000</s>
    See the example below for more information.
  • Microdata: Using the InStock schema allows Rich Internet applications (like search engines and screen readers) to consume information in a more meaningful manner. Do not exclude Microdata from your code.

Options

  • Classes: All coding information must be contained in a dedicated div that is assigned the class c-price. Two properties are also required:
    • Itemprop is set to “offers”.
    • Itemtype is set to the URL of the offer schema.
  • Large size: Add an f-large class to the div for a larger font size.
  • Starting price: Surround your text leader content with a <span> as the first child of the component. Note that including a discounted price would force the starting price to the second child position.
  • Discounted price: Include the following code pattern as the first child of the component:
    <s><span class="x-screen-reader">Full price was $1,000</span>$1,000</s>
  • Discounted price with detail: Include the following code pattern as the last child of the component:
    <span>&nbsp;including GMT</span>
  • In Stock: The stocking availability is sourced by the <link> element.
    • Set the itemprop property to “availability.”
    • Set the href property to the URL for stocking data.

Development

  • Schema definition: The price schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Price

$ 1,000
<div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="USD">
    <span>$</span>
    <span itemprop="price">1,000</span>
    <link itemprop="availability" href="http://schema.org/InStock">
</div>

Default Price with large option

$ 1,000
<div class="c-price f-large" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="USD">
    <span>$</span>
    <span itemprop="price">1,000</span>
    <link itemprop="availability" href="http://schema.org/InStock">
</div>

Price (starting at)

Starting at $ 1,000
<div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span>Starting at&nbsp;</span>
    <meta itemprop="priceCurrency" content="USD">
    <span>$</span>
    <span itemprop="price">1,000</span>
    <link itemprop="availability" href="http://schema.org/InStock">
</div>

Price (discounted)

Full price was$1,000  Now $ 750
<div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <s>
        <span class="x-screen-reader">Full price was</span>$1,000</s>
    <span>&nbsp;Now</span>
    <meta itemprop="priceCurrency" content="USD">
    <span>&nbsp;$</span>
    <span itemprop="price">750</span>
    <link itemprop="availability" href="http://schema.org/InStock">
</div>

Price (discounted with detail)

Full price was$1,000  Now $ 750 including GMT
<div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <s>
        <span class="x-screen-reader">Full price was</span>$1,000</s>
    <span>&nbsp;Now</span>
    <meta itemprop="priceCurrency" content="USD">
    <span>&nbsp;$</span>
    <span itemprop="price">750</span>
    <link itemprop="availability" href="http://schema.org/InStock">
    <span>&nbsp;including GMT</span>
</div>