Displaying Preview Images of the Configurable Item

NetSuite CPQ Configurator can display images of the configurable item on the product user interface. With images, you can:

Help users better understand the item they are configuring.
Show how features and options fit together.
Provide a preview of the final item's look and feel.

The image container is displayed above the summary in the information bar. When no image is displayed, it remains hidden. Images are added to the image container when their rules match answers users select on the product interface. For more information about the image container, see Changing the Appearance of Tabs, Groups, and the Image Container

Inside the image container, you can create a composite image or an image gallery. Composite images display the item while it is being configured. A composite image combines multiple layered images into a single image. Each image includes only one feature or option of the configurable item with a transparent background. Then, these images are layered on each other to create the final image of the configurable item. With composite images, you can mix and match 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.

You can group the images in composite images or image galleries to show the configurable item from multiple views or angles, such as front and back views. Users can browse the images by clicking the arrows and switch the view by clicking the dots.

Images have a sequence number to sort them within 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. The height of the images is dynamically adapted to maintain proportions.

Note:

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 at 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 the 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 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 whether 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 rule category. The image is displayed if its rule and the category rule match answers selected by users. For more information, see Working with Rule Categories in NetSuite CPQ Configurator.
To add the image as a logo on a composite image, you can 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. The active image with the greatest height, without any resizing or positioning, is the basis to calculate the logo size and offsets. Leave out the percentage symbol when entering the values.

To resize and position the logo, enter values in the following fields:
- Height – The logo height.
- Width – The logo width.
- Offset from Left – The space between the logo and the left border of the image container.
- Offset from Top – The space between the logo and the top border of the image container.
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.

To add an image:

Related Topics