Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store Framework
Styling

Discover how to customize your store layout with Store Framework.

Styling directly impacts user experience and brand perception. A well-styled store attracts visitors and keeps them engaged, encouraging navigation and interaction with your site.

In Store Framework, styling is flexible and customizable, allowing you to create a visual identity that aligns with your brand. Whether you need to make minor adjustments or comprehensive changes, Store Framework’s tools enable you to tailor each visual element to meet specific business needs.

In this section, you will learn how to leverage our styling tools to customize your store.

Before you begin

Develop your Store Theme

Make sure your store has a Store Theme developed following the Getting Started tutorial.

Check the builders

Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version vtex.builder-hub@0.293.4 installed. Also, you need to specify them in the app's manifest.json file. Learn more in Builders.

You must have at least the following builders configured:

  • store builder: Enables the development of Store Framework storefronts.
  • styles builder: Exports CSS configurations for Store Framework blocks.

Create store pages

Develop your store pages by following the Building pages guides.

Essential concepts

To better understand the styling process in Store Framework, you should know the concept of CSS Handle, which is a CSS class that maps to an HTML element. It serves as a layout-building assistant for your store, allowing you to customize any block by applying CSS classes within the Store Theme’s code. Therefore, CSS Handles streamline the layout customization of your store by targeting specific elements in your custom CSS.

Each VTEX component is preconfigured with unique CSS Handles, allowing you to apply styles to specific parts of a component without changing its structure.

Guides in this section

Using CSS handles for store customizations
Target and style specific elements within your store using CSS Handles.
Contributing with new CSS Handles
Enhance the styling options available for VTEX IO components.
Customizing your store's icons
Replace or customize the icons used across your store.
Customizing your store’s typography
Adjust the typography in your store to create a cohesive design.
Interactively inspecting storefront blocks
Inspect and identify block elements in your store for targeted customization.
Using the Markers prop to customize a block's message
Customize the messaging and appearance of blocks in your store using the markers prop.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page