In Store Framerwork, a Store Theme is a storefront template that shapes your store's appearance and functionality. It determines how each element of your store will appear on the storefront.
Project structure
Although the structure of a Store Theme project may vary depending on its specific settings, certain folders and files are essential for the theme to function properly, such as the following:
/store
folder: Contains the blocks, interfaces, and routes necessary to build the storefront./styles
folder: Contains the store’s visual elements, such as colors, typography, and other style-related settings.manifest.json
file: Contains the metadata about the app, including vendor, name, version, dependencies, and builders.
You must have at least the
store
andstyles
builders configured within themanifest.json
file for your project to work properly.
Store Themes are VTEX IO apps that inherently use the store
builder. This builder allows you to link routes to templates, which are composed of a series of other reusable components and layout blocks, contained in the /store
folder.
To export the CSS configurations contained in the /styles
folder for your Store Framework blocks, Store Themes leverage the styles
builder. This builder helps set a cohesive style for all components in your Store Theme app.
For more information about available builders, check this List of Builders.
Development tools
The VTEX IO platform facilitates the development of Store Themes by providing tools such as VTEX IO CLI and workspaces for developers, as well as content management with Site Editor for business users.
Store Themes can be customized by adding native VTEX IO Apps or developing custom React components to meet business needs and enhance user experience.
Below are some available themes to get started:
Available themes
Minimum Boilerplate Theme
The Minimum Boilerplate Theme serves as a basic starting point for developers to create new storefronts on the VTEX IO platform. It offers a basic and functional structure that can be customized and expanded based on the specific needs of the project.
The Minimum Boilerplate Theme should be used only when you want to start a new store theme without any pre-set configurations, as is the case with the Store Theme.
Learn how to set this boilerplate in the Minimum Boilerplate Theme documentation.
Store Theme
The Store Theme is a boilerplate with pre-set configurations to create a store using VTEX IO.
![{"base64":" ","img":{"width":1886,"height":858,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":10033997,"url":"https://user-images.githubusercontent.com/67270558/169829563-6ac39b89-7c9e-4d5e-a2ac-c2139e70e34a.gif"}}](https://user-images.githubusercontent.com/67270558/169829563-6ac39b89-7c9e-4d5e-a2ac-c2139e70e34a.gif)
This boilerplate gives you a ready-to-go default storefront structure, including:
- Pre-configured layouts: A variety of files organized in different folders within the
/store/blocks
folder. These files combine our native components to create templates for different parts of the store, such as the homepage, product details page, and order-placed page. - Default styles: A customizable set of styles that helps you achieve a professional look and feel without extensive custom styling.
- Sitemap: An example of a Sitemap use case.
Learn how to start a project with this boilerplate in the Getting Started section.