Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStore
1. Configuring external DNS
In this guide, you will learn how to configure external domains for your FastStore and VTEX website. The process involves the following steps:
  • Setting up your external DNS provider to point your custom domain to your VTEX website. Custom domains can be purchased from any domain registration platform.
  • Configuring your custom domains in VTEX Account Settings.
  • Associating your custom domains with your FastStore project.
As soon as you complete this guide, your FastStore website will be accessible via a custom domain, and VTEX Checkout will also be operational. You will then be ready to continue configuring other VTEX solutions, such as Order Placed, Login, and My Account.

Before you begin

Instructions

If you still need to configure other VTEX solutions, please use a fictitious domain name while taking the following steps. Once you have set up all the desired integrations, repeat this guide using your final domain to make your website publicly available to end users.

Step 1 - Creating DNS records

  1. Access your domain provider's website.
  2. Create a CNAME DNS record for your www domain (example: www.mystore.com) that points to www.{rootDomain}.cdn.vtex.com (example: www.mystore.com.cdn.vtex.com). Check your domain provider's documentation for more information.
  3. Now, create a CNAME record for the secure subdomain (example: secure.mystore.com) that points to secure.{rootDomain}.cdn.vtex.com (example: secure.mystore.com.cdn.vtex.com). The Checkout, Order Placed, Login, and My Account pages will use this subdomain.
The configured addresses may not be immediately available to everyone due to DNS propagation, which can take 24-48 hours to complete.

Step 2 - Putting your account into production

To proceed, make sure your store is active and in production by following the steps in the guide Putting your account into production.

Step 3 - Configuring domains in VTEX Account Settings

Now, you must set up your VTEX account to use the DNS records created in the previous step.
For more information about store domain configuration, see the Configuring the store domain guide.
  1. On VTEX Admin, click your profile avatar, which can be identified by the first letter of your email address.
  2. Access Account Settings > Account.
  3. Go to the Stores tab and in the Hosts table, click the menu () and choose Edit.
  4. In the Hosts field, enter your main domain (example: www.mystore.com) to the list.
  5. Click Add.
  6. Add the secure subdomain (example: secure.mystore.com) to the list.
    {"base64":"  ","img":{"width":1210,"height":372,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17404,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/account-settings-new___2e13bee3041e8505922a737b94652ca6.png"}}
  7. Add the root domain as well; for example, if your domain is www.mystore.com, add mystore.com. For a complete setup, you must add three hosts for each domain:
    • www.mystore.com (store domain)
    • mystore.com (root domain)
    • secure.mystore.com (checkout/myaccount subdomain)
To ensure a seamless checkout experience, all subdomains used by your store must be added to the host list. For more information, see the Adding subdomains to the host list section.
  1. Click the Save button.

Step 4 - Associating your custom domain with your FastStore project

Back to your FastStore project, you must also configure your project to point to the right addresses and domains.
  1. Open your FastStore project in any code editor of your preference.
  2. Open the discovery.config.js file.
  3. Update the storeUrl, secureSubdomain, checkoutUrl, loginUrl, and accountUrl properties as in the following, replacing the values between curly brackets according to your scenario:
    • storeUrl: https://{subdomain}.{rootDomain}
    • secureSubdomain: https://{subdomain}.{rootDomain}
    • checkoutUrl: https://{subdomain}.{rootDomain}/checkout
    • loginUrl: https://{subdomain}.{rootDomain}/api/io/login
    • accountUrl: https://{subdomain}.{rootDomain}/api/io/account
Take the following example of how this code block would look after configuring a store with the www.mystore.com domain and secure subdomain:
/discovery.config.js

_15
...
_15
_15
// Default channel
_15
channel: '1',
_15
_15
+ // Production URLs
_15
+ storeUrl: 'https://www.mystore.com',
_15
+ secureSubdomain: 'https://secure.mystore.com',
_15
+ checkoutUrl: 'https://secure.mystore.com/checkout',
_15
+ loginUrl: 'https://secure.mystore.com/api/io/login',
_15
+ accountUrl: 'https://secure.mystore.com/api/io/account',
_15
_15
// Lighthouse CI
_15
lighthouse: {
_15
...

  1. Save your changes.
  2. Open the vtex.env file.
  3. Add the SITE_HOST key with the main domain specified in Configuring domains in VTEX Account Settings as the value.
    /vtex.env

    _10
    + SITE_HOST=www.mystore.com

  4. Save your changes.
  5. Open a Pull Request, commit your changes, and deploy them to main.
For stores with prefixed domains, add the subDomainPrefix property to discovery.config.js to ensure product visibility in the secured environment. For more information, see the Adding subDomainPrefix for prefixed domains section.

Step 5 - Configuring the CDN workflow (Only for new go-lives)

If your FastStore website is going live for the first time, open a ticket with VTEX Support and specify that you need to configure the CDN workflow for your store's secure and main domains.
Include the following information in your ticket:
  • Your VTEX account name.
  • The secure and main domains of your store.
The VTEX team will evaluate your request and take the necessary actions to configure your account's CDN workflow.

Step 6 - Adding your store domain to FastStore WebOps

The next step is to add your store’s domain in the Settings tab of the FastStore WebOps Dashboard.
WebOps domain configuration always takes priority over any settings in discovery.config.js. It’s recommended that you manage all domain configurations through WebOps to centralize all domain settings into a single source.
  1. Navigate to the Settings tab.
  2. In the Host field, choose your store’s domain (example: www.mystore.com) from the dropdown list.
  3. Click Add.
    {"base64":"  ","img":{"width":736,"height":553,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":33936,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14746-update-golive-webops/docs/faststore/docs/go-live/adding-host-webops.png"}}

Step 7 - Monitoring the new deployment

After adding your domain to WebOps, a new deployment will be triggered automatically. Before proceeding to the next step, monitor the deployment progress in the WebOps dashboard until it's fully completed and has the status Success.
If the domain setting is incorrect, the deployment will receive the status Failed. Learn more about statuses and how to visualize deployment details in Production deploys.
Then, verify that your domain is properly configured in the WebOps environment:
  1. Access your WebOps dashboard.
  2. Navigate to the Settings tab.
  3. Confirm your domain appears in the Current Domains list.
    {"base64":"  ","img":{"width":733,"height":613,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43268,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@EDU-14746-update-golive-webops/docs/faststore/docs/go-live/current-domains.png"}}

Step 8 - Migrating the domain

To migrate your domain, open a ticket to VTEX support, by following these instructions:
  1. Open a ticket to VTEX support requesting a domain migration for your FastStore WebOps implementation. Please include the following information:
    • VTEX account name
    • Store’s domain (example: www.mystore.com)
    • Secure domain (example: secure.mystore.com)
    • Confirmation that you’ve completed all previous steps in this guide.
  2. Wait for the VTEX team to process your request and complete the domain migration.
  3. Once the migration is complete, test your store to ensure everything is working properly. If you encounter any issues, inform us through the same ticket you used to request the migration of your domain.

Configuring custom domain prefixes

To ensure your store operates efficiently, it's important to configure custom domain prefixes correctly for both checkout and secure product viewing. There are some scenarios where you need to configure custom domain prefixes:

Adding subdomains to the host list

To ensure a seamless checkout experience, all subdomains used by your store must be added to the host list. If the store operates without the www. domain, you must include both the www. and non-www. domains in the hosts' list.
Stores with custom prefixes, like shop.mystore.com, need both the prefix and main domain (shop.mystore.com and mystore.com) added. This guarantees that the checkout process works seamlessly when customers access the store with or without www. or any other custom prefix.

Adding subDomainPrefix for prefixed domains

To ensure customers can view products in the secured environment on your store's final domain, add the subDomainPrefix property to the dicovery.config.js file. The subDomainPrefix property maintains compatibility between cookies set in the storefront and the secure environment.
To add the subDomainPrefix property, follow these steps:
  1. Open your FastStore project in a code editor of your preference.
  2. Open the discovery.config.js file.
  3. Navigate to the api object and add the following:

    _10
    // Platform specific configs for API
    _10
    api: {
    _10
    ...
    _10
    subDomainPrefix: ['xxx']
    _10
    },

    Replace 'xxx' from subDomainPrefix property with the actual subdomain prefix (example: ['b2b']). If you have multiple prefixes, add them as an array of strings (example: ['b2b', 'dev']).
  4. Save your changes.
  5. Open a Pull Request, commit your changes, and deploy them to main.
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page