Assembly Options

This app is available only for stores developed in VTEX IO.

At VTEX, Assembly Options consist on creating attachments for complex scenarios, where it is necessary to offer various combinations of SKUs, quantities, additional items and costs.

The Assembly Options app provides an interface on VTEX Admin to create and manage product customization options available to customers in a specific store. This experience aims to offer a simple and easy-to-use alternative to the manual configuration available through Catalog > Attachments using a certain attachment syntax.

Before you begin

To use Assembly Options, you must first install and configure Product Customizer in your store.

We also recommend reading our Assembly Options documentation for more information on this feature.

Installation

When this app is installed in a seller account, the Assembly Option is displayed at checkout. To display it on the product page, you must install the app in a marketplace account.

You can install the app for free in the VTEX App Store or using the VTEX IO CLI, by running vtex install vtex.admin-assembly-options@2.x in your terminal.

After the installation, you can find the app's interface on VTEX Admin, by accessing Products > Assembly options or by going directly to the URL {accountName}.myvtex.com/admin/assembly-options/, replacing {accountName} with your VTEX account.

This app installs Assembly Options GraphQL as a dependency. Learn more about it by accessing the assembly-options-graphql repository.

How the app works

The app inserts a new menu in the VTEX Admin, which you can access on Products > Assembly options.

{"base64":" ","img":{"width":1905,"height":565,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51509,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-0.png"}}

The Assembly Options interface allows you to:

View a list of existing Assembly Options.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":7200147,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-1.gif"}}

Search for Assembly Options.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":5795882,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-2.gif"}}

Filter Assembly Options by Status.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":5019831,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-3.gif"}}

Create Assembly Options.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":6253689,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-4.gif"}}

Edit Assembly Options.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":7061610,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-5.gif"}}

Delete Assembly Options.

{"base64":" ","img":{"width":3578,"height":1704,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":6424390,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/assembly-options-app-6.gif"}}

For more information on how to use this interface, read our user guide Assembly Options app.