Documentation
Feedback
Guides
Storefront Development

Storefront Development
Styling a component

Customize the styling of a component by using design tokens that align with your store's branding.

Customize the styling of a component by using design tokens that align with your store's branding.In this guide, you'll learn how to customize the style of a FastStore component using its local tokens. For the sake of this tutorial, We will use the Listing variant from the Price Component.
This is how Prices looks like in our current homepage (with the default color black) :
{"base64":"  ","img":{"width":2868,"height":1580,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2033042,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/homepage-prices-default___2751f604ab85b1dcfa47c942e318a7cd.png"}}
Remember that when changing a component's style, you can use Global tokens or styling from scratch using your preferred styling tool. However, changing the value of a global token may affect different parts of your store's interface.
  1. In your custom-theme.scss theme file , add the data-fs-price and data-fs-price-variant data attributes with the Listing value:
src/themes/custom-theme.scss

_10
...
_10
// --------------------------------------------------------
_10
// FS UI Components
_10
// --------------------------------------------------------
_10
// Add here the customizations for FastStore UI components.
_10
[data-fs-price] {}

Each FastStore UI component has a list of data attributes that can be used for further customization. You can find it in the component's Customization section.
  1. Now, change the color of the Listing variant using the Price local token. For this tutorial, we will use the shade of red #cb4242:
src/themes/custom-theme.scss

_10
_10
...
_10
// --------------------------------------------------------
_10
// FS UI Components
_10
// --------------------------------------------------------
_10
[data-fs-price] {
_10
--fs-price-listing-color: #cb4242;
_10
}

  1. Save your changes and check your browser to see the new color of your listing price. You may need to refresh the page.
{"base64":"  ","img":{"width":2872,"height":1580,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2033697,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/homepage-prices-design-token-red___cd0b15da26d23e0d0f4a2bd68ae6ca14.png"}}
Since we are not specifying the Price component context, we are applying this change to all the Price (data-fs-price) occurrences where the variant is listing. If you want to apply this change in only one store component, follow the next step Customizing a component within a section.

Customizing a component within a section

The starter provides a set of native sections, each consisting of different components with unique functionalities. You can customize the components inside its section using the available section and the component's data attributes.
In the example below, we will change the color of the Price component with the listing variant. But we only want to apply this change in the ProductShelf section. So, we can use the data-fs-product-shelf data-attribute to select the ProductShelf component in this section.
  1. In your custom-theme.scss theme file , add the following code:
src/themes/custom-theme.scss

_13
_13
...
_13
// --------------------------------------------------------
_13
// FS UI Components
_13
// --------------------------------------------------------
_13
[data-fs-price] {
_13
--fs-price-listing-color: #cb4242;
_13
}
_13
[data-fs-product-shelf]{
_13
[data-fs-price][data-fs-price-variant="listing"] {
_13
background-color: var(--fs-color-warning-bkg);
_13
}
_13
}

  1. Save your changes and check your browser to see a yellow background color added to listing prices inside the ProductShelf. You may need to refresh the page.
{"base64":"  ","img":{"width":2870,"height":2062,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2638258,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/homepage-prices-section-background___a71b4bbf2239e560c8d61bf66cb6395d.png"}}
Notice that in this example, only one section received the change, the ProductShelf. You can use this same approach whenever you need to syle FastStore UI Components.

Customizing a new component when using override

To customize a native component in FastStore to suit your store's needs, you can use the override feature. When overriding a native component and using your custom component, you may need to style it from scratch. In this section, you'll learn how to style a custom component.

Before you begin

Make sure you have a basic understanding of overriding native components and props. Additionally, we recommend to use CSS Module for styling your new component.
FastStore components support Sass for styling by default, but you can work with your desired tool.
For better understanding, we will use the example from the Overriding Native Components and Props guide. This example demonstrates how to create a new BuyButton, the CustomBuyButton in the ProductDetails section. To follow along this section, make sure to create the CustomBuyButton.

Step by step

  1. Once you have created the CustomBuyButton component, create a new file called CustomBuyButtons.module.scss.
{"base64":"  ","img":{"width":2342,"height":906,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":269791,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/custom-buy-button-component-code___25c01fd818e1fab4247e1f0f77df4186.png"}}
  1. Add the following code to the CustomBuyButtons.module.scss file:
CustomBuyButton.module.scss

_10
.CustomBuyButton {
_10
--fs-button-border-radius: var(--fs-border-radius-pill);
_10
--fs-button-padding: 0 var(--fs-spacing-5);
_10
_10
color: var(--fs-color-text-inverse);
_10
_10
[data-fs-button-wrapper] {
_10
background-color: #E31C58;
_10
}
_10
}

You can use FastStore UI components' customization data attribute to ease your styling process. In this example, we used data-fs-button-wrapper.
To ensure visual consistency with your store's theme, we highly recommend utilizing the global tokens whenever possible. Also, you can take advantage of the design tokens set provided by FastStore UI Components.
  1. Restart the server and check the color and shape of your CustomBuyButton component:
{"base64":"  ","img":{"width":2128,"height":824,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":245649,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/custom-buy-button-component-preview___a8e5bb897bc16e41c8a7540ea7da25ec.png"}}
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Overview
Storefront Development
Building and Customizing sections
Storefront Development
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page