Skip to main content
Skip table of contents

How to Use E-Commerce in OKO

This guide covers how to set up and use the e-commerce functionality in OKO via Shopify.

E-Commerce functionality can only be initially set up on OKO Web before assigning product ID’s in a space. You can add product ID’s via both OKO Web and using the OKO Unreal Plugin once setup is complete.

Setting up e-commerce

You can add or remove the e-commerce functionality either when creating or editing a space.

When creating a space, the toggle is located inside the settings accordion.

ECommerce_01.png

When editing the space, the toggle is located inside the settings tab in the details modal (this will be revised at a future date).

You can only complete the wizard when you are editing a space. During creation, you can only enable it.

To complete the setup go to the settings tab (in the space details modal) and click “Manage” underneath the toggle.

ECommerce_002b.png

From here, you must complete the setup wizard in the Web client following the instructions.

ECommerce_07.png

Note that you will either require a paid Shopify plan or need to use shopify.dev to test e-commerce with OKO.

ECommerce_08.png

Let’s use shopify.dev, to show the workflow from end to end. First, sign up for a dev account on shopify.dev (unless you already have a paid account on shopify.com).

ECommerce_101_shopify_dev.png

Sign up with your preferred method.

ECommerce_010_Create_a_Shopify_Account.png

For this example, we’ll sign up using an email address.

ECommerce_102b_Create_a_Shopify_Account_by_Email.png

When you have entered all the requisite info, click on the “Stores” tab on the left to navigate to the “Stores” page. This is your Shopify Partners administration page. (If you don’t see a “Stores” tab, you need to make sure to use a paid or dev Shopify account, as this tab will not be visible with a free – even free trial – non-dev Shopify account.)

ECommerce_109_Stores_Quickstart.png

If you don’t already see a default store such as “Quickstart” you can create one using the “Add store” pulldown menu.

ECommerce_110_Stores_Add_Store.png

Click on your store (eg. Quickstart) and you’ll see a page that looks like this:

ECommerce_111_Quickstart_Store.png

Choose your account as you log in:

ECommerce_115_Choose_Account.png

You should see a page that looks something like this:

ECommerce_116_Logged_in.png

Click on the “Sales channels” link label on the left, and search for “Headless”.

ECommerce_119_Search_for_Headless.png

Headless should appear on the following page:

ECommerce_120_Headless.png

Click on “Headless” and you’ll be directed to this page:

ECommerce_121_Headless_App.png

Click “Install” to Install the Headless App.

ECommerce_122_Install_Headless_App.png

Click “Create Storefront” to create a Headless storefront.

Notice the “Headless” link label on the left and the pin next to it. Click on the pin so the Headless channel stays visible to the left.

ECommerce_125_Create_Storefront.png

Click “Manage” to the right of the Storefront API to manage the tokens.

ECommerce_127_Manage_Headless_Storefront_API.png

Save the “Private access token” in a safe place.

You’ll need to paste this token later.

ECommerce_128_PRIVATE_ACCESS_TOKEN.png

You may also wish to rename the “Quickstart … Headless” storefront, but this will not create a simpler URL for the store if you are using shopify.dev

ECommerce_130_rename_storefront.png

But it would give the Headless pages on the admin.shopify.com website a cleaner name.

ECommerce_131_Renamed_Storefront.png

Make sure to copy the store URL.

ECommerce_132_Store_URL.png

Next, log into OKO using your credentials.

ECommerce_201_Log_into_OKO.png

Go to the Settings tab of the space you created earlier.

ECommerce_204_Settings.png

Click on “Manage” to enter your Shopify credentials.

ECommerce_206_Shopify_Wizard.png

Go to step 2 of 3 in the Wizard and follow the instructions.

ECommerce_208_Wizard_2_of_3.png

Enter the information you gathered.

ECommerce_212_Wizard_3_of_3.png

You should see that e-commerce is now connected in the settings page.

ECommerce_213_ECommerce_Connected.png

Go back to your store on the Shopify website.

ECommerce_301_Back_to_Shopify_Store.png

Delete any starter example products you don’t need.

ECommerce_306_Delete_Starter_Example_Products.png

Add your products to your store.

ECommerce_308_Add_Products.png

Here’s a backpack as an example.

ECommerce_310_Add_Backpack.png

Go back to OKO and enter your e-commerce space.

ECommerce_312_Enter_Ecommerce.png

After entering the space, let’s create a primitive cylinder.

ECommerce_315_Create_Primitive.png

The cylinder is placed in the space as a pedestal.

ECommerce_318_Place_Cylinder.png

Next, let’s add a backpack asset. (Credit: Sketchfab CC BY 4.0 large_backpack_white_texture_mockup by kane_sk06).

ECommerce_320_Backpack_Asset_Added.png

It’ll appear in your assets.

ECommerce_321_Backpack_Asset.png

Place the backpack on the pedestal.

ECommerce_322_Place_Backpack_Asset.png

Add an e-commerce component to the backpack.

ECommerce_323_Add_ECommerce_Component_to_Backpack.png

Enter the product ID.

ECommerce_324_Enter_Product_ID.png

Find the tag for the e-commerce component, usually near the base of the object.

ECommerce_320_Backpack_Asset_Added.png

Move the e-commerce component tag to a place that is easier to click on.

ECommerce_326_Move_eCommerce_Tag.png

Enter Viewer Mode to test the e-commerce component you just added.

ECommerce_327_Enter_Play_Mode_to_Test.png

Select the e-commerce tag in Viewer Mode.

ECommerce_329_Select_Tag.png

Select the “Default Title” in the Variant to prepare for purchase (this will be simplified in a future release).

ECommerce_330_Select_Default_Title_in_Variant.png

With the “Default Title” selected, add the item to your bag.

ECommerce_331_Add_to_Bag.png

Note that the item has been added to your bag.

ECommerce_332_Added_to_Bag.png

Click on the Shopping Bag icon to go to checkout.

ECommerce_333_Click_on_Shopping_Bag.png

The item is ready to be purchased.

ECommerce_334_Checkout.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.