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:
-
Developed your app. Please refer to the Developing an app guide for more information.
-
Registered as VTEX App Store developer.
Step by step
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.
- Create a new folder named
public
in the root directory of your project. - Inside the
public
folder, create themetadata
folder. Also, create theimages
,licenses
andmessages
folders insidemetadata
. - Create the following folders and files for the respectives directories.
_16public_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
- 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:
_10images_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'smanifest.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.