Documentation
Feedback
Guides
Storefront Development

Storefront Development
Product Title

The Product Title is commonly used on Product Details Page (PDP).

The Product Title is commonly used on Product Details Page (PDP). It usually wraps the product name, a product label and the rating.

Overview

Example
Code

Apple Magic Mouse

10% off
Ref.: 99995945

Apple Magic Mouse

10% off

Handmade Steel Pants Gorgeous

10% off

Handmade Steel Pants Gorgeous

10% off

Import

Import the component from @faststore/ui

_10
import { ProductTitle } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

_10
@import '@faststore/ui/src/components/molecules/ProductTitle/styles.scss'

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Apple Magic Mouse

10% off
Ref.: 99995945

_10
<ProductTitle
_10
title={<h1>Apple Magic Mouse</h1>}
_10
label={<DiscountBadge size="big" listPrice={100} spotPrice={90} />}
_10
refNumber="99995945"
_10
ratingValue={4.5}
_10
/>


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-title
title*string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA react component to be used as the product title, e.g. a `h1`
labelstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA react component to be used as the product label, e.g. a `DiscountBadge`
refTagstringLabel for reference.Ref.:
refNumberstringA text to be used below the title and the label, such as the product's reference number.
ratingValuenumberThe current value of the rating, a number from 0 to 5.

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-title-text-sizevar(--fs-text-size-title-product)
--fs-product-title-text-weightvar(--fs-text-weight-regular)
--fs-product-title-line-height1.12
--fs-product-title-column-gapvar(--fs-spacing-2)
--fs-product-title-row-gapvar(--fs-spacing-3)

Nested Elements

Addendum

Local tokenDefault value/Global token linked
--fs-product-title-addendum-color
var(--fs-color-text-light)
--fs-product-title-addendum-sizevar(--fs-text-size-1)
--fs-product-title-addendum-line-height1.7

Customization

For further customization, you can use the following data attributes:
data-fs-product-title
data-fs-product-title-header
data-fs-product-title-addendum
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page