Skip to main content

About Zoovu manifest

The zoovu.manifest.js file defines how your extension is displayed and used in Experience Designer. It sits in the root folder of your extension and contains metadata such as the extension’s name, label, icon, and location.

Experience Designer uses this file to determine where and how your extension should appear in the interface. Without it, the extension cannot be loaded or displayed properly.

<component_root_directory>/zoovu.manifest.js

zoovu.manifest.js

Example zoovu.manifest.js​
zoovu.manifest.js
module.exports = {
  name: 'CustomButtonRemoteComponentExample',
  type: 'BUTTON',
  icon: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.999805 19V15.1L5.8498 10.25L1.3748 5.75C1.2248 5.6 1.1123 5.43333 1.0373 5.25C0.962305 5.06667 0.924805 4.88333 0.924805 4.7C0.924805 4.51667 0.962305 4.33333 1.0373 4.15C1.1123 3.96667 1.2248 3.8 1.3748 3.65L3.6248 1.375C3.7748 1.225 3.94147 1.1125 4.1248 1.0375C4.30814 0.9625 4.49147 0.925 4.6748 0.925C4.85814 0.925 5.04564 0.9625 5.2373 1.0375C5.42897 1.1125 5.5998 1.225 5.7498 1.375L10.2498 5.875L15.1748 0.95C15.2581 0.866667 15.3415 0.8125 15.4248 0.7875C15.5081 0.7625 15.5998 0.75 15.6998 0.75C15.7998 0.75 15.8915 0.7625 15.9748 0.7875C16.0581 0.8125 16.1415 0.866667 16.2248 0.95L19.0498 3.775C19.1331 3.85833 19.1873 3.94167 19.2123 4.025C19.2373 4.10833 19.2498 4.2 19.2498 4.3C19.2498 4.4 19.2373 4.49167 19.2123 4.575C19.1873 4.65833 19.1331 4.74167 19.0498 4.825L14.1248 9.75L18.6248 14.25C18.7748 14.4 18.8873 14.5708 18.9623 14.7625C19.0373 14.9542 19.0748 15.1417 19.0748 15.325C19.0748 15.5083 19.0373 15.6917 18.9623 15.875C18.8873 16.0583 18.7748 16.225 18.6248 16.375L16.3748 18.6C16.2248 18.75 16.0581 18.8625 15.8748 18.9375C15.6915 19.0125 15.5081 19.05 15.3248 19.05C15.1415 19.05 14.9581 19.0125 14.7748 18.9375C14.5915 18.8625 14.4248 18.75 14.2748 18.6L9.7748 14.125L4.8998 19H0.999805ZM6.9248 9.175L9.1748 6.925L7.3498 5.1L6.1498 6.3L5.0998 5.25L6.2998 4.05L4.6998 2.45L2.4498 4.7L6.9248 9.175ZM15.2748 17.55L17.5248 15.3L15.9248 13.7L14.7248 14.9L13.6748 13.85L14.8748 12.65L13.0498 10.825L10.7998 13.075L15.2748 17.55ZM2.4998 17.5H4.2498L14.6248 7.125L12.8748 5.375L2.4998 15.75V17.5ZM15.6748 6.075L17.4248 4.325L15.6748 2.575L13.9248 4.325L15.6748 6.075Z" fill="#6F7889"/></svg>',
  label: 'My Button'
};

Available properties​

name​

The unique identifier of the main Vue component you will be building.

icon​

Defines the icon shown in Experience Designer next to your extension. Use an inline SVG string.

label​

Specifies the visible label for the extension tile. It appears in the Experience Designer UI when you configure the extension in the right-hand panel.

type​

Extension type determines where it can be used in Experience Designer. For example, a type of BUTTON makes it available when dragging and dropping a button component onto the canvas.

subType​

Use the subType property in zoovu.manifest.js to place the extension inside another component. Use this when creating extensions that act as subcomponents (for example, a custom “Add to cart” button inside a product tile).

Available types​

  • FLOW_STEP
  • FLOW_STEP_SINGLE
  • FLOW_STEP_MULTIPLE
  • FLOW_STEP_DROPDOWN
  • FLOW_STEP_SLIDER
  • FLOW_STEP_DOUBLE_SLIDER
  • FLOW_STEP_LEAD_GEN
  • BUTTON
  • NAVIGATION
  • RECOMMENDATIONS
  • TOP_PRODUCTS
  • SELECTION_SUMMARY
  • DIVIDER
  • MEDIA
  • TEXT
  • CONFIGURATOR
  • STANDALONE

Available sub types​

If your extension needs to appear inside another component, choose from these supported sub types:

  • FLOW_STEP_ADDITIONAL_TEXT
  • ON_CANVAS_CUSTOM_COMPONENT
  • PRODUCT_PRICE
  • PRODUCT_IMAGE
  • PAGINATION
  • PRODUCT_PDP_BUTTON
  • PRODUCT_BUTTON_ADD_TO_CART
  • PRODUCT_CUSTOM_BUTTON
  • PRODUCT_COMPARE_TOGGLE
  • PRODUCT_AVAILABILITY_AFTER_TEXT
  • CONFIGURATOR_PRODUCT_DETAILS
  • CONFIGURATOR_PRODUCT_DETAILS_MODAL
  • CONFIGURATOR_FEATURE
  • CONFIGURATOR_SELECTION_SUMMARY_WRAPPER
  • CONFIGURATOR_SECTION
  • CONFIGURATOR_TOTAL_PRICE
  • CONFIGURATOR_NAVIGATION_VARIANT
  • CONFIGURATOR_ON_SECTION_PANEL_CUSTOM_COMPONENT
  • FEATURE_NAVIGATION_VARIANT
  • SELECTION_SUMMARY_PRODUCT
  • SELECTION_SUMMARY_PRODUCT_LIST
  • ADD_TO_CART_BUTTON
  • PRINT_TO_PDF_BUTTON
  • INFO_TEXT_MODAL
  • ANSWER_DESCRIPTION
  • CUSTOM_INFO_TEXT_TRIGGER