Knowledgebase: Products

How do I use the Product Designer?

 

Important
The Product Designer Add On is currently in beta release. As such, if you experience any issues with it, please let support know so we may document the issues and have them corrected.

Please also note that the Product Designer is only compatible with CORE themes. If your theme is HTML-5 the Designer cannot be used.

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.

Note
When using the product designer for a particular product, please note that the base image/work area will act as the product's main image. If the product itself has additional images, they will not be seen. Only the product's thumbnail (for categories, view_cart, and grid views) will be seen.

  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.

  1. Click on the product to add it to the Designer list.
  2. 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:

  1. Click on the "Add Image" button
  2. Set the layer name to "Base"
  3. Use the browse button to locate the product image that will serve as the Base layer
  4. In the "Lock Element" dropdown menu, select "Yes"

Additional Information
You also have additional parameters that can be set. However these are not used for the base layer.

  • Position Top
    The amount of pixels from the top of the work area that the layer will appear.
  • Position Left
    The amount of pixels from the left of the work area that the layer will appear.
  • Scale-X
    The scale of the layer on the horizontal axis (left to right)
  • Scale-Y
    The scale of the layer on the vertical axis (top to bottom)
  • Angle
    The rotation (in degrees) of the layer.

As mentioned, these additional parameters aren't used for the base layer. Instead, they are used for any additional layers you might be adding to the base layer (i.e. transparent overlays). Typically, the overlay items you can add are smaller in scale than the base image, therefore we include scaling and positioning fields for these situations.

For the base layer, they can be left default.

  1. 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.

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

Tip
In our example, the base layer is 550px by 700px. Since the Product Designer essentially acts as the product's main image, you want the base layer image to also have the same general dimensions as your regular product images. Although you can use images with a large resolution, the product page itself will scale it down to fit the page. As such, the width limit is about 550px to 560px

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.

Tip
Below to the "Designs" label you will see a link that will provide you some sample code and basic instructions about use the coding.

In the example shown above, we are using the same coding as the sample code provided, but with the "source" paths and titles changed to reflect the images used in the tutorial.

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.

Tip
Also below to the "Fonts" label you will see a link that will provide you some sample code and basic instructions about use the coding.

In our example above we used the same sample coding with some additional font choices added.


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 vs Merchant Specified

As the merchant, you can configure the design options on the Product Designer in either of two ways:

  • Open Design
    With the options set up in this fashion, your customer can select the customization options (text, image or design) and apply them wherever they'd like on the product.
    They'll also be able to resize, and rotate the customization however they'd like.
    Finally, they will be able to add as many layers of customizations to the product as they would like.
  • Merchant Specified
    With the options set up in this fashion, the customer selects from options you choose to make available.
    They can place the customizations only where you specify, and they will not be able to resize or rotate the customizations.
    Furthermore, you may limit the number of customization layers they are allows to create.

We will outline how to set up each method separately, but you may also use a combinations of both methods to get the desired effects for your product's customizations.

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*

Additional Information
These checkboxes will allow you to control which layer options are given to the customer.

When marked, their respective options will appear at the top of the Product Designer and allow the user to add each option as a layer.

  1. 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.

Note
While it's very easy to set this customization option, you should be aware that the user can add as many design options as they'd like, and this may not be something you want to offer. They can also change the size of the customization to make it take up a larger area of the product, as well as rotate and freely move it around the base layer image.

Additionally, be aware that with the Custom Text option, the user is limited to only the base color (black) for their font.

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

Note
In this example, we are unchecking these options to prevent the user from adding their own layers to the customization.

However, for your particular needs, you may wish to keep them turned on. It is entirely up to you.

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.

  1. 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.

  1. 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.

Note
Some 3rd party fonts (like Google Fonts) may be large by default and will not display properly within the confines of your bounding box. Some trial and error may be needed when using 3rd party provided fonts.

  1. When you are satisfied with its placement and look, click "Save" at the top right.
  2. 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*

*Tip
The placeholder image can be whatever you’d like. The intent it to have an area of the product’s base layer that actively shows the user where to click in order to begin their upload. Feel free to use the following transparency for this purpose if you’d like:

  1. Under "Lock Element," leave the setting as No
  2. 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)
  3. (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.

  1. 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.

  1. 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.

  1. When you are satisfied with its placement and look, click "Save" at the top right.
  2. 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.

Important
Please be aware that Shift4Shop Technical Support is not able to provide troubleshooting for the actual coding used or customized by you on the Product Designer. Anything outside of the default setup mentioned in this article falls outside of the scope of support.


Help Desk Software by Kayako fusion