In this tutorial, I will show you how to set up Byrst on your iPhone and WordPress site, and how to add 3D models to your WooCommerce products. By the end of this tutorial, you will be able to offer your customers a more engaging and interactive shopping experience with 3D and AR. You will also learn how to create your product at scale, so that your customers can view the 3D model in their space and get an idea of how it would look and fit before making a purchasing decision.
Before you can use the Byrst 3D Models for WooCommerce plugin, you need to make sure that you have the WooCommerce plugin installed and activated on your WordPress site. WooCommerce is a popular plugin that allows you to create and manage an online store on your website.
To install the Byrst 3D Models for WooCommerce plugin, go to your WordPress dashboard and navigate to Plugins -> Add New. In the search box, type “Byrst” and hit Enter. You should see the Byrst 3D Models for WooCommerce plugin in the results. Click Install Now and then Activate.
The Byrst 3D Models for WooCommerce plugin allows you to add 3D models to your WooCommerce products and display them in AR on your website. To use this plugin, you need to connect it with your Byrst account, which you will create in the next step.
Download the Byrst app from the iOS App Store on your iPhone. This app lets you create 3D models of your products using your camera.
The Byrst app allows you to create 3D models of your products using your iPhone camera. You have two options to create a 3D model: you can either take a single photo to make an AIR Sticker or take multiple photos to make a full 3D model. An AIR Sticker is a flat 3D model that only presents a single perspective of your product, but it can be viewed at scale in AR. A full 3D model is a more detailed and realistic representation of your product that can be viewed at scale in AR from any angle.
To make sure your 3D model matches the real-world size and appearance of your product, you can use the editing tools on the Byrst app. You can rotate, crop, or scale your 3D model to achieve the best results.
Rotate: This tool allows you to position the 3D model to define the front of the model. This is important because when you display your 3D model in AR, this will be the initial orientation that your customers will see. To rotate your 3D model, drag your finger on the screen to change the angle of the model.
Crop: This tool allows you to remove unwanted portions of the model, such as the background or the floor. To crop your 3D model, tap the crop icon and drag the slider to move the cube up. The content that is within the cube will remain while anything outside the cube will be removed from the 3D model. Note that you can also zoom in or out to fine-tune your cropping.
Scale: This tool allows you to adjust the real-world size of your 3D model. This is important because when you display your 3D model in AR, you want your customers to see the actual size of your product. To scale your 3D model, tap the scale icon and use the slider to increase or decrease the size of the model.
Activate your 3D model on the Byrst Platform. This is a cloud service that hosts and delivers your 3D models with high speed and reliability. You can also manage your 3D models on the Byrst Platform and access them from any device.
Connect your Byrst account with your WordPress site. To do this, you need to get a pairing code from the Byrst app. Tap the cog icon at the top left corner -> Pairing Code and copy the 5-character code. Then, go to your WordPress dashboard and navigate to Settings -> Byrst. Paste the pairing code and click Save Changes.
The settings you’ll configure here determine how these 3D models are presented along with your product.
Loading: This feature decides when the 3D model should start loading. It can be set to start loading immediately, or only when the model is about to be viewed or interacted with.
Reveal: This controls when the 3D model should be displayed. It can be set to show the model as soon as it’s ready, only after the user interacts with it, or manually when a specific action is performed.
Poster Color: This sets the background color of the initial display before the model is loaded. It can be set to any color, including transparent.
Enable AR: This button activates or deactivates the ability to view the model in Augmented Reality (AR), allowing the model to be viewed in the user’s real-world environment on supported devices.
AR Modes: This allows the user to select the type of AR experience they prefer. Options include viewing the model in the browser, launching the Scene Viewer app, or launching the iOS Quick Look app.
AR Scale: This controls how the model can be resized in AR mode. It can be set to allow resizing, or to keep the model at its original size.
AR Placement: This lets the user choose whether to place the model on a horizontal surface (like a floor) or a vertical surface (like a wall) in AR.
XR-Environment: This feature enables realistic lighting in WebXR mode, making the model look more natural in the user’s environment.
Custom AR Button: This button, which can be customized, launches the AR experience. It’s visible if AR is potentially available on the user’s device.
Add your 3D model to your WooCommerce product. Go to Products -> Add New or Edit an existing product. In the Product Data section, scroll down to Byrst 3D Model and click Select 3D Model. Choose your 3D model from the list of your Byrst models and click Select.
Preview and publish your product. You can see how your 3D model looks on your product page and in AR. When you are satisfied, click Publish or Update to make your product live.
