📢 Don't fork this project. Use, contribute or open issues in Store Discussion

Product Customizer

The Product Customizer allows a product's [attachments](https://help.vtex.com/tutorial/o-que-e-um-anexo--aGICk0RVbqKg6GYmQcWUm) to be made available and ready to be chosen by users from the product page.

attachment-product-customization-select

Configuration

  1. Add the product-assembly-options block to your store's product page template.
  2. According to your store's scenario, declare the desired props.
  "product-assembly-options": {
    "children": [
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  }
Prop nameTypeDescriptionDefault value
optionsDisplayStringYou should choose between “box” or “select”. This will define whether the attachment's pre-defined options will be displayed to be selected in a Checkbox (box) or a dropdown list (select) .select

Modus Operandi

According to the [data entry](https://help.vtex.com/tutorial/adding-an-attachment?locale=en) in the catalog, the Product Customizer takes 3 types of attachments into account when being rendered:

Notice the example below and check out the three attachment types simultaneously displayed for the same product:

product-customizer-select

Then, check out below how the product attachment was registered in the admin's Catalog:

attachment-product-customizer

Notice that when a product's attachment was registered as required, all attachment options will be automatically made available to users. If the product's attachment is not added as required, the Add customization button is rendered, as shown in the example above, giving users the options to add or not to add an attachment to their product.

Customization

The component still doesn't have CSS Handles for its specific customization.