Selling and Buying a ‘Colourful Toy Book’ on an Online Shop

Imagine you own an online toy shop. One of your products is a customisable toy book with multiple parts that have different colour options that customers can choose from. You want to show the colourful toy book in 3D on your online shop – a WordPress Woocommerce website and allow customers to pick colour options for the different parts before adding the product to the shopping cart.

Subscriber – Toy Book Owner

  • Get a 3D digital model of the toy book made.
  • Create the Woocommerce Product – Colourful Toy book on your WordPress site.
  • Subscribe to our Online Product Configuration Service (OPCS).
  • Login as Subscriber on OPCS.
  • Import the toy book.
  • Create a palette of available colours for the toy book product.
  • Generate the e-commerce link of the product for use on your WordPress site.
  • Create a landing page on your site, use the e-commerce link for the product.
  • Download the OPCS plugin, install and activate it in WordPress.
  • Open your online shop to your customers.

Shopper – Customer

  • Visit your online shop, i.e. your WordPress site.
  • Open the landing page.
  • Click on the e-commerce link to open the configurator of the Colourful Toy book.
  • Configure the colours of the parts of the toy book.
  • Add the product to the shopping cart.
  • Place the order and complete the purchase.

Signing Up to our Online Product Configuration Service (OPCS)

  • Start OPCS. You’ll be greeted with the login page:
  • Click the Sign Up button:
  • Fill out your details. Username, Password, Contact Name, and Email are required but Phone Number, Vendor Name, and Shop Link can be set later
  • When you’ve entered the required information, click Sign Up again. If your username is available, your account will be created and you’ll be logged in to OPCS:

Editing your Profile

  • Click the User icon in the top right corner:
  • Click the Edit User Profile button:
  • Here you’ll be able to edit your account details:
  • When you’re happy with your changes, click the Close button to save them

Importing a new model using our Online Product Configuration Service (OPCS):

  • Start OPCS.
  • If not logged in already, sign up to the OPCS using the sign up page.
  • You should be greeted with the Subscriber frontend:
  • Click on the Edit 3D Models button:
  • Click on the Import a Model button near the top to go to the Model Importer panel:
  • Download book.zip from our downloads page.
  • In Model Importer, click the Choose File button and locate the book.zip file:
This image has an empty alt attribute; its file name is Screenshot-2022-01-19-at-13.59.43.png
  • Press the Upload button to import the model.
  • The new model should now be loaded into OPCS:

Setting the ideal viewing position

  • Click on the Edit 3D Models button:
  • Click on your product’s Edit button:

Models imported at unideal angles can be rotated and transformed using the Model Editing Panel. The angle you set will be the angle your customers see this model from, therefore it is important to set a suitable initial viewing transform and rotation. The most important parameters here are Rotation, Translation, Eye Distance and Eye Angle Distance.

Rotation

A,X,Y,Z: X, Y and Z rotation around the A(axis). To set the rotation, set A by in degrees and X,Y,Z in 1s. X, Y and Z will have no effect if A is set to 0.

Translation

X,Y,Z: Translation can be finely tuned in each axis to place the model in the center of the screen.

Eye Distance

This sets the opening view distance when the model is opened. This number is best kept between the NearZ and FarZ values. This is set automatically on model importation, however can be changed if the need arises.

Eye Angle Distance

This rotates the model around the center point of the viewing platform. This is set automatically on model importation, however can be changed if the need arises.

The ideal settings for the book model is Rotation (60, 1, 0, -0.3), Translation (-0.02698, -0.0004, 0), and Eye Angle Degree (-140).

  • Adjust the above values for your product
  • Press the Close button to save your settings

Creating a Colour Palette

  • In the main panel, click the Edit Colour Palette button, here you can edit existing colours or add new ones to your colour palette:
  • To add a new colour, click the Add Colour button at the bottom:
  • If you enter a random hex code such as #a12b3c into the textbox, the colour will update:
  • Alternatively, you can click the colourful square to use a colour picker to change the colour:
  • When you’re happy with the colour, you can then change the name from New Colour to something more descriptive:
  • When you’ve finished adding colours to your palette, you can return to the main panel and see your new colours in the colour selector section:
  • You’ll now be able to use these colours to configure your product (you can change different parts of the model into different colours using the Selected Part: drop-down):

This is how Subscribers can generate a link to include on their webpage that will direct customers to the configurator for their products. Using our own WordPress WooCommerce as an example, we have a product called Colourful Toy Book:

  • Click the Edit 3D Models button:
  • In the Model Editor panel, click the Generate e-commerce link button for your product:
  • In the Woocommerce Product ID textbox, enter in the product ID for your product. This will update your link which you can then click to select it:
  • Copy the link using the Ctrl + C keys on Windows or Command + C keys on Mac and then press the Close button to save your changes
  • This is the link you will add on the shopping/landing pages of your e-commerce website
  • Paste the link onto your browser’s address bar to check it’s working as expected. You should be greeted with the Shopper’s frontend and be able to see and configure your product:
  • If you click the Summary and Shopping Cart button, you will then be able to view the configuration summary, save the current configuration, load a previous configuration, or add the product to the cart:
  • When you’re happy with your configured product, click the Add to Cart button:
  • Here you can increase/decrease the quantity of product you’d like to add to your basket. When you are happy, click Add to Cart again. This should redirect to your shop page and add the product to your basket:

Processing Customer Orders

  • Go to your shopping/landing page where customer’s click your product links
  • Click the link for the product that’s in the order
  • Click the Summary and Shopping Cart button
  • Click the Load button
  • Enter the ConfigId from the Customer’s order into the textbox at the bottom and click Load again:
  • The customer’s configuration should now be loaded. Click the Summary and Shopping Cart button to view the product’s summary:
  • Note down the part colour configuration details
  • Assemble and dispatch the products to your customer