Скачать или смотреть How To Configure 3D Bits App For Optimal Shopify Product Monetisation and Sales Performance

3D Bits on Shopify app store
https://apps.shopify.com/3d-bits-1

Understand how to configure 3D Bits app for Shopify. Matas Ubarevicius will walk you through various settings on the BITBYBIT RUNNER theme app extension. You will learn how to optimize loading performance of your 3D product models and scripts, update bitbybit-runner.js JavaScript versions without updating the app, enable or disable 3D full screen mode, OpenCascade, JSCAD kernels, Havok physics engine, various event listeners. You will also learn how to customize the behaviour of 3D canvas by using a computation spinner. Matas will show how you can disable form inputs while computations happen in order not to trigger new computations if older ones are still in progress. We also will teach you how to try and attach and prepend a 3D BabylonJS canvas element to any HTML element in your product page by using a custom query selector. You will also understand when you should branch your 3D product page template and when that is not necessary.

Read more about the app
https://bitbybit.dev/blog/3d-bits-app...

Tutorial page
https://bitbybit.dev/start/shopify/tu...

#shopify #app #3dbits #3d #ecommerce #tutorial #lecture #lesson #course #onlinecourse #settings #configuration #options #monetisation #sales #optimization #performance #gettingstarted #beginner #beginnerfriendly #introduction #setup #installation #howto #cad #application #3dscan #shopifyapp #3dshopify #shopify3d #3dscanning #3dprint #3dprinting #gaussiansplatting #3dgs #gltf #shopifystore #3dmerchandise #3dgoods #3dproduce #produce #goods #3dstock #stock #3dcommodity #commodity #javascript #typescript #blockly #rete #bitbybitdev #parametricdesign #computationaldesign #babylonjs #opencascade #occt #havok #physics #physicsengine #gameengine #jscad #computeraideddesign #shop #store #3dsoftware #software #webapp #3dassets #parametric #procedural #3dproduct #3dproducts #shopifydeveloper #merchants #customers #customization #3dconfigurator #3ddesign #design #webgl #webgpu #variants #adaptable #algorithmicdesign #gamedev #interactive #reactive #3dmodeling #webxr #immersive #immersiveexperience #playcanvas #supersplat #splat #mtb #bike #3dbikegame #canvas #htmlcanvas #canvaselement

00:00 Explaining that you will learn about configuring various options of 3D Bits app for Shopify
00:10 Learn how to replace your 3D product canvas to where the pictures are
00:25 Showing that the 3D product on Shopify Dawn theme is currently placed on the bottom of the form
00:45 Showing the 3D Bits demo store with the natural placement of 3D canvas, where product pictures and media are usually placed in Shopify
01:30 Learn how to change 3D canvas placement through BITBYBIT RUNNER theme app extension by moving the standard block around
02:05 Explaining how to create media element with pictures of the product in order to use that as a 3D canvas placement location
02:40 Showing the product picture on Shopify web store and 3D canvas of 3D Bits app
03:10 Explaining how to replace the 3D product view to the picture media element
04:25 We enable "Try To Prepend" option and see the result
05:25 To remove pictures from the product page check "Remove Children Before Prepend" option
05:50 Explaining how the "Prepend With Query Selector" option allows you to customize the place where 3D canvas is placed on your Shopify product page, this might require expert help if your theme is very different from default Shopify themes
07:10 Discussing some other settings of BITBYBIT RUNNER theme app extension
07:25 "Runner CDN link" explained with some introduction to the technology behind bitbybit-runner.js file through https://bitbybit.dev platform
09:46 Explaining how users can show or hide full screen button on the left top corner of 3D canvas
10:10 Explaining the difference between "Inline Script" and "Public Script URL" settings of 3D Bits app
10:50 Explaining how you can customize behaviour of how 3D scene is handled in between input change events through "Execute JavaScript" setting
12:00 Learn how to change default camera position and point it to a specific target on your 3D product
13:10 Learn how and why you would need to load additional libraries through simple checkbox settings. You can enable Havok physics engine, OpenCascade geometry kernel, JSCAD kernel dependencies.
13:40 Explaining that additional features can make your product page load slower, so be aware of what you use and what you actually need for your specific 3D products
15:00 Giving you some ideas on how you could use Havok physics engine in your product pages by gamifying the shopping experience
15:50 Explaining background color setting
16:00 Learn how to load fonts for 3D text models made in combination with OCCT kernel
16:50 Learn how to show spinner and disable inputs while computing on your 3D Shopify product page