---
title: Abbreviation
description: >-
  Displays abbreviated text or acronyms, revealing their full meaning or
  additional context through a tooltip on hover or focus. Use to clarify
  shortened terms, initialisms, or technical language without interrupting the
  reading flow.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/abbreviation
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/abbreviation.md
---

# Abbreviation

The abbreviation component displays abbreviated text or acronyms, revealing their full meaning through a tooltip on hover or focus. Use abbreviation to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.

Abbreviations improve accessibility by providing expanded text for screen readers and visual tooltips for sighted customers. For general inline text styling, use [text](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/text).

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Currency codes**: Expand abbreviated currency codes like USD, EUR, or GBP so customers understand the exact currency.
* **Shipping terms**: Clarify shipping acronyms like ETA, COD, or FOB that customers might not recognize.
* **Product identifiers**: Define shortened product codes like SKU or UPC that appear in order details.
* **Subscription terms**: Spell out subscription-related abbreviations like APR, MRR, or ARR that appear in billing details.

***

## Properties

Configure the following properties on the abbreviation component.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

* **title**

  **string**

  **Default: ''**

  Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.

  Learn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).

***

## Examples

### Display an abbreviation

Define a currency abbreviation with a full-text expansion on hover. This example displays `USD` inside an `s-abbreviation` element with the `title` attribute set to "United States Dollar."

## Display an abbreviation

![An abbreviated text element with a dotted underline indicating a tooltip is available on hover.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/abbreviation-default-DcP2xOyz.png)

## html

```html
<s-abbreviation title="United States Dollar">USD</s-abbreviation>
```

***

## Best practices

* **Set a descriptive title**: Provide a `title` attribute that spells out the full term so hover and assistive-tech users get the expanded meaning.
* **Use for genuine abbreviations only**: Reserve `s-abbreviation` for shortened terms, acronyms, or initialisms. For general tooltips, use [tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/tooltip).
* **Keep abbreviation text short**: Limit the visible text to the actual abbreviated form so the tooltip provides real added value.

***