The IR SDK enables you to seamlessly integrate purchasable items from your Shopify store into your 3D experience, enhancing the immersive shopping journey.
The SDK supports two distinct methods for presenting shoppable items within the experience:
In-Game UI mode
Controlled and designed by you on the engine side
Shoppable windows can be displayed inside the 3D experience, maintaining the immersive feel of the virtual world or as 2D canvas.
When users are ready to make a purchase, they are redirected to the Shopify website to securely complete the transaction.
HTML Overlay Mode
The shoppable window appears as an HTML overlay on top of the 3D experience when a user interacts with an item in the virtual world.
This option allows for customization of the HTML UI through the iR Studio, giving you more flexibility in designing your storefront.
SDK integration
Prerequisites
Step by Step
1. Add IR SDK Controller (if not added already)
Add empty gameObject into the scene. You can call it "IR_SDK_Controller"
Add Component "iR SDK Controller"
2. Attach iR Commerce Controller
Locate SDK controller set in the first step.
Add iR Commerce Controller to it.
3. Attach the iR Shopify Item to a GameObject
In your scene, attach the iR Shopify Item component to a GameObject.
In the example, we attached it to an empty GameObject, which will later be linked to a 3D object representing the purchasable item.
4. Assign a Product Variant to a GameObject
Once the iR Shopify Item component is attached, link a Product Variant to it.
The Product Variant represents the specific item from your Shopify store that you want to associate with this GameObject.
5.1 In-Game UI mode: Retrieve Information From the Shopify Item
Using the iR SDK, you can retrieve information from the Shopify product attached in Step 4. The following details can be accessed and displayed dynamically within your canvas:
Product Information:
Item Variant ID
Product Title
Product Description
Price
Currency
Product Images
component.ClickViewItem(itemId, cartItem =>
private CartItem cachedItem;
private IShopifyItem component; // attached in the 3d step iR Shopify Item
string itemId;
...
component = gameObject.GetComponent<IShopifyItem>();
itemId = component.GetItemVariantId();
...
component.ClickViewItem(itemId, cartItem =>
{
if (cartItem != null)
{
Debug.Log("Data is found");
cachedItem = cartItem; // Store item data
ViewItem(cachedItem);
}
else
{
Debug.Log("Data is null");
}
});
...
public void ViewItem(CartItem item) // get item data
{
title.text = item.product.title; // Set the product title
price.text = "$" + item.price; // Set the price
description.text = item.product.description; // Set the product description
...
}
...
CartHelper.Instance.GetAllCartWithDetails(cartItems =>
{
ProductSummaryList productSummaryList = new ProductSummaryList { products = new List<ProductSummary>() };
foreach (CartItem item in cartItems)
{
ProductSummary summary = new ProductSummary
{
title = item.product.title,
id = item.id,
price = item.price,
imageURL = item.product.images.nodes[0]?.url
// add other needed parameters
};
Debug.Log("Added summary: " + summary);
productSummaryList.products.Add(summary);
}
string jsonResult = JsonUtility.ToJson(productSummaryList, true);
// use jsonResult for rendering cart view canvas
}, error =>
{
Debug.LogError("Error during cart fetching: " + error);
});
...
Get "Buy now" url
CartHelper.Instance.BuyNow(itemId, CheckoutUrl =>
public void ButtonBuyNow(string itemId)
{
CartHelper.Instance.BuyNow(itemId,
CheckoutUrl =>
{
Debug.Log("Checkout URL: " + CheckoutUrl);
// your function to open URL, for example to open in the external web browser, for example: sendToWeb.ButNowSendCheckout(CheckoutUrl);
},
error =>
{
Debug.LogError("Error during checkout: " + error);
}
);
}
}
public void GetCheckout(){
CartHelper.Instance.CreateCheckout(CartHelper.Instance.GetAllCart(),
checkoutUrl =>
{
// YOUR CHECKOUT METHOD HERE
Debug.Log(checkoutUrl); // execute your method here, for example to open checkoutUrl in external web browser
},
error => { Debug.LogError("Error creating checkout: " + error); });
}
Remove from Cart
CartHelper.Instance.RemoveFromCart(itemID);
Example:
using LVSdk.Commerce;
//...
[SerializeField] public Image image; // Your Canvas element
[SerializeField] public TextMeshProUGUI title; // Your Canvas element
[SerializeField] public TextMeshProUGUI description; // Your Canvas element
[SerializeField] public TextMeshProUGUI price; // Your Canvas element
[SerializeField] private CanvasEnabledEvent canvasEnabledEvent; // used to get a signal from your UI canvas GameObject that it is not turned off
private CartItem cachedItem;
private IShopifyItem component; // attached in the 3d step iR Shopify Item
string itemId;
//...
[System.Serializable]
public class ProductSummaryList // for list of added items to teh cart
{
public List<ProductSummary> products;
}
//...
void Start()
{
fetchData();
}
public void fetchData()
{
component = gameObject.GetComponent<IShopifyItem>();
itemId = component.GetItemVariantId();
if (component != null)
{
component.ClickViewItem(itemId, cartItem =>
{
if (cartItem != null)
{
Debug.Log("Data is found");
cachedItem = cartItem; // Store item data
canvasEnabledEvent.OnCanvasEnabled.AddListener(UpdateUIWhenCanvasIsEnabled); // Now we wait for the canvas to be enabled, the UI will update when the event is triggered
}
else
{
Debug.Log("Data is null");
}
});
}
else
{
Debug.Log("Component not found.");
}
}
// Prepare Shopify product information
public void ViewItem(CartItem item)
{
title.text = item.product.title; // Set the product title
price.text = "$" + item.price; // Set the price
description.text = item.product.description; // Set the product description
StartCoroutine(DownloadImageCoroutine(item.product.images.nodes[0]?.url)); // for downloading the image
}
private IEnumerator DownloadImageCoroutine(string imageUrl)
{
using (UnityWebRequest www = UnityWebRequestTexture.GetTexture(imageUrl))
{
yield return www.SendWebRequest();
if (www.result == UnityWebRequest.Result.Success)
{
Texture2D texture = DownloadHandlerTexture.GetContent(www);
image.sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
}
else
{
Debug.LogError("Failed to download image: " + www.error);
}
}
}
public void UpdateUIWhenCanvasIsEnabled()
{
if (cachedItem != null)
{
Debug.Log("Canvas enabled, updating UI...");
ViewItem(cachedItem); // Update the UI with the stored data
}
else
{
Debug.LogError("No item data cached!");
}
}
// Buy Now
public void ButtonBuyNow(string itemId)
{
CartHelper.Instance.BuyNow(itemId,
CheckoutUrl =>
{
Debug.Log("Checkout URL: " + CheckoutUrl);
// your function to open URL, for example to open in the external web browser, for example: sendToWeb.ButNowSendCheckout(CheckoutUrl);
},
error =>
{
Debug.LogError("Error during checkout: " + error);
}
);
}
}
// Add to cart
public void AddToCart(string itemId){
Debug.Log("adding to cart item: " + itemId);
CartHelper.Instance.AddToCart(itemId);
}
// Getting prodacts that are added to the cart in JSON format, so you can render them in cart view UI
public void getAllProducts()
{
Debug.Log("GetAllProducts is triggered");
CartHelper.Instance.GetAllCartWithDetails(cartItems =>
{
ProductSummaryList productSummaryList = new ProductSummaryList { products = new List<ProductSummary>() };
foreach (CartItem item in cartItems)
{
ProductSummary summary = new ProductSummary
{
title = item.product.title,
id = item.id,
price = item.price,
imageURL = item.product.images.nodes[0]?.url
// add other needed parameters
};
Debug.Log("Added summary: " + summary);
productSummaryList.products.Add(summary);
}
string jsonResult = JsonUtility.ToJson(productSummaryList, true);
// use jsonResult for rendering cart view canvas
}, error =>
{
Debug.LogError("Error during cart fetching: " + error);
});
}
// Remove from cart
public void RemoveFromCart(string itemID){
Debug.Log("RemoveFromCart for ID: " + itemID);
CartHelper.Instance.RemoveFromCart(itemID);
getAllProducts(); // optionally to re-fetch all items added into the cart
}
// Checkout. Get checkpout URL for everything that is added into teh cart
public void GetCheckout(){
CartHelper.Instance.CreateCheckout(CartHelper.Instance.GetAllCart(),
checkoutUrl =>
{
// YOUR CHECKOUT METHOD HERE
Debug.Log(checkoutUrl); // execute your method here, for example to open checkoutUrl in external web browser
},
error => { Debug.LogError("Error creating checkout: " + error); });
}
```
In the example, canvasEnabledEvent.OnCanvasEnabled.AddListener(UpdateUIWhenCanvasIsEnabled); ensures that your canvas containing elements like the title, image, and description is fully initialized and ready to display the information retrieved from Shopify.
This example of how we attached this script and connected it to the UI. This serves as a reference for integrating Shopify product information into your project.
We expect you to create a similar script and implement the required logic independently. Our guide demonstrates how to retrieve the information and render it dynamically. However, the specific implementation and customization are up to you based on your project’s needs.
using UnityEngine.Events;
public class CanvasEnabledEvent : MonoBehaviour
{
public UnityEvent OnCanvasEnabled;
void OnEnable()
{
if (OnCanvasEnabled != null)
{
Debug.Log("Canvas enabled - firing event");
OnCanvasEnabled.Invoke();
}
}
}
2 - Canvas Elements are attached to our script to get the Data from the iR SDK.
title.text = item.product.title; // Set the product title
price.text = "$" + item.price; // Set the price
description.text = item.product.description; // Set the product description
StartCoroutine(DownloadImageCoroutine(item.product.images.nodes[0]?.url)); // for downloading the image
5.2 HTML Overlay Mode: Retrieve Information From the Shopify Item (availible soon)
Controlled and customized by you on the
IR SDK for Unity is into your Unity project.
Experience .
.
.
Set in the iR Commerce Controller.
Step 5.1 applies when you want to render shopping information directly within the 3D space, as described in the .
