diff --git a/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-5-definingstyles.md b/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-5-definingstyles.md index 08a051497b..1347911d44 100644 --- a/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-5-definingstyles.md +++ b/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-5-definingstyles.md @@ -3,21 +3,17 @@ title: "5. Defining styles" slug: "vtex-io-documentation-5-definingstyles" hidden: false createdAt: "2020-08-11T07:03:18.383Z" -updatedAt: "2024-08-09T14:30:52.548Z" +updatedAt: "2024-11-28T18:48:33.390Z" category: "Storefront Development" excerpt: "Learn how to set specific styles for your store components to enhance your store's user experience." -seeAlso: - - "/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme" --- -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. +Once you understand blocks and templates and how they render interface components, this guide explains how to customize them according to your store’s identity. The Store Theme allows you to: -- Set a default style for all your store components. -- Set a specific style for a store component type or a single component from all available in your store. +- [Set a default style for all your store components](#setting-a-default-style-for-all-store-components) +- [Set a specific style for a store component type or a single component](#setting-a-specific-style-for-a-store-component-type-or-a-single-component) ## Setting a default style for all store components @@ -57,6 +53,6 @@ For detailed instructions on customizing your theme, see the [VTEX Styleguide](h 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 want 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 display in red. Now, let's say you want only 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 example. +If you aim to create a more distinctive store identity with certain elements featuring unique styles that diverge from the default theme, consider this scenario: Imagine your store primarily uses blue as its main color, but you wish for the text components (created by `rich-text` blocks) to appear in red. Now, if your goal is 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 accomplished using CSS handles and the `blockClass` prop for the final example. -If you are interested in applying advanced customization to your store style, see the guide [**Using CSS Handles for store customization**](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization/) for more instructions. +To apply advanced customization in your store style, see the guide [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization/).