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.