Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EDU-13252 - Defining styles #1611

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

EDU-13252 - Defining styles #1611

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions ...-io/Getting-Started/getting-started-3/vtex-io-documentation-5-definingstyles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[markdownlint] reported by reviewdog 🐶
MD051/link-fragments Link fragments should be valid [Context: "Set a specific style for a store component type or a single component"]


## Setting a default style for all store components

Expand Down Expand Up @@ -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/).