App Development

App Development
Getting StartedStorefront
3. Setting your store's theme

A store theme is every front end related to your website, from UI components to any applied customization.

For you to start using Store Framework, you therefore need to install the Store Theme app - the VTEX IO application responsible for defining your store's front using our framework.

The Store Theme app will define your store's theme by:

  • Declaring templates, namely configuring and mixing components for each of your store's page.
  • Declaring styles, namely configuring primary and secondary colors, typography scales and spacing, etc.

Step 1 - Installing the Store Theme app

Before installing the Store Theme app, make sure your VTEX account has the Store Edition app installed, as recommended in this track's second step. Otherwise, you won't be able to successfully implement the VTEX Store Framework.

The VTEX IO CLI offers the vtex init command which can quickly copy the Store Theme app repository to your computer, where it may be configured and fine-tuned according to your business needs.

  1. Using your terminal, navigate to an already existing local files directory where you want Store Theme to be copied to:
cd {example folder}

Note that {example folder} should be replaced with the folder name where the Store Theme is going to be copied to.

  1. Run the vtex init command:
vtex init
  1. Select the store option and confirm that you want to download the theme folder to the destination you just chose:


Once you select the store option, VTEX IO CLI will ask you if you want to continue to create the new folder, by typing y it will clone a minimum-boilerplate-theme to your folder.

  1. On the manifest.json file, replace the predefined vendor value with the account name of the store that you are developing so that you'll be able to correctly publish its theme app later on.

Step 2 - Understanding the Store Theme's structure

Once you select the store option, VTEX IO CLI will create a copy of the Store Theme app in your local files, allowing you to work on it as you please.

Open the newly created Store Theme folder in your local files using any code editor, such as Visual Studio Code. You can also use your terminal directly to achieve the same result:

cd store

To better understand the app's structure, let's have a closer look at its files and folders:

{"base64":"  ","img":{"width":454,"height":754,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":66048,"url":""}}

  • manifest.json - App's main file. It stores important metadata, such as the app's vendor, name, version, dependencies and builders.
  • store - Folder responsible for defining the store's templates. It's where you configure each page's components and properties.
  • styles: folder responsible for setting the store's visual theme. It's where you configure colors, typography and anything related to the store's style.

Taking a closer look in the store and styles folder and their files, you'll notice code already being declared there. The reason behind this is that the Store Theme app that was copied to your local machine is already defining a basic theme for your store, declaring default components and styles to help you build your desired store front end.

Step 3 - Linking your local code to the VTEX IO platform

Since Store Theme already declares a default theme, you can check your website's front end in real time once the app is installed.

You'll need to sync your local files, where your Store Theme app code was copied and is now stored, with the VTEX IO platform (responsible for supporting the VTEX Store Framework operation). This is achieved by running the vtex link command in your terminal:

vtex link

You can run vtex whoami in your terminal to make sure that you're logged into the right VTEX account and using the Development workspace you've just created. Otherwise, the link won't work.

{"base64":"  ","img":{"width":1519,"height":468,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":415780,"url":""}}

By successfully running this command in your terminal, your local code is sent to the VTEX IO cloud-native infrastructure and it is reflected in the development workspace you are currently working in.

Step 4 - Checking out your new store theme

Navigate to your store's website by accessing https://{workspaceName}--{account}, replacing the brackets and their values with your Development workspace and VTEX account names.

After logging in, you should already see the new store theme rendered in your store:

{"base64":"  ","img":{"width":2852,"height":1490,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1009540,"url":""}}

Now that your store is online and using a default theme code, we can build its identity by configuring the Store Theme app according to your store's needs: it's time to change templates and customize styles!

Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Suggest edits (Github)
2. Configuring your account
4. Configuring templates
See also
4. Configuring templates
Storefront Development
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page