Tutorial: how to embed your 3D Views into WooCommerce

Jul 28 · 4 min read

Here at Cappasity we have prepared a set of instructions on how to integrate interactive 3D Views of items into online stores built on WooCommerce. After uploading your 3D Views into the Cappasity account, you can add several annotations to every item to make the product card even more informative and engaging. Let’s dive right in.

The 3DShot app is an innovative solution by Cappasity that allows anyone to create high quality 3D Views of products with only a smartphone. 3DShot has been created so that all you need to make an interactive 3D image of is your product, decent lighting and a smartphone (we recommend using iPhone X or newer smartphone models due to excellent camera quality). The app allows you to create a 3D View of almost any item,from fine jewelry to cars, that can be easily integrated into your online store or a classified of your choice. 3D content increases the average time a consumer spends on a product page, and eventually, increases conversion rates.

WooCommerce is a customizable, open-source e-commerce platform built on WordPress. The company started in 2008 as WooThemes, an online store for themes for WordPress. The first plugin for e-commerce emerged in 2011, enabling users to transform their WordPress site into a professional online store.

WooCommerce quickly became the fastest-growing e-commerce platform on the Internet. It passed seven million downloads in its first year, and to this day remains one of the largest platforms for small-scale online stores in the world. For instance, in January 2021, a total of 3,876,748 websites were using WooCommerce. While the number of websites using WooCommerce may be interesting, the market share of WooCommerce is even more representative.

According to Built With, the current 2021 market share for WooCommerce is 29% (for comparison, the WooCommerce market share was 26% in 2020). It is one of the most popular choices among the top million e-commerce sites, ahead of both Magento and Shopify.

And now, it’s possible to make your WooCommerce store even more appealing by integrating interactive 3D Views made with the 3DShot app.

To integrate your 3D View into an online store on WooCommerce and add annotations to items, just follow these simple steps:

1) Place the object in a well-lit spot and slowly circle around it.

2) Use zoom to remove the surrounding objects.

3) Apply filters to improve the 3D View.

4) Upload it to your Cappasity account.

5) If you would like to add annotations to the resulting 3D View, click Add annotation and type the annotation text.

6) Select the show type and add it.

7) Choose the position for your annotation (you can place several annotations on one item).

8) Click “Embed” and copy the embed code for the 3D View.

9) Go to the WordPress admin page.

10) Open the product and paste the embed code in the description.

11) Update the product information. All done!

Follow us on Instagram, Twitter or Facebook for more tutorials on creating immersive content for your business.

If you have any questions about how to create immersive content, feel free to reach out to us!

Cappasity Blog