Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkStore Theme
Store Theme

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 and styles builders configured within the manifest.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"}}

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.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
See also
Vtex.store Sitemap
Apps
Manifest
App Development
Contributors
1
Photo of the contributor
+ 1 contributors
On this page