Creating Shoppable Experiences with the Commerce SDK

The optional Ceros Commerce add-on allows you to display shoppable product pages to customers in an overlay, without the need to leave the Experience.

Commerce Panels look like part of your Ceros content, but can include all the information and functionality that is available on your eCommerce site.

You can display existing product pages from your eCommerce site or create new layouts specifically designed to work within Ceros. Viewers can to add products to their shopping cart and even check out right from the Ceros Experience.

Connecting to your Shopping Cart is likely to involve both technical and design resources.

Creating Pages

Before displaying external pages in your Experience, the pages have to exist in the first place.

Technically, any external web page can be displayed in a Product Panel. There are some guidelines however, that will make your pages work best.

  • Make sure it fits within the viewport of your experience.
  • Leave out navigation menus.
  • Be sure to include a close button (see below).
  • Don’t forget your add to cart and checkout buttons.
  • Product & Cart pages should be the same dimensions.
  • It’s best practice to use target="_top" when moving on to the checkout.

Talking to Ceros

Add the SDK Code

Add the JavaScript code below to each of your panel pages. This allows the product panel to communicate with the Ceros Player. For example, the close button function tells Ceros to close the panel.

<script type="text/javascript" src="//sdk.ceros.com/ceros-sdk-v2.min.js"></script>

Make a Close Button

It’s easy to add a close button or link to your page. Just add this bit of code:

Link:

<a href="#" onclick="CerosSDK.closeProductPanel();return false;">Close</a>

Button:

<button onclick="CerosSDK.closeProductPanel();" title="Close"/>

Save the Cart Contents

The Commerce SDK also allows the customer’s basket contents to be saved in the shopping cart of your e-commerce site. To do this, it’s important that your Ceros Experience is either embedded in your main site or uses a vanity domain that is compatible with the security settings of your site’s cookies.

Also, some browsers require a valid P3P privacy header to be set in order for session cookies to be preserved across iFrames.

Connecting to Ceros

Now that your pages are created, it’s time to connect them to your Ceros experience.

  1. Click the Commerce button of your current project in the Ceros Admin.
  2. Add the URLs for your product page and checkout page (optional).
  3. Replace the part of the Product Panel URL that identifies your product with {id}.
    For example: https://mywebsite.com/products/12345 would change to https://mywebsite.com/products/{id}
  4. Enter the height and width of your product and checkout pages in the Panel Size fields.
  5. Update and you’re done.

Add the Shopping Links

  1. Select the item you want users to click on. This can be any object on the canvas that isn’t already interactive (like videos).
  2. Open the Interactions Tab on the Inspector Panel. It’s the 4th one from the left.
  3. Select the On Click trigger and choose Open Product Panel.
  4. Enter the Product ID or SKU. This replaces the {id} portion of your Product Panel URL.
  5. Add a brief, but descriptive, title in the Name field. This will be displayed in your analytics, so be sure it’s both unique and easy to identify.

To open the Shopping Cart, select the clickable object and choose Open Shopping Cart from the Interactions Tab.

Try It Out

Click the Preview button to try out your new Commerce Panels in real time.

For more advanced Commerce Panel techniques, such as shopping from Facebook, you’ll want to work closely with our Support Team. Feel free to email us at support@ceros.com.