Displaying Preview Images of the Configurable Item
NetSuite CPQ Configurator can display images of the configurable item on the user interface. Images help users better understand the item they are configuring, show how features and options fit together, and provide a preview of the final item look and feel. The image container is displayed in the information bar above the summary when at least one image meets the conditions expressed in its rule.
NetSuite CPQ Configurator can display composite images where users view the item being configured according to the options and features selected on the interface. A composite image combines multiple layered images into a single image. Each image includes only a single component, feature, or option of the configurable item with a transparent background. These images are layered on top of each other to create the final image of the configurable item. With composite images, you can mix and match the images of the components, features, and options that vary in color, size, material, and so on without needing an image for every possible configuration.
Alternatively, you can show users the configurable item by creating an image gallery. To make the images appear one after the other in the gallery, check the Separate all CPI in carousel box on the product record.
When using composite images or the image gallery, you can group the images to show the configurable item from multiple views or angles, such as front or back views. Users can browse the images by clicking the arrows and switch views by clicking the dots.
Images have a sequence number to determine the order in which they are displayed on the image container. In a gallery, images with a lower sequence number are displayed before images with a higher sequence number. In a composite image, images with a lower sequence number are displayed closer to the image background. For example, you can assign 1 as a sequence number to the background image and 2, 3, 4 to the layers applied on top of the background image. Layer 4 is displayed over the other layers.
All images should be the same size, especially for composite images. Same-size images ensure that the visible portion of each layer is correctly positioned in the image container. NetSuite CPQ automatically resizes images to fit the image container width by scaling them up or down and dynamically adapts their height to maintain proportions. The image container width is the same as the information bar width. For more information, see Changing the Information Bar Width and Position.
You should upload the images to the Images folder of the File Cabinet by going to Documents > File Cabinet > Images. In the Images folder, you can create a folder for NetSuite CPQ Configurator with a subfolder for each product. By uploading images to the Images folder in the File Cabinet, images are available to NetSuite CPQ SuiteCommerce Integration without login. For more information about uploading files to the File Cabinet, see Uploading Files to the File Cabinet.
To add an image:
-
In NetSuite, go to CPQ > Configurator > Product Maintenance.
-
Click Edit next to the product you want to modify.
-
On the Composite Images subtab, click New CPQC Composite Image.
-
Enter a descriptive name for the image.
This name is displayed under the CPI option in the Audit menu of the user interface. Also, screen readers use the name as an alternate text and read it aloud to describe the image.
-
Enter a sequence number to determine the order in which the image is displayed on the composite image or the image gallery.
You can use negative or positive numbers. For example, −2 or 5.
-
To choose the image, two options are available:
-
In the Image field, select an image from the File Cabinet.
-
In the Image URL field, enter the URL of the image.
-
-
To create a view, enter the code corresponding to the view in the Carousel Group Code field. Assign the same code to all the images that belong to the same view.
The sequence number defines the order of the images within the same view.
-
In the Show Rule field, provide the question and answer combination that determines when the image is displayed on the user interface.
Enter question and answer codes separated by the forward slash character. For example, A/1. Use operators to combine multiple question and answer sets. For example, A/1&B/2.
To make an image always visible, enter the syntax
*/*. For example, you can use this syntax to always display the background image in a composite image. For more information, see Activating Building Blocks with Rules. -
(Optional) To include an additional rule in the image rule, select a category. The image is displayed if its rule and the category rule match an answer selected by users. For more information, see Working with Categories in NetSuite CPQ Configurator.
-
To add this image as a logo on a composite image, you can manually resize it and position it on the top-left corner of the image container. The size and the offsets of the logo are expressed in percentages. Their value is calculated based on the highest non-manually resized and positioned image displayed in the image container. You must leave out the percentage symbol.
To resize and position the logo image:
-
In the Height field, enter the percentage value of the logo height.
-
In the Width field, enter the percentage value of the logo width.
-
In the Offset from Left and Offset from Top fields, enter the percentage value representing the space between the logo and the left and top borders of the image container, respectively.
You can use resolve expressions to provide values for these fields. For more information, see Obtaining Answer Data with Resolve Expressions.
You could enter the image height, width, and offsets in pixels by adding px after the number. For example, 10px. However, take into account that pixels do not maintain the proportions on different screens. Specifying the size in percentage ensures that the image will keep its proportions on any screen size.
-
-
Click Save.
To copy or delete images, see Working with Product Building Blocks.