How can I change the white background of a 3D model to transparent?

Technical Q&A
1

The 3D model on the product page defaults to white. How do I change it to transparent? When inspecting the page, it shows that in https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css, the background is white as shown here:

.shopify-model-viewer-ui model-viewer {
  --progress-bar-height: 2px;
  --progress-bar-color: currentColor;
  transform: translateZ(0);
  z-index: 1;
  background-color: white;
}

Can I edit this?

2

Hi @mannydub ,

Maƫl from Angle 3D here.

In order to change the 3D viewer background colour, youā€™ll first need to find your ā€œmodel_viewer_tagā€ in your theme. (Probably in your product-template.liquid).

It will be a line that looks like this:

{{ media | model_viewer_tag }}

And you will need to replace it by this:

{{ media | model_viewer_tag: background-color: "transparent" }}

You can check out this Shopify documentation for more information: https://shopify.dev/api/liquid/filters/media-filters#model_viewer_tag

Alternative solution

Another solution could be to add some custom CSS in your theme.css for example, as follow:

.shopify-model-viewer-ui model-viewer {
  background-color: transparent !important;
}

This will actually override the CSS you showed above.

Please let me know if any of those 2 solutions worked for you.

Best regards,

1 Like
3

HiMaƫl @Angle3D ,

I am using the new Dawn theme, so I could not find the product-template.liquid tag. However, the second solution worked for when the model is being moved, whereas the preview image is still white.

Best,

4

Hey @mannydub ,

For the poster image transparency you could try this in your theme.css:

model-viewer {
   --poster-color: transparent;
}

If this does not get you the result you want, it is probably because the poster image generated by Shopify does not have a transparent background.

Let me know and Iā€™ll tell you how to update it.

Let me know how it went.

Best regards,

5

HiMaƫl @Angle3D ,

Since I am on the Dawn theme, it only has base.css. I have tried your poster image transparency code, but it does not change anything. I also could not find the model_viewer_tag anywhere in the code.

Best,

Manny