How do I use the Product Designer?

3dcart's Product Designer allows you to create a product that can be easily customized by your customers by adding their own image, text or selecting from your preset designs.

Product Designer - Basic Settings

The Product Designer can be set up in several different ways but let's first go over the basic settings you'll need to be aware of.

Base Layer

The product designer will include a base image of your product and an interface that the shopper will use to customize the product.

As the shopper selects and adds their customizations to it, the selected additions will be added to this base layer. Therefore, the first step in this process is to set the base layer and the basic "work" area they'll be using.

1. Log into your Shift4Shop Online Store Manager
2. Using the left hand navigation menu, go to Modules
3. Once you get to the Modules page, use the search bar at the top to locate "Product Designer"
4. When the module appears, click on the "Settings" button
5. Click on the "Add a Product" button located at the top right

A popup menu will appear with some of your main products. Use the search bar at the top of the popup modal to locate your specific product.

6. Click on the product to add it to the Designer list.
7. Once the product is added to the list, click on it to begin designing it.

You will see the following:

As mentioned, we need to set up a base layer to act as the work area for the designer, so follow these steps:

8. Click on the "Add Image" button
9. Set the layer name to "Base"
10. Use the browse button to locate the product image that will serve as the Base layer
11. In the "Lock Element" dropdown menu, select "Yes"

12. Once you've finished setting up the Base layer, click "Save"

Designer Settings

Depending on the size of your base layer image, you may have some clipping or overflow of the work area graph background. To correct this you'll need to set the work area to have the same resolution as your base image.

13. Click on the "Designer Settings" button
14. Set the Width and Height parameters to match the dimensions of your base layer image.

Also on the Designer Settings popup, you will see checkboxes for displaying Text, Image, and "Choose from Designs" portions of the Designer interface.

With the Product Designer, you can make the customization options either openly customizable by the user (meaning they can add their own images/text and place them wherever they choose on the product), or the option parameters are set by you as to where they can be applied on the product (for example, if the design can only be applied to certain areas of the product).

These checkboxes, if marked, will give the shopper the ability to add the customizations and move them around freely on the product. We'll cover these more in the next sections.

Designs (optional)

Below the product designer settings area, you will see a section labeled "Designs" and an open text field.

One of the Product Designer options you can present to your shoppers is the ability to select from preset designs that they can apply to the product.

In order to use this option, you will first need to create the designs as transparent .PNG images (or .SVG) and upload them to your store using FTP or the File Manager. Then, when the images are uploaded, special coding will be needed in this Designs area to reference those images.

Fonts (optional)

Below the Designs section, you will see a similar section labeled "Fonts" with its own open text field

Another aspect of the Product Designer is the ability to let shoppers add their own custom text to the product. This section allows you to specify the fonts that the shopper can select from.

As with the Design section, this section will use special code to provide the shopper with fonts to select.

Product Designer Examples

Now that we've covered the basic setup of the Product Designer's base layer and options, let's go over some examples of how it can be set up.

For this tutorial, we'll set up a simple T-Shirt that can be customized in one of three ways:

• Custom Text
  where the user can add their own text to the product
• Custom Image Upload
  where the user can upload their own image to the product
• Preset Designs
  where the user can select from pre-created designs you make available.

Open Design

To set up the customization options and have them openly placed by the shopper, follow the steps outlined above to complete the following:

• Add the product to the Product Designer
• Set your Base layer
• Configure the work space size
• Add Fonts to your Product Designer (If you plan to allow custom text on the product)
• Add Designs to your Product Designer (If you plan to have preset designs on the product)

Once those steps are done:

1. Click on the "Designer Settings" button
2. Mark the boxes for design options you wish to allow*

3. Click Save on the Designer Settings window.

Once you get taken back to the Product Designer, click on the preview button to see your product

Your shopper can click on the "Add" button and add their selected customization.

After the customization is added, they will be able to click on it and manipulate its size, placement, font and more.

The user also has the option of adding/deleting layers on their customization, download and print the mocked up image, zoom in and reset their customization as needed.

In the next section, we'll cover the Merchant Specified way of adding designer options. This method offers you more control in limiting the customer's ability to change the size and positioning of the design, as well as giving you control of how many layers are created for the product.

Merchant Specified

To set up the customization options and have them placed by the shopper where you specify, follow the steps outlined above to complete the following:

• Add the product to the Product Designer
• Set your Base layer
• Configure the work space size
• Add Fonts to your Product Designer (If you plan to allow custom text on the product)
• Add Designs to your Product Designer (If you plan to have preset designs on the product)

Once those steps are done click on the Designer Settings button and uncheck all three checkboxes and click "Save" on the Designer Settings window

For Custom Text:

1. Click on the "Add Text" button
2. Add a name for the Text layer. (i.e. custom text)
3. In the text field, write some placeholder text (i.e Your Name Here)
4. Under "Lock Element," leave the setting as No

You can also set the placement variables if you'd like, but these can be left at their default settings as well if you'd like.

5. Click Save on the Text Layer window

The Product Designer will load up again, and you will see the base image along with your text layer.

6. Click on the text you just added and drag it to wherever you'd like on the product.

You can also resize and edit the layer further as needed during this point. Where you place it and whatever size you make it will serve as the "bounding box" for the layer. The end-user will not be able to apply their text outside of this space.

7. When you are satisfied with its placement and look, click "Save" at the top right.
8. Then, click "Preview" to view the product.

Your shopper can now click on the placeholder text to customize the text as well as the text's coloring.

However, due to the text layer's settings, they will not be able to place the text just anywhere nor change the size of the text since it will be limited to the layer's bounding box.

For Image Uploads and Preset Designs:

1. Click on the "Add Upload Zone" button
2. Add a name for the Upload Zone layer. (i.e. upload area)
3. Next to the image path field, click browse to specify an image that will serve as a placeholder*

4. Under "Lock Element," leave the setting as No
5. If this is to be an Image Upload option, set the “Allow Image” option to Yes
   (if this is to be only for the preset design option, then mark "Allow Image" as No)
6. (optional) set the “Allow Text” option to “no” if you prefer to not let them also add text

You can also set the placement variables if you'd like, but these can be left at their default settings as well if you'd like.

7. Click Save on the Upload Zone window

The Product Designer will load up again, and you will see the base image along with the image you specified for the “Upload Zone” layer.

8. Click on the image you just added and drag it to wherever you'd like on the product.

You can also resize and edit the layer further as needed during this point. Where you place it and whatever size you make it will serve as the "bounding box" for the layer. The end-user will not be able to size or apply their image outside of this space.

9. When you are satisfied with its placement and look, click "Save" at the top right.
10. Then, click "Preview" to view the product.

Your shopper can now click on the Upload Zone area to see the options available to them.

• For Image Upload, they will be presented with a drag/drop interface for their image upload.
  They can then upload the image and apply it to the product.
• For Preset Design, they will be presented with a display of your preset designs.
  They can then click on a design and apply it to the product.
• Also, if you allowed Text on the Upload Zone (see step 6), they can also write their own text and apply it to the product.

Whichever option is selected, they will be able to resize the design as long as it stays within the bounding box area. However they will not be able to rotate the design or move it outside of the bounding box.

Furthermore:

• If the image they are uploading is a transparency (*.png or *.svg), they will be able to adjust the coloring of the element
• The same applies to your preset designs. As long as they are *.png or *.svg transparencies the customer will be able to colorize them as well.
• And if using Text, the coloring can be altered also

Advanced Use

For the purposes of this tutorial, we described the Open Design and Merchant Specified methods separately. However this was merely for demonstrative effect. You are free to set up the designer however you’d like. You can set it up to use all both methods on a single product or combinations of option settings to get different effects for your product.

Also be aware that the steps outlined here are simply the “out of the box” set up steps. The coding that is generated by the Product Designer can be edited further by you at any time to provide you more control.

You may review the generated code simply by clicking on the “Advanced Settings” button of the Product Designer.