Use the Product Designer
Shift4Shop’s Product Designer allows you to create a product that can be easily customized by your customers by adding their own image, or 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, 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.
Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Modules.
Once you get to the Modules page, use the search bar at the top to locate "Product Designer."
When the module appears, click on the Settings button.
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.
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.
Position Top
The amount of pixels from the top of the work area where 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.
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 you set the option parameters 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.
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 letting 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 a special code to provide the shopper with fonts to select.