Tutorials and Examples
Build an ecommerce store
3. Build your store and set up the ambiance
7min
with your shopify store integrated, it’s time to build the visual and interactive elements of your virtual store this guide helps you use predefined templates to create a modern store layout and set the ambiance using a skybox these steps enhance the user experience and bring your virtual shopping environment to life step 1 launch your project in the editor to start building your virtual store, first, you must launch your project in the editor find your project locate your project on the my projects page launch the editor select or create a scene where you want to start building your store this action launches your project in the editor, making your scene active and ready for building step 2 use a model template for your virtual store the ir studio provides preconfigured model templates to simplify the process of creating a virtual store for this tutorial, use the natural modern template, which includes a fully built brick and mortar store with product displays and lighting if you cannot find templates that resemble a modern store to use in this tutorial, you may not have the necessary access if you think this is an error, contact support at the ir studio support center https //help theinfinitereality com/hc/en us to add your store model template open the assets library go to the assets tab located at the bottom left of the editor's interface find the model category in the list of assets on the left, locate and expand the model category select the templates category click templates to view the available model templates choose the appropriate template for this tutorial, use the nms hubslm template large glb model or any other that resembles a modern retail store these type of files include models for your shopping experience with fully set light maps add the template to your scene drag and drop your store file from the assets tab into the bottom of the hierarchy panel located at the top right of the editor's interface preview your scene after adding the template, the model appears in the center of your project in the viewport test the scene by clicking the preview button and using the wasd keys to navigate ensure to drop your model in the hierarchy do not drag the file into the viewport directly dropping it in the hierarchy panel ensures the model is properly placed on the default platform model step 3 set the ambiance of your store by adding a skybox a skybox is a spherical environment that surrounds your scene, providing lighting and ambiance for this tutorial, you will add a desert themed skybox to create a bright and warm atmosphere 1\ enable skybox settings locate the ee skybox entity in the hierarchy panel select the entity to open its components in the properties panel expand the skybox component and set the sky type to equirectangular from the dropdown menu 2\ assign a skybox image in the assets tab, find and expand the skybox category to view available skybox images locate the desert daytime 04 png file for this tutorial drag and drop the desert daytime 04 png file into the texture field in the properties panel, ensuring the ee skybox entity is selected once you add the skybox, it immediately illuminates your scene you can further configure the skybox settings in the hierarchy panel ℹ️ try out different skybox images don't be afraid to experiment with other skybox images, each of them provide a unique lightining setting to your project next steps loading and placing shopify products with your store layout and ambiance set, go to the next guide to 4 load and place shopify products docid\ wcprk7tbjlzf1yzlra24s within the scene this includes creating entities, attaching ecommerce components, and positioning your products for display