After understanding blocks and templates and how they render interface components, this guide will show you how to customize them to match your store identity.

The Store Theme allows you to:

• Set a default style for all store components
• Set a specific style for a component type or a single component

To set the default style for your store, you can use the style.json file in the style folder of the Store Theme app. This single file allows you to customize the appearance of your store by modifying the default definitions declared within it. This approach avoids the need to customize individual components on each page.

For example, you can set the default theme background color to blue by changing the semanticColors block's base property:

The styles.json file only accepts HEX values to set a color. Using other formats, such as RGB, may break the PWA module.

For detailed instructions on customizing your theme, see the VTEX Styleguide, a comprehensive CSS framework with guidelines for defining component styles. It includes a detailed explanation of the styles.json file structure to help you in your customizations.

The style.json file enables more generic customization of your store visual style and can be useful in most scenarios.

If you want to create a more distinctive store identity with certain elements featuring unique styles different from the default theme, consider this scenario: Imagine your store primarily uses blue as its main color, but you want the text components (created by rich-text blocks) to display in red. To make only one specific text component red while keeping the rest in the default blue color, you can achieve this advanced customization by overriding the default styles defined in styles.json. This can be done using CSS handles and the blockClass prop.

To apply advanced customization to your store style, see the guide Using CSS Handles for store customization.