Customizing a component

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

In this tutorial, 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.

ℹ️

Bear mind that when changing the style of a component you can also 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.

In the soft-blue.scss file, add the data-fs-price and data-fs-price-variant data attributes with the Listing value:

  ...
  [data-fs-logo] {
    --fs-logo-width: 8rem;
  }
 
  [data-fs-price] [data-fs-price-variant="listing"] {
  }

Now, change the color of the Listing variant using its local token. For this tutorial, we will use the shade of red #cb4242:

  }
 
  [data-fs-price][data-fs-price-variant="listing"] {
      --fs-price-listing-color: #cb4242;
  }

Save your changes and check your browser to see the new color of your listing price. You may need to refresh the page.

Brandless Pages