Starting June 1st 2023, this application will no longer be maintained by VTEX.

---

The Kit Look app displays relevant products to the shopper at the time of purchase, increasing the store's product selling.

The customer can choose the items from the kit they want to buy or add the complete kit to the cart if they are interested in the combinations highlighted automatically by the store.

In the following sections, learn how to add the app to your store and configure it.

Set up the Kit with all the products that will be displayed. To do so, refer to the tutorial Kit registration.

1. Go to the VTEX App Store and after logging into your account, click on GET APP.

2. You will be redirected to the checkout and choose a payment method since the Kit Look is a paid app.

As the Kit look is a paid app, you will be charged a US$0.01 fee to validate your credit card information. This will be refunded as soon as the payment is approved.

Once you have paid for the app, it is installed in your account.

3. To finish this step, import it in your store's peerDependencies in manifest.json.

The Kit Look order by default is sorted by the productId in ascending order, but it is possible to configure it to respect the Kit order registration through the settings in the Kit Look app inside my applications.

Furthermore it is possible to select which components the kitlook block should render. The default configuration is shown in the image:

The kitlook-layout interface works by alternating the blocks if it detects that the product is a kit.

Therefore, you have to add its interface in your app store theme code. There are two ways to achieve this: Adding the kitlook-layout interface in the interfaces.json or product.jsonc.

Check out the following sections to add the kitlook-layout interface.

1. Allow the Kit look interfaces by adding the Kit Look in the store.product in interfaces.json of your app theme.

2. Then, add the kit look-layout interface to the page you want to display a different block when the product is a kit.

Keep in mind that the first block specified will always be for regular products, and the second one is for your custom product page that you want to display if the product is a kit.

3. In your second block, you can use the kitlook block to display the kit items. For example:

In the example above, we are reusing the flex-layout.col#stack block shared with your regular product blocks.

1. Add product-details.kitlook as a child in your store.product in store/blocks/product.jsonc.

2. In your product-details.kitlook add kitlook as a block.

In order to apply CSS customizations in the kitlook block, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
kitlookContainer
kitlookBox
kitlookImage
kitlookDetails
kitlookName
kitlookDescription
kitlookPrice
kitlookButton
kitlookCheckbox

If you have any shelves which may display kits you need to replace the product-summary or product-summary.shelf interface with product-summary.kitlook-layout in those shelves in store/blocks/home/home.jsonc

We recommend you do the same for your gallery block, so the new layout is used in search results and categories pages.

Now that you're using product-summary.kitlook-layout, you may want to specify a custom block for your regular products and another for kitlook, so let's do that.

To do that, somewhere in your blocks.json add the block product-summary.kitlook-layout.

You can specify two children's blocks. The first will be displayed for regular products and the second for kitlooks.

By default product-summary.kitlook displays a list with the name and price of the items in the kit.

However, it is possible to achieve a wide range of customizations using product-summary-kitlook ( different from the product-summary.kitlook)

You can specify any interface that a regular product-summary accepts, e.g., product-summary-image, product-summary-buy-button, to name a few.

You can also use flex-layout and stack-layout to achieve the maximum level of control.

Take a look at how to do that.

1. Create a new custom product-summary.kitlook so you can modify product-summary-kitlook and product-summary-buy-button#kitlook later on. For example:

2. Then, create a flex-layout.row and flex-layout.col columns to go inside it. In one column put the product image using product-summary-image and in the other product-summary-name and product-summary-price.

Everything put together:

After that, do not forget to change the default product page interface on CMS > Pages to use the store.product.kitlook interface.

You can expect to have a similar result as the following: