Displaying Preview Images of the Configurable Item

You can display images of the configurable item on the product user interface. Adding images can help users:

Better understand the item they're configuring.
See how features and options fit together.
Preview the final look and feel of the configured item.

The image container is displayed above the summary in the information bar. If no image is available, the container remains hidden. Images are added to the image container when their rules match the 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 either a composite image or an image gallery. Composite images display the item while it's being configured. A composite image is made by layering multiple images with transparent backgrounds on top of each other. Each image includes only one feature or option 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 combination.

Alternatively, you can show users the configurable item using an image gallery. To display images one after another in a gallery, check the Enable image gallery box on the product record.

When working with composite images or image galleries, you can group the images to show the configurable item from multiple views or angles, such as front and back views. Users can browse through the images by clicking the arrows and switch between views by clicking the dots.

Each image has a sequence number that determines its order in the image container. In an image gallery, images with a lower sequence number are displayed before those with a higher number. In a composite image, images with a lower sequence number are placed closer to the background image. For example, you may assign 1 as a sequence number to the background image and 2, 3, 4 for 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. Using images with consistent dimensions ensures that each layer is correctly positioned in the image container. The system automatically resizes images to fit the width of the image container by scaling them up or down. The height of the images is dynamically adjusted to maintain the original proportions.

Note:

The image container is as wide as the information bar. For more information, see Changing the Information Bar Width and Position.

You should upload the images to the Images folder in the File Cabinet at Documents > File Cabinet > Images. In the Images folder, you can create a folder for NetSuite CPQ Configurator and add a subfolder for each product. By uploading images to the Images folder, 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 Images subtab, click New CPQC Image.
Enter a descriptive name for the image.

This name is displayed under the Images option in the Audit menu of the product interface. Screen readers also use this name as 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, provide a view code. Assign the same code to all images that belong to the same view.

The sequence number determines the order of the images within the same view.
In the Rule field, provide the condition that determines whether the image is displayed on the product interface.

Enter question and answer codes separated by a forward slash. For example, A/1. Use operators to combine multiple conditions. 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 or Hiding Building Blocks with Rules.
(Optional) To include an additional rule in the image rule, select a rule category. The image will be displayed only if both its rule and the category rule match answers selected by users. For more information, see Working with Rule Categories.
(Optional) To add the image as a logo on a composite image, you can resize it and position it in the top-left corner of the image container.

Enter the size and the offsets of the logo as percentages. The active image with the greatest height—before any resizing or positioning—is used as the base to calculate the logo's size and offsets. Leave out the percentage symbol when entering the values.

Note:
An image is active if its rule matches the answers users select on the product interface.

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 don't maintain proportions on different screens. Using percentages ensures that the image remains proportional on any device.
Click Save.

To copy or delete images, see Working with Product Building Blocks.

To add an image:

Related Topics