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

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

Video: To watch the content of this article, click here

Summary

Prerequisites
Creating the website
Setting up the Public store URL
Connecting to VTEX
Adding your collections to your website.
Troubleshooting

Prerequisites

A deco webiste. Create one for free at https://deco.cx/admin.
A VTEX account (help).

Creating the website

In case you already have a website at deco.cx, 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

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 www.mystore.com and the checkout url is https://www.mystore.com/checkout. After migrating to deco, your store will continue being served on www.mystore.com and your checkout url will still be https://www.mystore.com/checkout.

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 proxy.mystore.com and point it to VTEX following this guide. After that, the proxy.mystore.com will be the Public store URL required on the next step

The final architecture of the setup is:

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:

Access your site's administrative panel at https://deco.cx/admin.
On the topbar, select blocks
Choose the Apps tab
Select the vtex app. You should see something like:
Change the account configuration from bravtexfashionstore to your VTEX account name
Set the Public store URL.
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.

Access your site's administrative panel at https://deco.cx/admin.
On the topbar, select blocks
Select the block /Products/ProductShelf.tsx and click on the + button
On the products field, select any VTEX integration (legacy or Intelligent Search).
Fill the Collection ID with a valid collection, e.g. 139
Fill the count attribute with the number of products to display, let's say 6.
Now, on the top right corner, click on Create and name it, e.g. Collection 139
On the top right corner click on Publish.
You can now drag&drop the block Collection 139 in any page.

Troubleshooting

Common issues when connecting to VTEX arises from:

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.
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 https://jwt.io 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
Wrong accountName setup. To figure out the right accountName:
1. Access your current store URL, e.g.: https://www.mystore.com.br.
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}.vtexassets.com or {accountName}.vteximg.com.br.

VTEX