The admin can add multiple patterns for 3D Configurator products. These patterns allow end users to design products with more customization options.

To add patterns, navigate to Product Designer > 3D Configurator > Manage Pattern. Here, the admin can view all pattern categories in a list view.[1]

To create a new pattern category, click Create Pattern Category. This will redirect the admin to the category configuration page.[2]

On the Add Pattern Category page, configure the following fields:

– Category Title: Enter the category title. This title will be visible while configuring the 3D Configurator product.

– Assign as Root Category: Enable this toggle to add the category as a root category.

– Category: If the category is not assigned as a root category, this dropdown will appear. The admin can use it to assign a parent category.

– Store View: Select the store view. If multiple stores are available, this option allows the admin to assign the category store-wise.

– Status: Select the category status.

– Pattern Images: Upload pattern images for the category. Only SVG format is accepted, and the image size must be 1024 x 1024 px.[3]

The uploaded patterns will be displayed in a grid view below. From there, the admin can configure the Pattern Name, Price, and Status for each pattern.

To remove any pattern, select the Remove checkbox for that pattern and save the settings. Once all configurations are done click on the Save button to save the category.[4]

Once the category is added, it will be displayed in the grid view. The admin can Edit, Delete, or Enable/Disable the category from the Action column.[5]

For bulk actions, select the required categories and choose the preferred option from the Action dropdown.[6]

Once the simple product has been added with all the required configurations, such as the image, catalog view, weight, quantity, category, and website, navigate to the Designer Settings section.

First, enable the Designer Tool for the product. Then, select the 3D Product as the Designer Type.[1]

Once the 3D Type is set to 3D Customizer, the layout is automatically set to the default 3D Layout. Now navigate to the 3D Products section to configure the 3D settings.

The admin can enable AR View for end users by enabling the AR toggle. This allows end users to view designer products in an augmented reality view.

To create a 3D Customizer Product, select 3D Customizer as the 3D Type.[1]

Next, upload the required 3D file. Only GLB and GLTF file formats are supported. After uploading the 3D file, upload the corresponding SVG layout for the 3D product.

Once the GLB/GLTF file and the SVG layout are uploaded, click the Configure Data button to define the required data for the 3D Configuration.

This action opens the Configure Data pop-up, where the admin can customize the 3D Part Configuration, Styles, and Output Configuration settings.[2]

The 3D Part Configuration section is loaded with all the part fields available in the uploaded 3D GLB file. All detected parts are listed in this section for configuration.

Configure the following fields:

– Part Title: This field is prefilled from the GLB file.

– Part Image: Upload an image for the part. This image will be displayed in the Designer tab for the respective part. Supported file formats are SVG, JPG, JPEG, and PNG. The maximum allowed file size is 100 KB.

– Patterns: Select the pattern categories to display in the designer tool. The admin can select multiple categories.

The admin can also configure variants for each part using the following fields:

– Variant Title: This field is prefilled from the GLB file.

– Variant Image: Upload an image for the variant. This image will be displayed in the Part tab under the Variant section. Supported file formats are SVG, JPG, JPEG, and PNG. The maximum allowed file size is 100 KB.

– Status: The admin can set the status of the variant.

– Variant from SVG and Variant from GLB: These are read-only fields for the variant.

– Is Default: If multiple variants are available, the admin can set any variant as the default by selecting this option.[1]

Note: Variants are generated from the uploaded GLB and SVG files only. The admin cannot add variants manually.

In the Styles section, the admin can upload and manage style files.

To upload a style, click the Upload section and upload the required style file. Only the SVG file format is supported.

Once uploaded, the SVG style files are displayed in the grid view. The Image column displays the uploaded SVG image.

The admin can also upload a Thumbnail Image for each style. This thumbnail image will be displayed in the Designer Tool.

Enter the Label for the style. This field is required for the tool.

The admin can set the style status as Enabled or Disabled. To remove a style, select the Remove checkbox for the respective style and save the settings.[1]

In the Output Configuration section, the admin can upload output files for different output types. The admin must upload the Original Size Image, Original Size Reverse Masking Image, and 1024 × 1024 Dimension Image. The supported file format for all three output files is SVG only.

Once all Data Configuration is done click on the Done button to save changes.[1]

Once the product is saved, the Standard Position button appears in the 3D Product section.

Click the Standard Position button to open the Designer Tool and set up the standard position.

The standard position helps the admin define the default view of the 3D product and configure the design area for text and images.

To add a position, select the Part tab and configure the following fields:

– Name: Enter the position name. This helps identify the position in the tool.

– Thumbnail Image: Upload a thumbnail image for the position. This image will be displayed in the tool to help end users recognize the position.

– Lock Position: Enable this toggle to lock the position, if required.

– Position Type: Select the position type from the dropdown. The position can be configured for either Image or Text.

After configuring the required fields, click Add Position to add the position to the 3D canvas.

Ensure that the camera is positioned correctly to capture the object position accurately.[1]

Once a position is added, the Capture Camera Position button appears.

Click the Capture Camera Position button to recapture the camera position for the selected position.

All added positions are displayed in the Listed Position section with their respective titles.

The admin can add multiple positions across different parts.

Click the Save & Back to Store button to save the changes.[2]

In the My Designs section, all styles added by the admin are displayed. The end user can click See All to view the complete list of available designs and select the preferred style to load it into the Designer Tool.[1]

All available parts are displayed as tabs in the Designer Tool. The end user can select the preferred tab to view and configure the available options for that specific part.

In the Part sub-tab, the user can view the Colors section, where all SVG colors available for the selected part are listed. To change a color, the user can click the respective color button. This opens the color selection window, allowing the user to configure color. Here the user has two options: Solid color and Gradient.[1]

In the Solid Color section, the end user can select any solid color from the available printable colors or choose a custom color using the color picker. The end user can also enter a HEX, HSL, or RGB value to apply a specific color.[1]

In the gradient section admin can configure the gradient design configure the following fields for gradient:

– Color Stops: The end user can select color stops to create a gradient. To add a color, click the color picker and choose the desired color to include in the gradient.

– A maximum of four colors can be added. Once four colors are added, the color picker will no longer be available.

– To change the value of an added color, click the respective color and update the value from the color picker. To remove a color, hover over the respective color and click the Cross button.

– Type: The end user can select the gradient type based on the required appearance of the design. Two gradient types are available: Linear and Radial.

– Linear: When the Linear gradient type is selected, the gradient is applied in a straight direction across the selected design area. The user can configure the Rotation value to adjust the direction or angle of the gradient and the Scale value to control how the gradient is spread across the design.

– Radial: When the Radial gradient type is selected, the gradient is applied in a circular pattern from a defined center point. The user can configure the Radius to control the spread of the gradient, along with Center X and Center Y values to adjust the position of the gradient center within the design area.[1]

Customers can add patterns to the canvas from the Pattern section. The assigned pattern categories will be displayed in this section, and users can search for a specific pattern.

Click the Reset button to reset the selected pattern.[1]

Users can change the pattern color by clicking on the color option. This action will open a color picker, allowing users to select their preferred color.

Users can also configure the Scale and Rotation settings for the pattern.[1]

Using the Text feature, the end user can add text to the 3D canvas. If a Standard Position is configured, the user can place the text within the predefined position. The user can also add text anywhere on the canvas as required.[1]

Once the text is added, the user can modify it using the available options in the Operation Bar. The user can copy, crop, or delete the text, as well as change the font, size, color, and opacity. The user can also apply formatting options to customize the text appearance according to the design requirements.[2]

From the upload tab the user can upload the image to canvas. If a Standard Position is configured, the user can place the image within the predefined position. The user can also add the image anywhere on the canvas as required.[1]

Once the text is added, the user can edit it using the Toolbar. To access additional editing options, click the Edit button on the toolbar. This opens the Operation Bar, where the user can further modify and customize the selected text.[2]

The user can add Clipart using the Elements tab. All clipart configured by the admin in the backend is displayed in this section. The user can browse the available clipart and use the filter options to refine the results and find the required clipart more easily.[1]

At the bottom of the canvas, the user can zoom in and zoom out using the available radio buttons. The user can also view the approximate size of the selected object.[2]