4. Load and place Shopify products
Now that you have set up the structure and ambiance of your virtual store, it's time to populate it with products from your Shopify store. This guide walks you through creating entities to hold your products, attaching the necessary ecommerce components, and positioning your products within your scene.
Entities are fundamental building blocks in the iR Engine. You will create an empty entity to which you can attach your Shopify product.
To create an empty entity:
Add a new entity: Click the Add Entity button located in the Hierarchy panel.
Select Empty: From the options available, select Empty to add a new empty entity to the Hierarchy.
Make the entity active: Ensure your new entity is selected in the Hierarchy panel so its components are displayed in the Properties panel.
To load a product into your entity, you need to add an Ecommerce Product component.
To add an Ecommerce Product component:
Add a new component: In the Properties panel, click Add Component.
Expand the Ecommerce category: Click on the Ecommerce category to see the available components.
Select Ecommerce Product: Choose Ecommerce Product from the list. This action adds the component to your entity.
Configure the component: Expand the newly added Ecommerce Product component in the Properties panel to view its settings.
With the Ecommerce Product component in place, you can now load your product into the entity.
To load a product:
Select Shopify as the provider: In the Provider dropdown menu, select Shopify.
Choose a product: In the Product dropdown menu, select the product you want to load. This action configures the component to display the selected product.
Verify the product loads: The entity now populates with the model of the selected product. You can see the product appear in the Viewport.
Can't view your Shopify products?
If the list of products does not show any of your Shopify products, ensure your store is correctly set up. Revisit the 2. Configure the Shopify plugin guide to confirm proper integration.
You can move and position your product within the scene to create an appealing display.
To position your product:
Use the Transform component:
- Select the entity in the Hierarchy panel.
- In the Properties panel, expand the Transform component to adjust the position, rotation, and scale of your product.
Direct manipulation in the Viewport:
Alternatively, directly manipulate the product in the Viewport by selecting it and using the move, rotate, and scale tools.
Grouping entities for easier positioning
To position products more easily, group your product entity with another entity, like a table or shelf, in the Hierarchy. This approach helps you move and align products accurately within your scene.
When you load a Shopify product into your scene, clicking on it in the Viewport displays its details, such as description, price, and add-to-cart options. This interaction helps simulate the user shopping experience of your users.
With your products loaded and positioned, the next 5. Add videos to your store guide focuses on enhancing your virtual experience. This includes creating video entities and configuring video resources to play within your scene.
