3D Model Viewer on Any Page

Store Design
, , ,

Topic summary

A user wants to display their existing 3D product model on the homepage of their Dawn theme store, not just the product page. They’re currently using Google’s model-viewer but want to avoid the extra JavaScript calls and backwards-forwards cache issues it causes.

Proposed Solutions:

  • Featured Product Section: One suggestion is to use Dawn’s built-in featured product section if the 3D model is the main product image. Custom code would be needed otherwise.

  • Liquid Code Snippet: A working code solution was shared that uses <model-viewer> tags with specific attributes for loading the 3D model on both home and product pages.

  • Third-Party App: The developer of Fira app suggested recreating the 3D models using their tool, which allows smartphone-based model creation and offers flexible placement options with optimized performance.

Status: The discussion remains open with multiple implementation paths available, though no confirmation of which solution was adopted.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

We are using the Dawn theme, and we have a 3D model for our product which appears fine on the product page. However, the Dawn theme was coded, works well for displaying 3D models, and we just want to use the same method, but add it to our home page. Currently, we’re using Google’s model-viewer and unfortunately that just adds extra js calls and prevents backwards-forwards cache because of webxr.

Anyone know how to use the 3D model code from the product page on any other page?

Thanks in advance.

2

Hi @mOONbOOTS

Have you tried using the Featured product section? Is this 3D is the main image? If not, you will need to add custom code unfortunately. We can do this for you with a competitive price. Send me a message if interested

3

This liquid code seems to work for me, both on home and product pages, using Dawn theme
1 Like
4

Hey @mOONbOOTS ,

even though you seem to already have the 3D models, I want to to shoutout Fira.

With Fira you can create the 3D models only using your smartphone (record a 1min video of the product and upload to the app).

You can then display those models anywhere in your store. They are optimized for performance and customers have been pretty impressed with the effect on their conversion.

If you want, you can just recreate the 3D models using Fira. Then you would be free to display them anywhere, either with drag&drop in your theme editor or with a code snippet (individual snippets for each model, so you have full control).

Screenshot 2025-03-14 at 4.34.18 PM.png
Screenshot 2025-03-14 at 4.34.18 PM.png2878×2062 412 KB

Hope this isn’t too late.

All the best

Felix

https://apps.shopify.com/fira-ai-video-to-3d-model

PS: I am the developer of Fira. I thought I should mention that! :slightly_smiling_face: