{"id":21730,"date":"2020-10-04T10:35:00","date_gmt":"2020-10-04T10:35:00","guid":{"rendered":"http:\/\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary"},"modified":"2025-02-16T13:42:47","modified_gmt":"2025-02-16T21:42:47","slug":"add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","title":{"rendered":"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/cloudinary.com\/guides\/e-commerce-platform\/select-the-right-e-commerce-platform-for-your-needs\">E-commerce<\/a> is a dynamic business. Shoppers are constantly browsing sites for the best deals or for the latest of their favorite products, adding to wish lists, and exploring product recommendations from friends and influencers. On the other hand, online vendors are always on a tear to try to draw in shoppers and convert clicks to cash with various techniques, such as by reducing page-load time, posting compelling product <a href=\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\">images<\/a>, and aggressively targeting ads.<\/p>\n<p>One way for e-businesses to maintain a competitive edge and deliver a riveting shopping experience is to display merchandise through a <a href=\"https:\/\/demo.cloudinary.com\/cloudydesk\/3d-image\/\">360-degree product viewer<\/a> (360 product viewer for short). This post shows you how to easily build one with jQuery on Cloudinary.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>All the code snippets in this post are on <a href=\"https:\/\/gist.github.com\">GitHub Gist<\/a>.<\/p><\/div>\n<h2>Step 1: Shoot a Product Video<\/h2>\n<p>Cloudinary offers unique capabilities through which you can enhance rich media, no matter how sharp and crisp they might already be. As a first step, take a <a href=\"https:\/\/cloudinary.com\/video_api\">short video<\/a> of a product that showcases how it looks from all angles, similar to this one:<\/p>\n<video controls=\"controls\" muted poster=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/w_700,c_fill,q_auto,f_auto,dpr_2.0\/wristwatchvideo_cqrzbi.jpg\" src=\"https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/w_700,q_auto,f_auto\/wristwatchvideo_cqrzbi.mp4\">\n<\/video>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Be sure to capture <strong>all<\/strong> the angles of your product in the video.<\/p><\/div>\n<h2>Step 2: Reference the Prerequisite Widget, Library, and JavaScript code<\/h2>\n<p>Create an <code>index.html<\/code> file and reference at the beginning of the file the following\u2014<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">Cloudinary\u2019s upload widget<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/jquery.com\/\">The jQuery JavaScript library<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/gist.github.com\/unicodeveloper\/98b612c8e163bd4f35bd53098dc2abfb\">The code for a 360-degree slider: <code>spinner.js<\/code><\/a>\n<\/li>\n<\/ul>\n<p>\u2014with the code in this <a href=\"https:\/\/gist.github.com\/Maharony\/6f7da148bcdcdcf5f4c4b06b86b35c93\">Gist file (<code>gistfile1.txt<\/code>)<\/a>.<\/p>\n<h2>Step 3: Activate the Product-Upload and Display Capabilities<\/h2>\n<p>Add to the <code>index.html<\/code> file the code for the following:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/gist.github.com\/Maharony\/1e3a1f341b157cabb0e7d1d187d13bde\">The upload button\u2019s UI container<\/a>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Upload_360-Product.png\" alt=\"Button Labeled Upload Or Take Your Own Video\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"943\"\/><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/gist.github.com\/Maharony\/4ffe6a1551b9093c94a01d4de8ad2805\">The <code>widget<\/code> function in the <code>&lt;script&gt;&lt;\/script&gt;<\/code> tag<\/a> just before the <code>&lt;body&gt;<\/code> tag.<\/p>\n<p>{note}\nReplace the variable <code>cloud_name<\/code> with the one from your Cloudinary dashboard.\n{\/note}<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/gist.github.com\/Maharony\/7389c53e4923581db7a44ee2b16a207f\">The <code>build<\/code> function<\/a>, which wields the 360-degree display magic<\/p>\n<\/li>\n<\/ul>\n<p>This process is now in place:<\/p>\n<ol>\n<li>When called, the <code>openUploadWidget<\/code> function pops up a widget with which you can upload a product video.<\/li>\n<li>The <code>widget<\/code> function computes the frame gap from the video duration and the number of frames to obtain from the video each time. In this example, that number is 100.<\/li>\n<li>Cloudinary calculates the size of the images based on the viewport and calls the <code>build<\/code> function.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Load_360-product.png\" alt=\"Loading of Video in Progress\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"943\"\/>\nMagic<\/p>\n<h2>Try Out the Viewer<\/h2>\n<p>Have a try of this <a href=\"https:\/\/demo.cloudinary.com\/cloudydesk\/3d-image\/\">360 product viewer<\/a>:  upload a video, click its image, and drag your cursor from left to right and back. What do you think?<\/p>\n<p>This [30-second demo]https:\/\/cloudinary-res.cloudinary.com\/video\/upload\/w_600,c_fill,q_auto\/dpr_auto\/360_demo.mp4) walks you through the steps for creating the 360 product viewer on a smartphone. Easy as pie!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,q_50\/360productviewer_teoold.gif\" alt=\"A 360-Degree View of a Wrist Watchewer\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"416\"\/><\/p>\n<h2>Leverage the Viewer in Various Ways<\/h2>\n<p>By offering a 360-degree view, e-businesses can showcase products three-dimensionally, delivering more details and potentially attracting purchases. You can deploy this view for many purposes, for example:<\/p>\n<ul>\n<li>\n<strong>Travel.<\/strong> From interior to exterior views of hotels to tours and sights, excursion previews that present a 360-degree view better prepare travelers for upcoming trips.<\/li>\n<li>\n<strong>Real estate.<\/strong>  A 360-degree view accords prospective home buyers a richer virtual-tour experience.<\/li>\n<li>\n<strong>Event promotions.<\/strong> With a 360-degree view, attendees can take in the nuances of an event or venue from the point of purchase.<\/li>\n<\/ul>\n<hr \/>\n<h2>Want to learn more about image editing?<\/h2>\n<p>Have a look at these articles:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\">Image-Editing Basics and a Tutorial for Automation With AI<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">How to Automatically Remove Photo Backgrounds in Seconds With AI<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/10_great_jquery_sliders_and_5_ways_to_build_one_yourself\">Top 7 jQuery Sliders and Three Ways in Which to Create Your Own<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/adding_watermarks_credits_badges_and_text_overlays_to_images\">Adding Image Watermarks, Credits, Badges and Text Overlays to Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\">Add the 360 Product Viewer to Your Commerce Site with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject\">New AI-Based Image Auto-Crop Algorithm Sticks to the Subject<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_improve_your_shopify_s_store_loading_times_using_cloudinary\">Integrating Cloudinary Into Your Shopify Store<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">How to Overlay Text on Image Easily, Pixel Perfect and With No CSS\/HTML<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/taking_cloudinary_s_magento_extension_to_the_next_level\">Taking Cloudinary\u2019s Magento Extension to the Next Level<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21731,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[89,98,134,177,183,305],"class_list":["post-21730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-digital-asset-management","tag-e-commerce","tag-guest-post","tag-javascript","tag-jquery","tag-video-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create a 360 Product Viewer<\/title>\n<meta name=\"description\" content=\"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-04T10:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-16T21:42:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary\",\"datePublished\":\"2020-10-04T10:35:00+00:00\",\"dateModified\":\"2025-02-16T21:42:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA\",\"keywords\":[\"Digital Asset Management\",\"E-commerce\",\"Guest Post\",\"Javascript\",\"jQuery\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\",\"name\":\"How To Create a 360 Product Viewer\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA\",\"datePublished\":\"2020-10-04T10:35:00+00:00\",\"dateModified\":\"2025-02-16T21:42:47+00:00\",\"description\":\"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create a 360 Product Viewer","description":"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary","og_description":"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2020-10-04T10:35:00+00:00","article_modified_time":"2025-02-16T21:42:47+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary","datePublished":"2020-10-04T10:35:00+00:00","dateModified":"2025-02-16T21:42:47+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA","keywords":["Digital Asset Management","E-commerce","Guest Post","Javascript","jQuery","Video API"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary","name":"How To Create a 360 Product Viewer","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA","datePublished":"2020-10-04T10:35:00+00:00","dateModified":"2025-02-16T21:42:47+00:00","description":"Learn how to create a 360-degree product viewer with jQuery on Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding a 360-Degree Product Viewer to Your E-commerce Site With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719195\/Web_Assets\/blog\/360-Product-Viewer\/360-Product-Viewer.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21730"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21730\/revisions"}],"predecessor-version":[{"id":36868,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21730\/revisions\/36868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21731"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}