Getting Started

A template is a page-level combination of components that addresses a recurrent interface of the VTEX Admin. It can be used as an inspiration or as a starting point to derive a more business-specific solution.

Available Templates

Check out the available templates:

Listing page

View

Merchants scan, sort, filter, compare, and take action on items of a specific object type, such as products, or record type, such as orders.

Form page

View

Merchants make changes and submit data to create objects or edit existing ones such as products, sellers or promotions.

Details page

Soon

Merchants dive deep into an object or record's information, unlocking specific data and actions.

Settings page

Soon

Merchants set up their ecommerce configurations in a unified experience.

FAQ

Why should I use a template?

Templates work as a tool to ensure consistency across the VTEX Admin and thus provide a great experience for the merchant. For designers and developers, templates make it easier to understand the patterns to structure recurrent page types and save time when designing or implementing.

Using templates can help achieve the following outcomes:

• Migrate pages to Admin UI faster.
• Test new features with more agility.
• Reduce time to launch.

How can I start my project from a template?

Templates are pre-configured starting kits made available as:

• Reusable Figma files, with the states, interactions, and messages.
• Reusable boilerplate code, with the dependencies, files, and folder structure already set up.

Designers:

Choose the template that fits your use case:


• Listing page
• Form page
• Details (coming soon)
• Settings (coming soon)
Read the template's documentation.
Create a copy of the template's Figma file, so you can get started with your own version.
Make the desired changes to content and components. Make sure you access our components' documentation to learn more about each one.
Share your version of the prototype with the developers in your team.

Developers:

If there is a designer on your team, reach out to them to get the finalized interface. If not, choose the template that fits your use case.


• Listing page
• Form page
• Details (coming soon)
• Settings (coming soon)
Read our onboarding documentation to learn more about development with Admin UI.

Are templates mandatory to design new pages with Admin UI?

We understand that ecommerce operations come with a diversity of scenarios and use cases, so using the templates is not mandatory. The goal of templates is to speed up your implementation of Admin UI, based on the most frequent pages in the platform.

What if my use case does not fit into a template?

The templates cover the most recurrent interfaces, but some edge cases might occur. If you find a scenario that is not covered by our templates, reach out to us.