The Portal is used to render Checkout (cart, personal data, address, payment method) and OrderPlaced (buying confirmation screen) screens. In this article it will be presented how to register and configure the resources of the Portal.

The Checkout module in the Admin, displays the sites that are registered for your account. Through it, it is also possible to create a new website, edit and configure information about existing websites.

Each registered site corresponds to a multidomain (if the account has contracted multidomains). For accounts that do not use multidomains, it is not necessary to register more than one site in this module. Learn more at Create a multistore/multidomain.

1. In the VTEX Admin, go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
2. Click on the New Site button.
3. Fill in the following fields:

• Name: enter here the desired name for the site.
• Store: fill in with the account name, which can be found at Account Settings > Account Management > Accounts > Account name.

4. Click Save.

Creation of the new website:

Account Name Access:

1. In the VTEX Admin, go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
2. Click on the icon of the desired website.
3. By accessing the blue options menu located at the top of the page, you can perform the following actions:
   • WebSites: return to the home screen of the registered websites.
   • Edit: edit the "Name" and "Store".
   • Checkout: perform basic settings, such as Shipping Calculation, Google Tag Manager, among others.
   • Orders: set up cancellation and order replacement reasons.
   • Code: display and create website related templates.
   • Pages: display existing pages for the website.

Example of existing sites in the same account:

Example of available pages for a website:

If you want to delete a site, click on the delete button for the desired site, as in the example below:

We'll now have a more in-depth look at the following options menu settings: Code and Checkout, being responsible for configuring the pages checkout and order placed pages.

1. In the VTEX Admin, go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
2. Click on the icon of the desired website.
3. In the blue options menu at the top of the page, click Checkout and configure the fields below as needed:

• Website Title: if informed, will be displayed in the title of the cart, checkout and confirmed order pages.
• Google Tag Manager: enter the ID (in GTM-XXXX format) of your container Google Tag Manager, if you want to use it automatically.
• Google Maps API Key: the key is used in two situations: when the Delivery function based on geographic coordinates is active or if the option to Pickup in store.
• Calculation of Delivery Options (Beta and Stable): select whether the freight calculation will be done from the spreadsheet or by geolocation.

1. In the VTEX Admin, go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
2. Click on the icon of the desired website.
3. In the blue options menu located at the top of the page, click on Code. A menu of Files and Templates will be displayed on the right with all the templates for your site, configured by the system.

Example:

You can customize the pages of your website, in addition to configuring other functionality through HTML, by accessing the Files and Templates menu.

The HTML code filled in the template corresponds to what will appear on the checkout and order placed pages of your site.

Of the available templates, the only ones that cannot be changed are vtex-checkout and vtex-orderPlaced. These correspond to the native functioning of the platform, rendering the main content of the checkout and order placed pages.

Javascripts included directly in any Portal templates will be ignored by the platform. The reason behind this is that only scripts that originated in Google Tag Manager are accepted by SmartCheckout. aTherefore, whenever you need to customize something (or even to insert specific tags) using javascript, do this through Google Tag Manager.

Below are examples of how the codes present in the checkout-header, checkout-footer, vtex-checkout and vtex-orderPlaced templates can be filled and their corresponding visualization in the website:

• Template checkout-header and website page header:

• Template checkout-footer and website page footer:

• Template vtex-checkout and cart page at Checkout:

• Template vtex-orderPlaced and confirmed order page:

Multi-domain accounts can use just one site if no specifics configuration requirements are present. This is possible because, even tough just one site is used, the platform includes a class in the "body" tag, according to the accessed domain. Therefore, applying different layouts to the same site is made simple.

An example of a "body" tag that's inserted according to the accessed domain: