3D Model Reflects Background Too Much on Shopify — Need Help Adjusting Material/Environment Settings

Technical Q&A
, ,
1

Hi everyone,
I’ve integrated a custom 3D model into my Shopify theme using <model-viewer>. The model is made of clear glass, and I’m running into an issue where the glass surface is reflecting the background too strongly, making the product look overly shiny and unrealistic.

I’ve tried adjusting environment settings like environment-image and skybox-image, but the reflections are still too intense. It seems like the HDR environment lighting is overpowering the glass material.

I’m looking for help with:

  • How to reduce reflection intensity on glass models in <model-viewer>

  • Whether Shopify allows custom material/shader overrides

  • Any recommended environment-image settings or tricks for clear/transparent objects

  • If there’s a way to adjust roughness/metalness inside Shopify’s implementation

Has anyone faced this with glass or reflective models? Any guidance would be really appreciated!

Thanks in advance.

3

It’s either:
do it as a band-aid through the <model-viewer> component attributes, e.g. exposure, shadow-intensity, auto-rotate , ground-plane, or a different environment-image etc etc etc

Or in the models , or it’s materials, themselves upstream, as if you have this problem in one product’s model, it’s likely in others and the real fix may be in redo’ing the models for the target usage vs trying to hand retune every media assets output.
Though passing custom values through for each specific product is possible with metafieds or other data to use in logic etc.

Reach out if you need theme customization services to realize this.
:speaking_head: :postbox: Click pic on forums for options to connect directly, and ALWAYS provide context in new comms.

Any of the above can mean either adjusting the themes usage of the model_viewer_tag filter, or completely taking over the logic to render what’s needed.