Background image and colour changes

The core plugin gives a 3D product a transparent or solid-colour background. 3D Premium adds two options:

• an Image background, drawn inside the 3D view,
• a Change background color choice action, so selecting a choice changes the background colour with a smooth transition.

Background image

1. Go to 3D settings > Background.
2. Set Background mode to Image.
3. Press Select image and choose an image from the media library.
4. Save the configurator.

Screenshot needed: the Background section with Background mode set to Image and an image selected.

The image is drawn inside the 3D canvas rather than behind it, so postprocessing effects such as grading and vignette apply to it too. The product and its backdrop get the same finish. A background set on the page, for example from the theme or the Customizer, sits behind the canvas and is left untouched.

Choosing the image

The image is stretched to fill the viewer. It doesn't keep its proportions, and the viewer's shape differs between desktop and mobile. Pick images that still look right when stretched:

• soft gradients, blurred interiors, out-of-focus studio backdrops: good,
• anything with straight lines, text, people or recognisable objects: will look distorted on some screens.

Keep the file small. The image is downloaded with the product, and a large photo slows down the first view. A modest JPEG around 1600 px wide is usually plenty for a backdrop that is meant to be soft.

The image stays fixed while the customer rotates the product. For a backdrop that surrounds the product and moves with the camera, use an environment instead (see 3D objects).

Changing the background colour from a choice

Use this when a choice should set the mood: a dark background for a Night edition, a warm tone for a Walnut finish.

1. Edit the choice, and open its 3D settings.
2. Under Actions, add an action and set it to Change background color.
3. Pick the Background color.
4. Set the Transition duration (ms). The default is 600, a little over half a second. 0 switches instantly.
5. Save the configurator.

Screenshot needed: a choice's 3D actions with a Change background color action.

When the customer selects the choice, the background moves smoothly to the new colour. When the choice is deselected, the background goes back to the product's own background.

• Several choices change the colour at once: the choice on the later layer wins, in the same way as other conflicting 3D actions.
• Starting from an image or a transparent background: there is no colour to blend from, so the background turns white at once and then blends to the new colour. Going back restores the image or the transparency instantly.
• Going back to a solid-colour background always takes the default 600 ms, whatever duration the choice uses.
• When the page loads with the choice already selected, for example the default choice or a shared configuration, the colour is applied straight away, without a transition.
• Visitors who have asked their system for reduced motion get the change instantly.

The admin preview doesn't apply choice actions, so check the result on the product page.