Checkout UI Settings

The Checkout UI Settings app allows you to customize your store's Checkout UI through the terminal and the VTEX IO CLI.

The main advantage of using the app instead of the store's Admin for this customization is that your Checkout scripts will behave as configurations for platform apps.

In practice, it means that Checkout UI Settings allows A/B testing in your store's scripts, in addition to the possibility of quick rollbacks for old scripts (that is, scripts from older versions of the Checkout UI Settings app).

1. Using your terminal and the VTEX IO CLI, log into the desired account;
2. Run vtex list to access the list of apps that are already installed on the account you're working on. If the Checkout UI Settings option already exists, you can skip to step 7 of this step-by-step;
3. If the Checkout UI Settings app was not found in the list of installed apps, run the vtex init command;
4. Select the checkout-ui-settings option;
5. Open the checkout-ui-settings app in whichever code editor you prefer;
6. In the manifest.json file, change the predefined default value vendor to the name of the account in which you want to install the app;
7. In the checkout-ui-custom folder, create the files in which the scripts will be included, just as you would do in the Admin interface. Notice that a few default files already exist in the checkout-ui-custom folder; you can use these files to insert the scripts;
8. According to the Checkout customization you are looking for, open the most suitable file and insert the desired scripts;
9. Save your changes. Then, publish the app's new version;
10. Still logged into the desired account, create a production workspace and install the app;
11. If everything is working as expected, promote the workspace to master.

Once the app is deployed and installed in the account, all scripts contained in it will be automatically linked to your store and used to build the templates to customize your Checkout.

Scripts used by Checkout are linked to the Checkout UI Settings version that's installed in your store. If a prior app version was already installed and you want to change the scripts linked to it, you'll need to repeat the already existing code and then publish the app's new version containing the changes you just made. Housekeeper is responsible for updating app versions in the accounts in which it is installed.

If you are using the Legacy CMS Portal: You can create a workspace and install the app there. While using the app, you will need to apply your changes and copy and paste the content of the files to your portal.