3D Shopify Store

Shopify Discussion
1

Hi everyone,

I’m trying to achieve an effect similar to the opening scene on https://xwhite.es/ where a 3D video plays as soon as the site loads. I believe the video might be created in Blender, but I’m not entirely sure.

Does anyone know:

  1. How to create a similar 3D video effect?

  2. What format and settings should be used to optimize it for web use?

  3. The best way to embed it on a Shopify store so it loads smoothly without affecting performance?

  4. How to place video on the website opening?

Would really appreciate any insights or guidance!

Thanks in advance!

2

@NishantSolanki

1. Create the 3D video
— First of all, design some simple 3D models on Blender. Next step is animating using keyframes (3-5 sec), then add some soft lighting and in the end render in 1080p with Eevee or Cycles.
2. Optimize for Web
— Save the file like this MP4 (H. 264) less than fifteen megabytes at five to ten Mbps with an exported video that has around twenty four to thirty four frames per second. Ensure that you don’t compress it but if you do compress it to under fifteen megabytes.
3. Embed in Shopify
— Upload within Shopify Files, get URL and input at homepage via Custom Liquid:
html

— Put this code before your tag: . Open up your theme. liquid file
4. Place as Opening
— Integrate at the beginning by editing theme.liquid file and including it after the opening tag:
html

— Ensure that you check it using various devices and if there is need, put an alternative picture as substitute.

3

hi @Yuparkoti your response is appreciated but the code is missing step 3 and step 4 can share with me @NishantSolanki or can help me with code if you have one.:face_holding_back_tears: