Learn how to set specific styles for your store components to enhance your store's user experience.
Your website’s visual style is fundamental to building your store’s identity.
Once you understand what blocks and templates are and how they render interface components, it's time to learn how to customize them.
The Store Theme will allow you to:
- Set a default style for all your store components.
- Set a specific style for a store component type or for a single component from all available in your store.
Setting a default style for all store components
To set the default visual style for your entire store, you can utilize the style.json file located 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. With this approach, you can avoid the need to customize individual components on each page.
For example, we can set the default theme background color to blue by changing the semanticColors block’s base property:
_21"semanticColors": {_21 "background": {_21 "base": "#00BFFF",_21 "base--inverted": "#03044e",_21 "action-primary": "#0F3E99",_21 "action-secondary": "#eef3f7",_21 "emphasis": "#f71963",_21 "disabled": "#f2f4f5",_21 "success": "#8bc34a",_21 "success--faded": "#eafce3",_21 "danger": "#ff4c4c",_21 "danger--faded": "#ffe6e6",_21 "warning": "#ffb100",_21 "warning--faded": "#fff6e0",_21 "muted-1": "#727273",_21 "muted-2": "#979899",_21 "muted-3": "#cacbcc",_21 "muted-4": "#e3e4e6",_21 "muted-5": "#f2f4f5"_21 },_21}
For detailed instructions on customizing your theme, refer to the VTEX Styleguide, a comprehensive CSS framework that provides guidelines for defining component styles. It includes a detailed explanation of the styles.json file structure to assist you in your customization efforts.
Setting a specific style for a component type or a single component
The style.json file allows for more generic customization of your store's visual style and can be useful in most scenarios.
However, if you desire a more distinctive store identity, where certain components have unique styles different from the default theme, consider the following scenario: suppose your store primarily uses blue as its main color, but you want the text components (rendered by rich-text blocks) to appear in red. Now, let's say you only want one specific text component to be red while the rest remain in the default blue color. To achieve such advanced customization, you can override the default style defined in styles.json with CSS handles and use the blockClass prop for the last given example.
If you are interested in applying advanced customization in your store style, access the Using CSS Handles for store customization guide for more instructions.