Documentation
Feedback
Guides
App Development

App Development
VTEX App StorePreparing your app for distribution
Preparing your app for distribution

This guide will teach you how to prepare your app for distribution in the VTEX App Store and let merchants benefit from your solution.

Notice that every app goes through a homologation process before being available at the VTEX App Store. During this process, our team ensures the apps follow the quality, viability, and usability standards presented in the App Store Guidelines. Hence, be sure to review these guidelines while you develop and prepare your app for distribution.

Before you begin

Before proceeding, make sure you have already:

  1. Developed your app. Please refer to the Developing an app guide for more information.

  2. Registered as VTEX App Store developer.

Instructions

Step 1 - Preparing your app billing options

After developing your app, you must establish whether your app will be charged or not and whether it will be public or private on the VTEX IO platform. To set up these options, please refer to the Setting your app's billing model guide. Also, check the App Monetization guidelines for more information on this topic.

Step 2 - Setting the public folder

After establishing your app's billing model, you must set up the marketing assets (e.g., icons, images, and descriptions) that will compose your app's page on the VTEX App Store. During this step, please refer to our Marketing guidelines.

An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-page-example.png

  1. Create a new folder named public in the root directory of your project.
  2. Inside the public folder, create the metadata folder. Also, create the images, licenses and messages folders inside metadata.
  3. Create the following folders and files for the respectives directories.

_16
public
_16
metadata
_16
images
_16
icon.png
_16
screenshots
_16
desktop
_16
_16
mobile
_16
licenses
_16
en-US.md
_16
es-AR.md
_16
pt-BR.md
_16
messages
_16
en-US.json
_16
es-AR.json
_16
pt-BR.json

  1. Create the files and folders needed to compose your App Page according to the following:

The images folder

The images folder is where you store the images of your app's page. They may include the app’s icon and screenshots screenshots showing how the application behaves in the Admin or the storefront. Inside this folder, you must have:


_10
images
_10
icon.png
_10
screenshots
_10
desktop
_10
{add-a-file}.png
_10
{add-a-file}.png
_10
_10
mobile
_10
{add-a-file}.png
_10
{add-a-file}.png

  • icon.png - A file of the app icon.
  • screenshots - A folder containing the images that will be presented in the carousel of the App Page.

Notice that you can use the desktop and mobile subfolders to store device-specific images. For example: public/metadata/images/screenshots/mobile and public/metadata/images/screenshots/desktop.

The licenses folder

The licenses folder contains the terms and conditions of your app. Licenses are responsible for establishing the direct business relationship between the vendor and the retailer that installs the app.

Inside the licenses folder, create the files named over locale codes to provide your app's terms and conditions in different languages (e.g., public/metadata/licenses/en-US.md, public/metadata/licenses/es-AR.md, public/metadata/licenses/pt-BR.md).

The messages folder

The messages folder contains textual information regarding your app, such as its name and list of features, in different languages. See below the base template for structuring this file:


_23
{
_23
"name": "Order Tracker",
_23
"headline": "Headline Order Tracker.",
_23
"overview": "Tracks all orders\\nSecond line\\n\\nThird line\\n\\n\\n\\n\\nFourth line",
_23
"features": [
_23
"First feature",
_23
"Second feature",
_23
"Third feature",
_23
"Fourth feature"
_23
],
_23
"additionalinformation": "Additional information\\nYou can also write new lines here\\n\\n\\nIt should work just like the overview",
_23
"video": "https://www.youtube.com/embed/645ASYhJS-Q",
_23
"websiteURL": "https://www.website.com/en",
_23
"support": {
_23
"email": "a@bcd.io",
_23
"url": "www....",
_23
"phone": "+1...."
_23
},
_23
"metricDescription": {
_23
"track": "English description for metric track",
_23
"notify": "English description for metric notify en-US"
_23
}
_23
}

  • name: App name, limited to 26 characters.
  • headline: Short description of the main functionality of your application. The field has a 120 character limit.
  • overview: Detailed description of your app’s main purposes and benefits. There is no character limit.
  • features: List of your app’s main features and highlights.
  • websiteURL: Link to the app's landing page or your corporate website.
  • support: Link to the support channel. It can be an email, a ticket portal, or a phone number.
  • additionalinformation: Additional details and disclaimers related to your app.
  • video: URL of a video featuring the app's behavior.
  • metricDescription: Billing options' metrics (declared in the app's manifest.json file). This field is required only for apps whose pricing is based on one or more metrics. Please do not fill in this field if this is not the case.

The files in this folder must be available in English, Spanish, and Portuguese in the following paths: public/metadata/messages/en-US.json, public/metadata/messages/es-AR.json and public/metadata/messages/pt-BR.json, respectively.

Step 3 - Publishing and deploying your app on the VTEX IO development platform

If you are comfortable with your new app and marketing content, follow the Making your new app version publicly available guide to deploy your changes.

After deploying your app's latest version, follow the Submitting your app to the VTEX App Store guide.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page