This article guides you on creating and configuring a website at for a storefront using data from VTEX ecommerce platform.

TL;DR: To connect to VTEX you need to change vtex app configuration at{site}/library?type=apps

Video: Watch the content of this article here


  1. Prerequisites
  2. Creating the website
  3. Setting up the Public store URL
  4. Connecting to VTEX
  5. Adding your collections to your website.
  6. Troubleshooting


Creating the website

In case you already have a website at, advance to the next section. Follow the steps in this guide otherwise.

Make sure your site was created based on the Storefront-Vtex template below

Creating a website in

Setting up the Public store URL

Deco commerce template currently proxies VTEX's own checkout and my-account services. This means that your final user will NOT be redirected to any other domain when checking out. For instance, let's say, before any migration to deco, your store is hosted on and the checkout url is After migrating to deco, your store will continue being served on and your checkout url will still be

Currently, VTEX does not expose its UI services through a public URL on the internet. For this reason, we need a secondary URL for enabling proxying checkout and my-account services. Following our example above, create a new subdomain, let's say and point it to VTEX following this guide. After that, the will be the Public store URL required on the next step

The final architecture of the setup is: image

Important: When creating a secondary URL, you should add a <meta name="robots" content="noindex"> in the <head> after Go Live to avoid unwanted indexing.

Connecting to VTEX

To connect to your VTEX account:

  1. Access your site's administrative panel at Deco Admin.

  2. On the topbar, select blocks

  3. Choose the Apps tab

  4. Select the vtex app. You should see something like:

  5. Change the account configuration from bravtexfashionstore to your VTEX account name

  6. Set the Public store URL.

  7. Click on Save and then Publish.

🎉 Congratulations, you have setup the VTEX integration. To ensure the integration is working properly, keep reading and create a reuseable collection block.

Adding your collections to your website.

After the VTEX setup is complete, try adding a shelf to your webiste.

  1. Access your site's administrative panel at Deco Admin.

  2. On the topbar, select blocks

  3. Select the block /Products/ProductShelf.tsx and click on the + button

  4. On the products field, select any VTEX integration (legacy or Intelligent Search).

  5. Fill the Collection ID with a valid collection, e.g. 139

  6. Fill the count attribute with the number of products to display, let's say 6.

  7. Now, on the top right corner, click on Create and name it, e.g. Collection 139

  8. On the top right corner click on Publish.

  9. You can now drag&drop the block Collection 139 in any page.



Common issues when connecting to VTEX arises from:

  1. VTEX Intelligent Search (IS) is not installed on the account If you are not sure IS is installed in your account, please use the traditional (VTEX Catalog) loaders. Beware some features of Fashion starter like autocomplete depend on Intelligent Search.

  2. Wrong salesChannel/defaultLocale setup. Setting up the wrong salesChannel/defaultLocale may lead to the wrong products/prices being displayed. To find the correct values:

    1. With Dev Tools open, go to Application or Storage.
    2. On the left side, select the Cookies item and select the store's URL.
    3. Look for Cookie vtex_segment and copy its value,.
    4. Go to the JWT website and paste the value.
    5. Check the returned JSON. The channel field brings the salesChannel value and the cultureInfo field brings the defaultLocale.

    In most cases the salesChannel is 1

  3. Wrong accountName setup. To figure out the right accountName:

    1. Access your current store URL, e.g.:
    2. Right-click and select Inspect.
    3. With Dev Tools open, type Ctrl + F to open the search within the HTML.
    4. Search for vtexassets or vteximg (depending on the store's current CMS).
    5. The accountName will be in URLs in the format: {accountName} or {accountName}

    Example at store

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading