back

  1. Before your start
    1. Intro to BRIKL
    2. Customer journey
    3. Dashboard
  2. Initial setup
    1. Setup your account
    2. Setup your store
    3. Setup your microsite
    4. Preparing for launch
  3. Your account
    1. Business information
    2. Brand your account
    3. Add currencies
    4. Add languages
    5. Add social links
    6. Setup tax rates
    7. Setup shipping rates
    8. Setup Payments
    9. Domain
    10. Email (DKIM)
  4. Setup your online store
    1. Introduction
    2. Multi Store
    3. Themes
    4. Domains
    5. Pages
    6. Seo
    7. Header and Footer
  5. Setting up microsites (teamstores)
    1. Introduction
    2. Setting up
    3. Multi Store
    4. Theme
    5. Pages
    6. Header and Footer
    7. Copy a store
    8. Add products
    9. Organize products
    10. Personalization
    11. Add fundraising fee
    12. Customer Panel
    13. Add password
    14. Open and close date
    15. Ship rates
    16. Assign division
    17. Assign activity
    18. Add contact info
    19. Reporting
  6. Setting up 3D Design Studio
    1. Introduction
    2. Terminology
    3. Design Studio
    4. Design Room
    5. Studio Editor
    6. Ecommerce Integrations
    7. Themes
    8. Add design template
    9. Add 3D product
    10. Add 2D product
    11. Create color library
    12. Create material library
    13. Create image library
    14. Create print library
    15. Add design step
    16. Add placeholder
    17. Add personalization
    18. Add background
    19. Add lighting
    20. Share Studio link
    21. Export a 3D image
    22. Export a 3D GIF
    23. 3D Viewer app
    24. Share 3D View link
    25. Create a 3D embed link
    26. Export print file
  7. Content Builder
    1. Introduction
    2. Align icons and text
  8. Products
    1. Introduction
    2. Add product
    3. Add product package
    4. Organize your products
    5. Add a variant
    6. Add an attribute
    7. Add Personalization
    8. Managing inventory
  9. Orders
    1. Leads
    2. Quotes
    3. Orders
  10. Discounts and upcharges
    1. Discounts (promotions)
    2. Coupon
    3. Upcharges
  11. Payments
    1. Payment gateway
    2. Payment methods
  12. Locations
    1. localization
  13. Shipping
    1. Set shipping rate
    2. Setup ShipStation
  14. Customers
    1. View customer
    2. Edit customer
  15. Taxes
    1. Set tax rate
    2. Setup TaxJar
  16. Reporting
    1. Reports
  17. Integrations
    1. Webhooks
    2. API

Set up a 3D Design Studio

Featured Image

6.1 Introduction

The Design Studio is a 3D Configurator app that's part of the BRIKL ecommerce platform. It allows customers to customize your products.

 

6.2 Terminology

  • UV mapping is the process of projecting a 2D image on a 3D model.
  • UV unwrapping is the process of translating a 3D surface onto a flat 2D image.
  • SVG files are required to make designs customizable by changing colors or adding prints.

 

6.3 Design Studio

The Design Studio is the 3D configurator app in your storefront, which customers can use to create a unique design.

 

Template

  • Customer selects a design template

Color fill

  • Customer selects an area on the model or from the dropdown to fill with a color.
  • Color is selected from a color palette

Print fill

  • Customer selects an area on the model or from the dropdown to fill with a print.
  • Customer uploads their own prints or selects from the print library
  • BRIKL supports PNG, JPG, SVG, AI or PDF formats. The max file size is 20MB.
  • Prints can be scaled, rotated and offset (vertically and horizontally)
  • The DPI calculator will guide the customer on the resolution of the image. Below 150 DPI is considered “Very low, between 150-300 DPI is considered “Low” and higher than 300 DPI is considered “Good”.

Images

  • Customers uploads their own images select from the image library
  • BRIKL supports PNG, JPG, SVG, AI or PDF formats. The max file size is 20MB.
  • Once an image has been uploaded, it can be added to the 3D model.
  • Images can be resized, rotated and repositioned.
  • The DPI calculator will guide the customer on the resolution of the image. Below 150 DPI is “Very low, between 150-300 DPI is “Low” and higher than 300 DPI is “Good”.

IMPORTANT: Images cannot overlap the seams of garments.

 

Text

  • Customers can add their own text and select the font, color fill, color outline and spacing of the text
  • Text can be rotated and repositioned.
  • The BRIKL software also calculates the the approximate dimensions of the text (height and width)

IMPORTANT: Text cannot overlap the seams of garments.

 

Placeholders

  • Customers can add their name, number, logos or prints (eg, flags) into defined areas and have them resized accordingly.

 

Order details

  • Customers can enter the names and number of the team members
  • Customers can select product options (multi-select or single-select)

Checkout / Quote request

  • Once a design has been completed, it can be added to the cart for checkout and/or it can be submitted as a "request for quote".
  • Upon checkout or submitting the request, the customer receives an email notification for confirmation.

 

6.4 Design Room

The Design Room allows you to do following:

  • Convert 2D designs into a 3D rendering (3D Viewer app)
  • Create print-ready files of 3D models
  • Share an online preview link of your designs
  • Export 3D images and GIFs

The Design Room is accessible only via the BRIKL Dashboard by admin-users with the right permissions. The Design Room is not accessible by customers.

 

6.5 Studio Editor

BRIKL Studio Editor

The BRIKL Studio Editor is an intuitive, yet powerful Configuration Management Tool. You can configure the Design Studio with a few clicks, and upload 3D models or new designs with a simple drag and drop.

Getting started

There are two entry points to the Studio Editor.

Entry point 1: Navigate to the Catalog tab and access the Products link. Select a product and click on the Studio Editor tab.

 

Entry point 2: Navigate to the Design tab, and select the Studio Editor tab. Select the product from the drop down menu in the Studio Editor.

Adding a 3D model

As a first step, a 3D model must be uploaded to the Studio Editor. 

While you can upload your own 3D model, we strongly recommend you to contact BRIKL to create and upload 3D models for you. 

IMPORTANT: If you have created a new product and enabled it to be “custom”, but don’t have digitization files uploaded yet, the Studio Editor will NOT work. Please contact BRIKL for more information.

Assets:

You can find the 3D model files in the Studio Editor under Studio settings > Assets.  A 3D model has 3 files: obj, mtl and UV map. All three files are required for a correct 3D rendering.

Configuring the Design Studio

a) Designs

Navigate to Studio settings > Design Templates.

Design templates can be created in Illustrator and imported into BRIKL with a simple drag and drop. 

Learn more about Design Templates and how to add them to BRIKL here.

b) Placeholders

Navigate to Studio settings > Placeholders

Placeholders are defined areas or markings where you can enter names, numbers, logos or prints. Adding and defining placeholders is simple and intuitive.

Learn more about Design Templates and how to add them to BRIKL here.

c) Design steps

Navigate to Studio settings > Design Steps

Design steps (or customization steps) allow you  to customize designs in different ways by changing colors and prints, or adding graphics and text. 

Learn more about Design Steps and how to edit them in BRIKL here.

d) Elements

Navigate to Studio settings > Elements

Elements correspond to the individual parts of your 3D model. You can enable/disable elements and assign color palettes to them.

The individual parts of the 3D model may not correspond to the individual parts of your UV map. 

The Elements tab is used to assign color palettes to elements that are part of the 3D model, but that are not part of the UV map. An example is a garment zipper. Zippers are not part of the UV map (since they are not part of the production pattern or print file), but they are part of the 3D model.

e) Background

Navigate to Studio settings > Assets

You can change the background of your Design Studio by uploading a jpg image. Backgrounds are responsive (with the anchor on the right hand side of your Design Studio). Therefore, if you add for instance a logo to your background, its positioning will be fixed on the right hand size as you resize the screen.

Learn more about Backgrounds and how to add them to BRIKL here.

Sharing the Design Studio

You can copy a link of the Design Studio for a specific product and share with others via email. 

Learn more about Sharing a Design Studio link here.

 
             

6.6 Ecommerce Integrations

BRIKL Ecommerce Platform

The 3D Configurator App has been built to work seamlessly within BRIKL's Ecommerce platform. You can simply drag-and-drop a 'custom product' into a website page to allow your customers to create their own unique designs in 3D.

Other Ecommerce Platforms

BRIKL also offers integrations with 3rd party ecommerce platforms like Shopify or Magento. We have built custom apps that can be plugged into your Shopify or Magento store. While we have made sure the integrations are as seamless as possible, it is important to note following:

  • Loading time will be faster using the BRIKL ecommerce solution
  • A limited feature set is available for 3rd party integrations. For example, the 3D configurator save & load functionality is only available for the BRIKL native ecommerce solution, not for 3rd party ecommerce platforms.

Private Shopify app

BRIKL has built a private Shopify app that can be installed in your Shopify store. The BRIKL native app for Shopify works seamlessly with the Shopify checkout process.

Contact us now to have the private Shopify app installed for your shop. 

 

Magento extension

BRIKL has build a Magento extension for BRIKL. Visit the Magento marketplace and download the BRIKL extension.

Visit our installation guide here

Contact us now to help you get started.

 

6.7 Themes

You can customize your theme content and settings from your BRIKL Dashboard by using the theme editor. The theme editor includes a theme preview and a sidebar that you can use to edit theme settings.

6.8 Add design template

Design templates are the base designs that you can modify using BRIKL 3D Configurator by changing colors or adding prints.

 

How To Upload A Design Template

Design Templates are SVG files based on UV maps of your 3D models. Design templates are the base designs that you can modify using BRIKL 3D Configurator by changing colors or adding prints.

This guide has been written specifically for Adobe Illustrator.  You can use other design software like CorelDraw. Please contact BRIKL for more information.

Step 1 - Download the UV map from BRIKL

Before creating an SVG design template in Illustrator, you must first download the UV map as an SVG file from the BRIKL Dashboard. This file is what we call the “Base template” in BRIKL.

IMPORTANT: The first step is to download the UV map as an SVG file from BRIKL. We highly recommend doing this even when you have created and uploaded your own 3D model and UV map to BRIKL. Doing so will ensure that you always create your design templates based on the correct UV map.‍

1. Navigate to the BRIKL Dashboard

2. Select Design on the left-hand side menu

Dashboard Design menu

3. Choose your product and select the option to open inside the Studio Editor

Dashboard Custom product in Studio Editor

4. Go to Studio Settings

Studio settings

5. Select Assets

Design Template 5

6. Scroll down to Base template

 

7. Download the SVG file

Base template

IMPORTANT: The SVG file is a large file that may take some time to download.‍

Step 2 - Save SVG  

After you click Download, it will open up a new tab in your browser.

  1. Right-click on the page
  2. Choose Save As
save as
  1. Make sure that the "Save As" type is an SVG Document.
  2. Press Save to download your SVG.
save as svg
  1. You are ready to edit the SVG template in Illustrator

 

Step 3 - Open SVG File in Illustrator

Open your SVG file in  Illustrator.

  1. You will notice multiple lines: Stitching line, cutting line, and perhaps even a sublimation line. The distance between the stitching line and the cutting line is what is called the “seam allowance”.
  2. Keep the most outer line which is either the cutting line or the sublimation line.
  3. Remove all other lines.
Design Template 9

IMPORTANT: Each product has its own unique pattern layout. Do not change the position of the pattern pieces. Changing the position will make it no longer compatible with the BRIKL UV map that is available in the system.‍

IMPORTANT: Each product has its unique artboard size. Do not change the artboard size. Changing the artboard size will make it no longer compatible with the BRIKL UV map that is available in the system. You can check the artboard size in Illustrator by going to Document Setup.

Step 4 - Create a Design Template in Illustrator

You must create different layers with specific naming which can be recognized by BRIKL software when importing the design template back into the system. There are two different types of layers:

  1. COLORZONE
  2. VIEWZONE

IMPORTANT: Do NOT group elements

  • Make sure not to group any elements within the logo layer. Grouping elements for logos or any other vector shapes will make the file UNREADABLE by BRIKL software.
  • Make sure also not to group any colors within the color layer. Grouping color elements will make the file UNREADABLE by BRIKL software.

Instead of grouping, you can optionally create a Compound Path to reduce the number of elements of a logo of the vector shape.

  1. Select the objects you want to group, right-click on it
  2. Choose Make Compound Path
Design Template 10

IMPORTANT: Compound paths can only merge paths with the same color. You can undo a compound-path by right-clicking the path and then releasing the Compound path.

Customizable COLORZONE layer

There can be multiple color layers.

Color layers contain all the base colors that are separated from each other in individual layers. Colors are customizable by the end-user.

The layer name should follow this naming convention: COLORZONE-(number). For example, COLORZONE-1, COLORZONE-2.

If your design uses strokes and you want the strokes to be customizable. You will first need to expand the strokes and transform them into a shape. 

  1. Select the strokes to convert to an object 
  2. In the top menu hover the Effect option
  3. Select Path > Outline Stroke
Design Template 11
  1. In the top menu hover the Object option
  2. Select Expand Appearance
Design Template 12

Your stroke is now an object that can be filled with color in the BRIKL 3D Configurator.

IMPORTANT: When you create a design that covers a seam line (e.g. zipper on the front panel), you must make sure to separate the design into two parts (for each side of the seam line).

IMPORTANT: When using a clipping mask make sure no group has been created inside the mask. 

IMPORTANT: Make sure to write the color name in UPPER CASE and check the spelling, else it cannot be recognized by BRIKL software.

Non-customizable VIEWZONE layer

There can be multiple view layers.

The view layer contains parts of the design that cannot be customized. An example would be an embedded image, logos or artwork.

Images in the view layer can be either PNG or SVG.

  • You can upload a PNG. It will be faster to load but you will not be able to use it in your  ready-to-print file.
  • You can upload an SVG. It may take more time to load but you will be able to export a ready-to-print file.

‍IMPORTANT: Make sure to write the view name in UPPER CASE and check the spelling, else it cannot be recognized by BRIKL software.

‍IMPORTANT: Make sure to embed any images added to your design template. Otherwise your image will not be added to your SVG export.

Design Template 13

IMPORTANT: When using a pathfinder to crop a specific design, sometimes it will leave an invisible outline. To identify this, simply ungroup the cropped design, locate the outline in the layer and delete it. An invisible outline can affect the pattern if not removed and will lead to errors when uploading it back into the BRIKL system.

IMPORTANT: Using a pathfinder will automatically group the objects. We need to avoid this. Therefore after using pathfinder, make sure to ungroup the objects and use the compound path method.

To convert objects to an image in Illustrator:

  1. Select the objects
  2. Then hover over to Object menu on the top navigation bar of Illustrator, and select the Rasterize option
  3. Check the transparent option for the background.
  4. Then click Ok
Step 5 - Save the finished template as an SVG

After you have created your template, the next process is to save it as an SVG.

  1. Go to File, Save As
Design Template 14
  1. Then go to Save as type and choose SVG(*.SVG)
  2. Select the Use Artboards then Save
Design Template 15
  1. The SVG option will come up. Select Image Location
  2. Change it to Preserve & select “Preserve Illustrator Editing Capabilities”
  3. Then, click Ok
Design Template 16
Step 6 - Upload the design template

Finally, you are ready to upload the SVG design template

  1. Navigate to the BRIKL dashboard and go to the Studio Editor
  2. Select the product from the top bar
  3. Go to Design Templates
Design Template 17
  1. Create new design template
Design Template 18
  1. Open the newly create template
Design Template 19
  1. Drag and drop your file
Design Template 20
  1. Add a sort number for your template
Step 7 - Naming the zones

You can name each of the zones,

‍IMPORTANT: If you don’t name the zones, the names of the color zone layers will be the default names (e.g. COLORZONE-1).

Step 8 - Assigning materials and colors

You can assign a material to each zone. Each material is associated with a color palette. You can learn how to create a color palette here.

Assign a color palette and materials to each COLORZONE on your design.

IMPORTANT: You can create different color palettes for each design template.

For example, in case you have 3 design templates and 2 different materials (e.g. fabric and zipper):

  • Material 1 - Design Template 1:  Colors
  • Material 1 - Design Template 2:  Colors
  • Material 1 - Design Template 3:  Colors
  • Material 2 - Design Template 1:  Colors
  • Material 2 - Design Template 2:  Colors
  • Material 2 - Design Template 3:  Colors
Design Template 21

Once done, refresh and preview your design.

 

Design Template 22
 

 

How to add a hidden zipper to a design template

A hidden zipper is a zipper with very fine teeth. It's sewn into a garment in such a way that it makes the zipper invisible, hidden in a seam.

We can distinguish two types of zippers: the invisible (or hidden) zipper and the visible (or exposed / apparent) zipper.

  1. A visible zipper, sits right on top of your garment. Exposed zippers are set into garment areas without seams.
  1. A hidden zipper is a zipper with very fine teeth. It's sewn into a garment in such a way that it makes the zipper invisible, hidden in a seam. The only part left visible is the pull tab, and that tends to be smaller than other types of zippers. Unlike a regular zipper, when sewing in an invisible zipper, the seam is sewn after the invisible zipper is sewn. 

 

When a hidden zipper is added to the center front of a garment, it creates the appearance of a seamless piece of cloth. This is particularly important when adding graphics or text. 

 

Hidden Zipper 1

 

Once you have familiarized yourself with the concept of design templates, you are now ready to apply this knowledge to include a hidden zipper in your design template. 

For the hidden zipper you first need to split the front panel of your pattern in two. This means, you need to split up all the artwork (graphics or text). In other words, if you have a graphic or a text covering the zipper, you will need to have this graphics and text split up in two pieces, one for each side of the zipper.

Why is it important to truncate your artwork? The BRIKL software needs to create a print output file that has the two panels separated.

Example Of An Incorrect Hidden Zipper Design Template

This is an example of an incorrect hidden zipper design template. The front panel graphics are all merged together into one block. In the BRIKL 3D configurator, the hidden zipper will not be rendered correctly and you will end up with an incorrect print output file.

Hidden Zipper 2

Example Of A Correct Hidden Zipper Design Template

In this image you can see that the artwork is split into two separate panels. 

Hidden Zipper 3
Group 11

 

6.9 Add 3D products

BRIKL Digital library

BRIKL has a curated library of 3D models for sportswear and team wear, including swimwear, activewear, rugby, football, triathlon, basketball, football and much more, both for male models, female models and kids models.

All 3D models are available in OBJ format, along with an MTL file and a UV map in SVG format.

BRIKL supports physically based rendering (PBR) for textures to enable photorealistic 3D products.

Important: 3D models from the BRIKL digital library are visual representations of products and cannot be used for print ready files.

Contact BRIKL for more information.

 

Custom Products by BRIKL

BRIKL offers an exclusive digitization service to companies that would like to digitize their own products into own high quality 3D models for private use.

A digitization request must include:

  • For Apparel products:
    • Production pattern (AI and/or DXF file). Note: without a production pattern, digitization of a garment is not possible. Learn more
    • Detailed product pictures (front/back/side/inside). Note: website picture are not sufficient.
    • List of accessories (eg tags, reflective strips, zippers), and -if applicable - accessory artwork in an Illustrator file, and clear guidance on the placement of the accessories on the garment.
    • Scan of fabric swatches (1200 dpi; flatbed scanner; avoid wrinkles and shadowing; no iphone pictures)
    • Fabric book (how to map fabric to each product)
    • Optional: OBJ and MTL files (or any other 3D modelling format). Note that these 3D models will be used for reference only. They will not be digitized.
  • For non-apparel products
    • OBJ and MTL files (or any other 3D modelling format). Note: without a 3D model file, digitization of a product is not possible.
    • Detailed product pictures (front/back/side/inside).
    • Optional: UV map

Once a 3D model has been uploaded by BRIKL, you can add your own design templates <Add link>.

 

Upload your own custom products

IMPORTANT: You can upload your own products into the BRIKL software, but we strongly advise you to first request a training from BRIKL's digital services team. Contact us for more information.

 

OBJ files

BRIKL supports the Object (.OBJ) file format.  The OBJ format is a universal 3D model format that is widely used and supported by the 3D image editing industry.

 

MTL files

For each OBJ file, you can upload a Material Template Library (.MTL) file. A material library file describes how textures are applied to the object.

 

UV map

If you are creating your own 3D model, please read the section below on how to convert a UV map into an SVG file format.

First you need to download the UV map from your 3D modelling software. The unwrapping process for getting the UV map is different for each software. Please check your software on how to get a UV map. Once you have your UV map, you need to take the rasterized image and open it into your vectorial design software. At BRIKL, we use Adobe Illustrator. You can also use CorelDraw or any other design software that supports vector graphics.

Next, you need to trace the UV map using the pen tool to create a vectorial shape that matches perfectly with your UV map image.

Finally, save your vectorized UV map as an SVG together with its artboard. The artboard size helps us draw the correct size of the canvas in your BRIKL Design Studio.

 

Normal map

BRIKL 3D configurator software supports normal maps. You can upload an PNG or JPEG file and link this to the corresponding part of your model.

A normal map is used to show small details like wrinkles or bumps without having to add those details modeled into the 3D. This keeps the polygon count low and therefore the file size.

 

How to upload your own 3D model in the BRIKL system?

This section provide a step-by-step guide  how to upload your own 3D model to BRIKL.

Step 1 - Create a new product

Go to Catalog and create a new product.

Screen Shot 2564-03-12 at 19.56.47

Fill out the required information: ID, Title and Slug. Activate the "Enabled" and "Is Custom Product" boxes.

Step 2 - Add the 3D model files

Open the Studio Editor.

Screen Shot 2564-03-12 at 20.02.36

BRIKL Dashboard - Open Studio Editor

Since no 3D model files have been uploaded yet, the initial screen after loading will be empty. Go to Studio Settings in the right top corner.

Screen Shot 2564-03-12 at 19.58.51BRIKL Dashboard - Studio Settings

You are now ready to upload following:

  • obj file
  • mtl file
  • uv map
  • background (this is optional)

To help you get started, you can download test files here.

  • obj file (download a test file here)
  • mtl file (download a test file here)
  • uv map (download a test file here)

After you've uploaded the files, make sure to do a hard reload of your browser page (option/ctrl/r) to update the data.

Screen Shot 2564-03-12 at 19.58.58
BRIKL Dashboard - 3D Model Assets

In case you've created your own obj file, you need to make sure that at least one SVG path has a DIM tag. This is needed so that the actual size of the product elements can be defined by the BRIKL software. Learn how to add a DIM tag here.

 

How to define the correct size of a pattern in BRIKL?

To define the correct size of a pattern in BRIKL software, you need to define the dimensions of either the longest or the widest piece of your pattern.

To do so you need to open your pattern file into your preferred vectorial design software, like Adobe Illustrator.

Once you have your software open, make sure the document is set up correctly. You first need to open the “Document Setup” menu.

Select Document Setup > Change Unit to Centimeters > OK

 

Select Document Setup > Change Unit to Centimeters > OK

 

Select one piece, preferably a rectangular or square shape with a simple to define width or height.  Use the measurement at the top navigation where the Width and the Height are displayed. 

 

Use the measurement at the top navigation where the Width and the Height are displayed. 

Once done, you will need to rename the pattern piece with the value you have obtained, for example: “DIM_W41.71_H3.30”. DIM is short for dimension. 

 “DIM_W41.71_H3.30”

Next you need to save your pattern file as an SVG. Make sure you check the “Use Artboards” option before saving.

Go to File > Save As > Save as type is SVG/Select Use Artboards > Save

Go to File > Save As > Save as type is SVG/Select Use Artboards > Save

For Adobe Illustrator users, these are the extra steps you need to make sure are done. 

Change Image Location to Preserve > Select Preserve Illustrator > OK

Change Image Location to Preserve > Select Preserve Illustrator > OK

‍‍

Do not

Do not try to get the width and height of a trapeze shape as it won’t be a precise value. It will affect how the BRIKL software displays the correct size of a pattern and all images or text added.

Do not forget to add DIM and use underscore to separate the different values. These are special requirements for the BRIKL software to understand the width and height of your pattern piece.

Do not use
 
 
 

6.10 Add 2D product

With BRIKL you can add 2D stock images to your Design Studio for customization. The 2D stock images must be in SVG format (see below for detailed instructions).

Stock images can be customized in different ways. You can:

  • Change colors
  • Add prints
  • Add text
  • Add graphics
  • Add placeholders
  • Add team rosters (‘order details’)

How to add a 2D stock image

Step 1 - Create a product

Learn how to create a new product with our step-by-step guide here.

Important: Make sure to enable the customization option for your product.

Step 2 - Access the Studio Editor

Access the Studio Editor by navigating to Design > Studio Editor

If you want to learn more about the Studio Editor, visit our guide here.

Step 3 - Set the Design Studio to 2D mode only

Go to Studio settings

Design step 1

 

Click on Design Steps

 

2D Step 2 (1)

Enable 2D view and disable 3D view

 

2D Step 3 (1)

 

Step 4 - Create and upload a design template 
Step 4.1 Create a design template

Make sure to embed the 2D PNG or JPEG in your design software.

2D Step 5

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure the image is on one layer called COLORZONE-1. 

2D Step 6

If you want to learn more about COLORZONE, check out our design template guide.

Important: Do not create any “Group” in your SVG file. It will make the file unreadable by the BRIKL software.

Important: Make sure to refresh the page after all uploads are done

Step 4.2 Upload a design template

Go to the Studio Editor‍

Click on Studio settings

 

2D Step 7

Create a new design template

2D Step 8

Open the new design template

2D Step 9

Upload the 2D stock image svg in the design template upload area

2D step 10

Important: Make sure to refresh the page after all uploads

Step 5 - Upload a preview image for the design template

Go to the Studio Editor

Open the Design template tab

2D Step 14

Select your design template and upload your design template preview image

2D Step 15

Select your design template and upload your design template preview image

You now have a 2D design template with a preview image.

2D Step 16

 

To test if your settings are fine. Access the text step of your configurator and add a text. It is as simple as that.

2D Step 17

 

6.11 Create a color library

Adding colors to the BRIKL 3D configurator is simple.

  • Navigate to the Design tab
  • Select the Color Tab
  • Create a NEW color

You always need to assign two color codes. The first code is the color code for printing. Most of the time, this will be a CMYK value which you can collect from your design software (e.g. Illustrator).  

The second color code is the HEX code (=RGB). This code is needed for the Web. Make sure to enter the correct corresponding HEX code to the CMYK code to avoid any customer surprises upon receiving the order. The easiest way to do so is to grab both the CMYK and HEX code at the same time while your design software is in CMYK mode.

 

IMPORTANT: Make sure while copying the color code that your design software is in the CMYK color mode. In Adobe Illustrator©, you can change the document color mode from the File Menu.

 

6.12 Create a material library

You can create as many materials as you like. Each material can be assigned a number of colors. Examples of materials for a hoodie could be fleece, zipper and drawcord.

IMPORTANT: A material is a virtual record in BRIKL that allows you to link different color palettes for different materials. The material library does not contain any digitized textures. Please refer to the Material Assets to learn more about how to add textures to your product.

In order to create a material, navigate to the Design tab in the BRIKL Dashboard. Next, click on the Material Library Tab. Create a new material, give it an internal ID (Your internal reference number) and a name, and assign colors from your Color Library.


In order to understand how materials (and their associated colors) are assigned to a design template, see also Design Templates: Step 8 - Assigning materials and colors

 

6.13 Create a print library

Not all customers may have prints available so being able to select a print from a library in the 3D configurator is important.

In order to add prints, navigate to the Design tab in the BRIKL Dashboard. Next, click on the Print Library tab. You can drag and drop all your prints in one go.

You can set the default scale, rotation, and offset for each of your prints. Offset X means the degree to which you can move the print horizontally (left or right). Offset Y means the degree to which you can move the print vertically (up or down).

Make sure all your prints are in SVG file format for best performance and to ensure print readiness afterward. Alternatively, you can use PNG/JPG, but this will increase the loading time and may not always be usable for printing. In the case of PNG/JPG, make sure to have a Dot Per Inch (DPI) higher than 150, although we strongly advise using 300 DPI for good printing/production results.

 

6.14 Create an image library

Similar to a print library, you can easily add images by dragging and dropping them into the BRIKL Dashboard.

Likewise, with prints, we  recommend to upload SVG (vector) files and not PNG/JPG (raster) files.

For more information, check out How to create a print library.

6.15 Add a design step

Design steps (or customization steps) allow you to customize  the designs in different ways by changing colors and prints, or adding graphics and text. 

There are a total of 7 design steps available:

  • Color
  • Text
  • Image (logo)
  • Material
  • Print
  • Placeholder (personalization)
  • Order details

Design steps can be added or removed on a product or shop level. Steps that are defined on a shop level will apply to all your products. When you define a step on a product level, it will overwrite the steps on the shop level.

IMPORTANT: The ‘Placeholder’ and ‘Order details’ steps can only be added on a product level, not on a shop level. You can read up more here on Placeholders and Order details.

In the Design Step configuration panel, you can  select the option to add a quotation request form to the shopping cart (basket). Customers can fill out the request form and submit to the shop owner. The quotation form helps you to generate more leads and convert them into sales. Learn more about the quotation form here.

The default state of the studio is to display 3D products. However, with the BRIKL configurator you can also enable a 2D view. This gives you the possibility to upload a 2D image/photo of your product, that you can customize by adding text, images or personalization options. You can learn more about how to upload 2D images here.

Design steps can be sorted using the input box below the name of each step.

 

Step 1

Navigate to the BRIKL dashboard

Design step 1

 

Step 2

Open Design > custom product

Design step 2-1

 

Step 3

Open the product in the Studio Editor

Design step 3

 

Step 4

Open the Studio settings menu

Design step 4

 

Step 5

Open Design steps tab

Design step 5

 

Step 6

In the Shop section, select the new step you want to add or remove. 

Design Step 6

 

Once you have added all the steps, you can expand each step and assign a sort order. 

Design Step 7

 

Step 7

You can also set the design steps on a product level. This will overwrite the design steps that you defined on a shop level. 
IMPORTANT: Once you have added your first design step on product level, the design steps on shop level will no longer be applicable.

Design Step 8

 

Step 8

Make sure the “Show 3D view” is selected. Otherwise you and your customers will not be able to interact with the 3D object.

You can also upload 2D images/photos instead. Learn more about the Show 2D view only here.

Design Step 9

 

Step 9

You can enable a ‘request for quotation” in your cart settings. By doing so, the customer will  be able to submit a request form. Learn more how requests forms work in our 3D Lead Generator guide.

Design Step 10

 

 

6.16 Add a placeholder

Placeholders are defined areas or markings where you can enter names, numbers, logos or prints. Placeholders are added on top of your design templates. Adding and defining placeholders is simple and intuitive.

Step 1 - Navigate to the placeholder tab

In order to add a placeholder to your 3D model:

  1. Navigate to the BRIKLDashboard

  2. Go to Studio Editor

  3. Go to Studio Settings

  4. Go to Placeholders

Navigate to placeholder

Open placeholder editor

Step 2 - Add a placeholder

  1. Select “Add”

  2. You will notice a red rectangle is added to the 2D pattern

  3. Continue to add as many placeholders as you like

  4. Enable each placeholder to make it visible for the end-user

  5. Enter the Internal ID (this is for internal reference)

  6. Enter the placeholder title in all the languages you have available

Add a placeholder

Step 3 - Modify a placeholder by using the control buttons

  1. You can resize the shape of the placeholder

  2. You can rotate the placeholder

  3. You can reposition the placeholder

  4. When you resize the placeholder, the width and height of the placeholder will be updated

  5. When you change the orientation of the placeholder, the degrees will be updated

Adjust a placeholder

 

Step 4 - Define the placeholder rules

1. You must define the number of items a placeholder can contain. The minimum is 1. An error will occur if the number of items is left blank.

Number of items in placeholder

2. You must assign a placeholder to one or to multiple design templates

Assign a placeholder to a design template

3. You must define whether the placeholder can contain text, image or both

Placeholder type

4. IMPORTANT: Make sure to SAVE the placeholders on a regular basis

Save placeholder

5. You can upload one or multiple images (eg. logos). The file format is SVG. If you upload multiple images you can set one of them to be the default. This image will appear when first loading the Design Studio.

Upload placeholder image

6. You can also set a default text.

Add a text to a placeholder

7. If you want images and text to be updated by the user, you must enable the selection below. The user will then be able to upload their own images or add their own text to a predefined placeholder.

Enable default updates

8. You can allow the image or text to be adjusted inside of the placeholder (i.e. repositioned and rescaled) by enabling the option below.

Free positioning in placeholder

10. After all the updates have been done, make sure to click SAVE.

Save placeholder

Step 5 - Assign the placeholder to the personalization tab

1. Go to Design Steps

Navigate to Design Steps

2. Add the Placeholder design step

Placeholder design step

3. Click on the drop down Personalization, and Add a group


Define personalization

4. Enter the personalization title and assign the placeholder. You can either select Multiple or Single. In case of Multiple, all the placeholders of a particular group can be assigned a text or image. In case of Single, only one placeholder of a particular group can be assigned a text or an image.


Define personalization

5. Finally, reload your browser page to see the updated  changes. You can now see the placeholders in your Design Studio.

 

6.17 Add personalization

With BRIKL you can set up personalization for your products, which allows customers to add their name, logos or numbers.

Product personalization for custom products

To enable personalization on a product level:

  1. Go to dashboard > Catalog > Product > Personalization
  2. Create a new group, and name your personalization.
  3. Select Type
    1. Text or number
    2. Multi selection
    3. Single selection
  4. Enter personalization fields

Next, go to Dashboard > Design > Studio Editor > (Select the product)

  • Click on Studio Settings
  • Click on Design Steps
  • Add Order Details (on a shop or product level)
  • Refresh the page
  • You can check the changes by clicking on the order details button

6.18 Add a background

You can embellish your Design Studio with a background image.

  1. Navigate to the Studio Editor
  2. Select a product
  3. Open  Studio Settings
  4. Open the Assets tab
  5. Scroll to the bottom until you locate Studio background
  6. Upload your image (.jpg)

 

6.19 Add lighting

You can set the lighting of your Design Studio.

Go to Dashboard > Studio Editor > Studio Settings > Lighting

 

6.20 Share Studio link

You can share an online 3D Design Studio link with customers in an email or text message so that they can  access the Studio and start creating their own design. It’s a simple 3 step process.

 

Step 1 - Open the Studio Editor

Navigate to the Studio Editor and select a product

Share a Studio link

 

Step 2 - Generate a preview link

Open the “Link” button and copy the studio link

 
Share studio Link 2

 

 

Share studio Link 3

 

Step 3 - Copy and share a preview link

Copy and share the preview link with  customers. Customers will be able to view the Design Studio in the browser of their choice. They will be able to interact with the 3D design by spinning and zooming into it. They will have access to the all the design features and make a quotation request or an online purchase order.

Studio preview

 

6.21 Export a 3D image

 

1st STEP

Navigate to the BRIKL dashboard :

  1. On the left tab, go to Design
  2. Select the product you want to add the preview image for
  3. Click ‘Open in Design Room’

 

2nd STEP

When you enter the Design Room:

  1. Select the template you want to add a preview image for
  2. Adjust the 3D to your desired angle (if you have already created one before, make sure to adjust the current one similar to the previous one)
  3. Click ‘Export’ on the Right Tab
  4. Select ‘Export 3D’  

ImagePreviewStep2 (1)
 
ImagePreviewStep3

3rd STEP

The preview image is now downloaded to your computer  

Download SVG

4th STEP

Next, return to the dashboard :

  1. On the left tab, go to Design
  2. Find your custom product and click on Studio Editor
  3. Open the Studio Settings and access the Design Template option
  4. Scroll down until you find the template you are working on
  5. Open the template and Drag and Drop your downloaded file in  Preview Image

ImagePreviewStep4 (1)
ImagePreviewStep5 (1)
ImagePreviewStep6

To adjust your image :

  • You can crop the image to your desired ratio before uploading

ImagePreviewStep7

Click Confirm, then Upload

ImagePreviewStep9

Your preview image is now viewable (a page refresh might be required).

ImagePreviewStep10

The Design Room is your customization software for creating, sharing, and exporting designs. The Design Room is accessible only via the BRIKL Dashboard by admin-users with the right permissions.

The Design Room has all of the customization features of the Design Studio and more:

 

Converting a 2D design into a 3D rendering

You can drag and drop a 2D design template (for e.g. garments) or a dieline (also known as a packaging template) to see the 3D rendering in real time. You can review the 2D UV map and the 3D model side by side. You do not need any coding expertise.

 

Saving and revisioning

You can keep track of the changes made by saving different versions of your 3D designs.

 

Generating a preview link

You can generate a link that you can share (via email) with your customers. Customers can open the link in their browser and can interact with the 3D design by rotating and zooming in on it.

 

Generating an embed link

You can generate an iFrame which you can insert into your web page. Users can interact with the 3D model in the iFrame by rotating and zooming in on it.

 

2D export

You can convert the 3D model into a 2D print-ready SVG file (vector).IMPORTANT: The 2D Export may not be available depending on the plan you have selected. Contact BRIKL for more information.

 

3D export

You can export the 3D model as a 3D image (PNG).

 

6.22 Export a 3D GIF

You can download a 3D GIF file from the BRIKL Design Room.

 

6.23 3D Viewer app

With BRIKL you can create 3D design templates in Illustrator that you can upload to BRIKL with a simple drag and drop. Design templates are customizable. You can find a detailed guideline here

Sometimes you may want to create a 3D rendering that CANNOT BE CUSTOMIZED, and that you simply want to share with prospects, customers or for marketing on the web. For this purpose, BRIKL has created an easy-to-use 3D VIEW tool that allows you to upload a simple PNG image and convert this real-time into a 3D rendering. 

3D renderings can be exported as GIF file or PGN image. You can also copy an online preview link and share with others.

Step 1

  • Navigate to the BRIKL dashboard
  • Open the Design tab and go to Custom Product
  • Choose and open the product in the Studio Editor
ImagePreviewStep1-1

 

Step 2

Open the Studio settings menu

Design Pattern 2 (2)

Step 3

Open the Asset tab

Design Pattern 3 (1)

Step 4

Download the base template

Design Pattern 4 (1)

Step 5

Open the base template in your design software (e.g. Illustrator). You can now create your design based on the base template. 

Make sure to respect the size and aspect ratio of the base template.

  • Each product has its own unique pattern layout. Do not change the position of the pattern pieces. Changing the position will make it no longer compatible with the BRIKL UV map that is available in the system.‍
  • Each product has its own unique artboard size. Do not change the artboard size. Changing the artboard size will make it no longer compatible with the BRIKL UV map that is available in the system. You can check the artboard size in Illustrator by going to Document Setup.

Step 6 

In the BRIKL Dashboard, open the Design tab and go to Custom Product. Choose and open the product in the Design Room

Design Pattern 5 (1)

 

Step 7

Select the image pattern tab. Drag and drop the design pattern file. 

Design Pattern 6 (1)

 

Step 8

Toggle to a 2D perspective. Next, place the image pattern on the 2D view and toggle to a 3D perspective to see your 2D image render into 3D real time

Design Pattern 7 (1)

Design Pattern 8 (1)

 

Step 9

You can share the 3D render with your customers using a 3D preview link. Email the link to your customers so they can open the 3D in their browser of choice, and interact with it. They will not able to customize the product.

Design Pattern 9

 

You can download a GIF file to see a live 360 spin.

Design Pattern 11 (2)
Design Pattern 12

 

You can download a 3D image

Design Pattern 14

 

 

The 3D viewer app is not a standalone app, but  an integral part of the Design Room.

It is a combination of features that allows you to convert a 2D design into a 3D rendering with a simple drag and drop, and share a preview link with your customers.

2D to 3D

You can export a simple 2D image in png or jpg format from your design software of choice like Illustrator, and convert it into a 3D rendering.

You don't need to worry about building the layering correctly like you would do for a design template (for use in the Design Studio, i.e. 3D configurator).

The 2D to 3D is a great tool to quickly create beautiful 3D renderings that you can use for marketing purposes. It also allows you to create photo-realistic images that you can put up on your webshop, and save you time and money.

 

6.24 Share 3D View link

You can share an online 3D preview link with customers. It’s a great way to create the excitement you need to close a sale. It’s a simple 5 step process.

 

Step 1 - Open the Design Room

Open the Design Room and select a product

 

 

Step 2 - Create a design

There are two options to create a design.

One, you can customize your product by changing the colors, adding graphics and text, or adding prints and fabrics. Learn more about the Design Room here.

 

The second option is to upload a ‘pattern image’. This will render a 2D flat design into a 3D rendering real time. You can learn more about the 3D Viewer function in this online guide.

 

 

Step 3 - Generate a preview link

Open the Share menu



Step 4 - Test a preview link

Click on the preview link to open the 3D design in your browser.

 

 

Step 5 - Copy and share a preview link

Copy and share the preview link with your customers. They will be able to view in the browser of their choice. They will be able to interact with the 3D design by spinning and zooming into it.  Your customers will not be able to make any changes to the design.  

The 3D preview link is a great way to create the excitement during a pre-sales process, and to let customers know what the final product will look like.

 

 

6.25 Create a 3D embed link 

You can generate a preview link and share an interactive 3D view with your customers.

Go to Dashboard > Design Room

6.26 Export print file

You can download a print ready file

Go to Dashboard > Design Room > Export