Best Practices

VTex Speed Configuration

Reading Time: 3 minutes

VTex is a SAAS E-commerce platform that has tons of modules that help out with the implementation of your site. For the front-end there is the CMS (Content Management System) module which is really useful. Here you can modify anything from HTML templates, CSS, Javascript, banners, etc. There are many ways you can modify its front-end UI components, but the simplest way to edit your storefront UI elements is using a handy tool called VTex Speed.

VTex Speed really helps out in the development of your store before having to send your modifications to a staging/production environment. This really cuts down time in many different ways.


  • Seeing modifications instantly
  • Easy to use
  • Less Compilation
  • Coffee Compilation
  • CSS minification


  • Images are not rendered
  • CSS and JS file needs to exist before modification
  • Can’t modify HTML


First thing is first, clone the repo in the directory of your choice:
Download repo -> here

Then modify your package.json file like so:


  "name": "vtex-speed",
  "accountName": "******",
  "version": "4.0.0",
  "secureUrl": true,
  "readmeFilename": "",
  "description": "******",
  "scripts": {
    "start": "grunt"
  "devDependencies": {
    "connect-http-please": "^0.3.0",
    "grunt": "~1.0.1",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-coffee": "^1.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-less": "^1.3.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "~1.0.0",
    "grunt-spritesmith": "^6.3.1",
    "jpegtran-bin": "^3.0.4",
    "proxy-middleware": "^0.15.0",
    "serve-static": "^1.10.0"
  "repository": {
    "type": "git",
    "url": "git://"
  "keywords": [
  "license": "MIT"

Make sure you insert the accountName of the store you are modifying (The accounName isn’t there by default so you have to add it). Also, you need to have the latest version of these dependencies. Try and have something like I do in the devDependencies block.

Next step is to go to the CMS of your store and modify the protocol of you store.
Open the CMS:

After You will get a form like this:

After changing the protocol:
– run npm install --verbose (This will install all dependencies)
– run sudo npm start (This will start the server)

Done! Now just login to your local VTex account and you are good to go.

Steps to modify css file.

In order to modify your CSS/JS files using VTex Speed, first you need to add the css file to VTex.
CMS/Files Manager/CSS or CMS/Files Manager/JS

Once you have your file uploaded then you have to add to import your file in the <head> of your HTML
<link href="/arquivos/name_of_your_file.css?nocache=1.0.0" type="text/css" rel="stylesheet" />.

Now in VTex Speed you can start modifying this file you just uploaded. To do so, create the same file you did but with the extension .less. Don’t worry VTex Speed uses grunt in order to compile your files from Less to CSS, and you are done! Every time you save, the site will automatically reload and load the new changes.

Uploading changes to VTex

When you are done making your changes you can use the Files manager in the CMS to upload the file. Make sure you upload CSS file in the /build directory. Done!

Searching with Ransack in Ruby on Rails
Advanced Level
Clearing the air: How to test new features with Rails?
Best Practices
De Código, Café Y Cervezas 03 – ReactJS + AngularJS
  • mediacare2016

    Hello! thx for that amazing article! i try to do something with my .js but i see no changes, if not its coffescript not working, can u help me? 😀

  • mediacare2016

    Hello! thx for that amazing article! i try to do something with my .js but i see no changes, if not its coffescript not working, can u help me? 😀 im sorry to post two times i delete this comments and i dont want to

    • Alberto Mendoza

      Hey @mediacare2016:disqus have you checked that you are editing the right file in the your VTex local? I would check if the file is already uploaded to VTex using the CMS system, and then make sure that that file exists in your VTex local. That way VTex Speed pulls the file from the main site and you can see the results instantly in VTex speed.

Copy link
Powered by Social Snap