Using the Designer in the Storefront

The Storefront Designer is an online design tool that lets customers personalize products before they buy. Shoppers can select products, add text and artwork, recolor designs, choose placements, and apply effects inside the decoration areas defined for each product. Only decoration processes that are compatible with the chosen product are offered, so customers always create production-ready designs.

The Designer is launched when a customer starts designing from your web store. It can also be launched from Business Hub when creating quotes, orders, or decorated products in affiliate stores. However, the appearance is slightly different. For instructions on using the Designer within your website admin, see Using the Designer in your Website Admin.

In this article

• Prerequisites
• Why use the Storefront Designer
• Key Designer concepts
• Storefront Designer screen layout
• Working in the Designer
  • Change the selected product
  • Add text to a product
  • Adjust text properties
  • Add a design using the Add Design button
  • Add a design by drag and drop
  • Adjust design properties
  • Recolor embroidery designs
  • Specify product sizes and quantities
  • Specify sizes and quantities for bulk products
  • Arrange layers
  • Re-group template design elements
  • Add team names
  • See a mockup preview of all decorated product views
  • View items in the cart and check out
  • Save the designed product for later use
  • Email or share the designed product
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Why use the Storefront Designer

The Storefront Designer improves both the customer experience and your production workflow:

• Self-service personalization: Customers can experiment with layouts, text, and colors without needing a designer to mock up every change.
• Accurate previews: Designs are created inside real decoration areas, reducing surprises and artwork issues later.
• Brand and team consistency: The color picker and embroidery recolor tools help customers match brand colors and team palettes more closely.
• Fewer back-and-forth proofs: Customers see near-final artwork on-screen, which can reduce pre-production approval cycles.
• Higher conversion rates: Interactive design tools typically increase engagement and help customers commit to their order.

Key Designer Concepts

• Decorations may only be applied in the decoration area, which is shown as a visible box on the product. Decorations outside this area will be cropped.
• Decorations are applied in layers exactly like common graphics programs, where whatever’s on top covers what’s underneath.
• Effects can be applied to graphic designs and text to change their appearance (e.g. shadow, glow, gradients)..

Storefront Designer Screen Layout

The Designer interface is made up of several toolbars and panels that control what the customer sees and edits.

Working in the Designer

Change the selected product

1. Make sure the Product button is selected in the Designer Toolbar.

   

2. Click on the Change Product button in the Product panel.

   

   The Select Product popup will be displayed.

   
3. Click on a product to select it.

Add text to a product

1. Click on the Add Text button in the Designer Toolbar.

   

2. Select the decoration process to be used for the text in the Select Type of Text popup. Only options that are supported by the product being decorated will appear.

   

3. Enter the text, and click ADD TEXT.

   

   The text will appear inside the decoration area in its bounding box with editable size dimensions, resize and rotate handles, and a delete control.

   

Adjust text properties

1. Click on the View and organize layers button in the View Toolbar.

   

2. Click the text object you wish to adjust.

   The Text Properties panel will appear on the left side of the Designer.

   

3. Configure the text as required:

   • Text Box: lets you edit the text.

   Formatting

   The Formatting tab is expanded by default and contains the following controls:

   • Font: change the font via the Select A Font popup.
   • Font color: change the text color via the color popup.
   • Bold: boldens the text.
   • Italics: italicizes the text.
   • Left-align: aligns text to the left when it spans multiple lines.
   • Center-align: center-aligns text when it spans multiple lines.
   • Right-align: aligns text to the right when it spans multiple lines
   • Outline: lets you apply an outline to the text. At the leftmost position on the slider, no outline is applied. Moving the slider to the right applies an outline that increases in thickness the further right it is moved.
   • Outline Color: lets you set the color of the outline via the color popup.
   • Resize Proportionally: when this checkbox is ticked, the text will keep its original proportions when you resize it.

   Position

   Click on the Position tab to expand it. Expanding the Position tab reveals the following controls:

   
   • Position controls: lets you move the selected text around the decoration area using any of the eight directional arrows.
   • Size controls: lets you increase/decrease the size of the selected text by clicking on the up/down arrows.
   • Rotation controls: lets you rotate the selected text around its center axis. You can do this by:
     • Specifying a specific angle at which to rotate the text.
     • Clicking on the left arrow to rotate the text 5 degrees to the left.
     • Clicking on the right arrow to rotate the text 5 degrees to the right.
   • Horizontal Centering controls: Horizontally centers the selected text within the decoration area.
   • Vertical Centering controls: Vertically centers the selected text within the decoration area.
   • Layering controls: lets you change the layer at which the selected text is positioned in relation to other decorations.

   Effects

   Effects are only available for the direct-to-garment printing (DTG) decoration process.

   Click on the Effects tab to expand it. Expanding the Effects tab reveals the following text effects:

   
   • Text Shape: lets you alter the shape of the text (e.g. arched, wavy). The options indicate the shape that they will apply.
   • Effect: lets you add a shadow or glow effect to the text.
     • None: no effect is applied.
     • Shadow: applies a drop shadow to the text.
       • Offset: lets you set the position that the shadow will be offset from the text.
       • Blur: lets you set the level of blurring effect that will be applied to the shadow.
     • Glow: applies the appearance of a glow around the text.
       • Strength: lets you set the intensity of the glow.
       • Blur: lets you set the level of blurring effect that will be applied to the glow.
   • Effect Color: lets you set the color of the Effect via the color popup.
   • Gradient: sets a horizontal or vertical gradient of color between the selected font color and the gradient color.
   • Gradient Color: lets you set the color of the Gradient via the color popup.

Add a designs using the Add Design button

1. Click on the Add Design button in the Designer Toolbar.

   

2. Select the decorations process to be used for the design in the Select Type of Design popup. Only options that are supported by the product being decorated will be enabled.

   

3. Browse to and click on the design you want to add in the Select a design popup.

   

   You can select designs from the following sources:

   • Upload a new design: Click on Upload Image to upload a design from your device.

     Raster, vector, and embroidery file types are supported in the formats listed below:

     • Raster (PNG, JPG, JPEG, GIF, TIF)
     • Vector (PDF, EPS, PS, SVG, SVGZ)
     • Embroidery (EMB)

     Vector-based graphics will have modifiable elements such as text and colors editable on the fly by users.

   • My Uploads: These are your own previously uploaded design designs.
   • Store Designs: designs exclusive to the store.
   • Stock Designs: Third-party designs available for use in DecoNetwork.

4. Click SELECT DESIGN.

   The design will appear inside the decoration area in its bounding box with editable size dimensions, resize and rotate handles, and a delete control.

   

Add a design by drag and drop

1. Drag a design file from your computer into the decoration area of the product in the Designer.

   The decoration area will be highlighted when the mouse pointer is within its boundaries.

   

2. Release the mouse button to drop the design into the decoration area.

   The Select Type of Design popup will be displayed with the supported decoration types enabled for the product selected.

   

3. Select the decoration process you want to use for the design.

   The system begins uploading the design file to your own design library.

   

   There is a limit of 100 characters for uploaded design filenames to avoid system failures. If a filename is longer than 100 characters, it will automatically be trimmed.

4. Tick the, I hereby declare I own the rights to print this image, checkbox in the Confirm Copyright Permission popup to verify that you have permission to use the design.

   

5. Click OK.

   The design appears inside the decoration area in its bounding box with editable size dimensions, resize and rotate handles, and a delete control.

   

Adjust design properties

1. Click on the View and organize layers button in the View Toolbar.

   

2. Click the design object you wish to adjust.

   The Image Properties panel will appear on the left side of the Designer.

   

3. Configure the design as required:

   • Quality: Shows you a bar indicating how clear the image is for printing. The indicator reflects how well the raster-based graphic is going to print before blurring too badly. If this drops below a certain threshold, the system will warn the customer that their print quality will be compromised.

     This option is only available for raster designs.

   • Colors: Shows you the colors currently used in the design.

     • edit: Click on the link to edit the design colors (if allowed for that design).

     This option is not available for designs that have restrictions on customizing.

   • Resize Proportionally: when this checkbox is ticked, the design will keep its original proportions when you resize it.

     This option is not available for embroidery, transfer, and rhinestone designs.

   • Ungroup: click on the link to ungroup the design into its component elements.

     This option is only available for vector-based designs.

   Position

   Click on the Position tab to expand it. Expanding the Position tab reveals the following controls:

   • Position controls: lets you move the selected design within the decoration area using any of the eight directional arrows.
   • Size controls: lets you increase/decrease the size of the selected design by clicking on the up/down arrows.
   • Rotation controls: lets you rotate the selected design around its center axis. You can do this by:
     • Specifying a specific angle at which to rotate the design.
     • Clicking on the left arrow to rotate the design 5 degrees to the left.
     • Clicking on the right arrow to rotate the design 5 degrees to the right.
   • Horizontal Centering controls: Horizontally centers the selected design within the decoration area.
   • Vertical Centering controls: Vertically centers the selected design within the decoration area.
   • Layering controls: lets you change the layer at which the selected design is positioned in relation to other decorations.

   Effects

   Click on the Effects tab to expand it. Expanding the Effects tab reveals the following controls:

   

   These options are only available for raster designs.

   • Effects: lets you apply a special effect to the design that alters its appearance. Click on the Effects drop-down box to see the effects options.

     

     Click CANCEL to return to the Effects Panel.

   • Border: lets you apply a border to the boundary of the design. Click on the Borders drop-down box to see the border options.

     

     Click CANCEL to return to the Borders Panel.

Recolor embroidery designs

Embroidery designs can be recolored when recoloring is enabled for embroidery in your system settings (Admin → Decoration Processes → Embroidery → Designer Settings). When an embroidery design is selected on the canvas, the thread colors detected in the file appear in the Image Properties panel.

You can recolor embroidery designs and update their thread assignments using the tools provided in the Image Properties panel, including options for selecting individual thread colors, choosing replacements, and searching within your thread charts.

1. Click on the embroidery design you have added to the product.

2. In the Image Properties panel, click on the color swatch for the color you want to change.

   The Color Picker is displayed.

3. Select a new color from the Color Picker.

   In the Color Popup, you can select a new color either by:

   • Choosing from the pre-defined color options in the palette.

     

     Click the image to enlarge.

     

   • Manually entering a custom color code if you have a specific shade in mind.

     Improvement implemented in V8.610.

     

     Click the image to enlarge.

     

     Search results display both the color name and code to help you quickly identify the correct thread.

   • Using the color sliders to adjust the hue, saturation, and brightness.

   • Specify color values using a selected color mode.
     Open the dropdown under the color slider and choose how you want to specify the color: rgb, cmyk, or html.

     

     Enter your color values:

     • For rgb, type the r, g, and b values (0–255).
     • For cmyk, type the c, m, y, and k percentages.

     • For html, type the hex color code, for example #383a35.

       New option added in V8.610.
4. Click OK to apply the change to the design.
5. Repeat as needed for each color in the design.

Specify product sizes and quantities

1. Click on the Product button in the Designer Toolbar.

   

   The Product panel is displayed.

   
2. Select a size from the Size drop-down list and specify the quantity required in the input box for that size.

3. Click Add Another Size to specify quantities for each size required.

   

Specify sizes and quantities for bulk products

1. Click on the Product button in the Designer Toolbar.

   

   The Product panel is displayed.

   

   The Quantity field will show the minimum quantity you can purchase.

   Note, you can not select multiple sizes when products are sold in bulk.

2. Select a size from the Size drop-down list in the Product Panel.

   

3. Select a quantity from the QTY drop-down list in the Designer Toolbar.

   

Arrange layers

1. Click on the View and organize layers button in the View Toolbar.

   

   The Layers panel is displayed showing all the text and design objects present in the decoration area.

   
2. Arrange the elements as required:
   • To move a layer up, click on the up arrow to move it to a new position in the list. Likewise, to move a layer down, click on the down to move it to a new position in the list.
   • To delete a layer, click the cross icon at the right of the layer.

Re-group template design elements

You can re-group elements from a template design that you have previously ungrouped.

1. Click on the View and organize layers button in the View Toolbar.

   .

   The Layers panel is displayed showing all the text and design objects present in the decoration area.

   
2. Hold down the Ctrl key and click on each layer you want to group.
3. Click on the Group Selected Items button in the View Toolbar.

Add team names

“Team Name” applies a jersey-inspired layout to your list of names and numbers, automatically styling each one with a smaller name above and a bold, oversized number below. It’s perfect for sport teams, school groups, clubs, and other groups who want clean, consistent name-and-number decoration on their product.

1. Click on the Add Team name button in the Designer Toolbar.

   

   The Select Type of Team name popup will be displayed with the supported decoration types enabled for the product selected.

   

2. Select the decoration process you want to be used for the team names.

   The Add Team name popup will be displayed.

   
3. Select a size and specify the quantity required for that size.
4. Click Add Another Size to specify quantities for each size required.

5. Click Next.

   The Edit Team name popup will be displayed containing Name and Number fields to match the quantities specified in the Add Team name popup.

   

6. Configure team names by entering the team name and number for each product to be decorated.

   The item selected in the View column will be the item that is displayed in the Designer.

7. Click Add Another Team Member and specify the team name and number for each additional product required.

8. Click OK when done.

   The team name and number will be set up on the product as text areas whose properties may be adjusted as per normal text, except that any changes made will apply to all team name products.

   

   See the section, To adjust the properties of text in the Designer, above, for details on how to adjust the formatting, adjust the position and apply effects to the text fields.

9. If you want to edit the teamnames and numbers, select a text area and click Edit teamnames in the Text Properties panel to display the Edit Team name popup.

See a mockup preview of all decorated product views

You can see a preview of all the decorated product views without watermarks.

1. Click on the Preview Design icon in the Extra Options Toolbar.

   

2. The Design Preview popup will be displayed showing all decorated product views, free of watermarks.

   

View items in the cart and checkout

1. Click on the View your cart and checkout icon in the Extra Options Toolbar.

   

   You must have already added products to the cart. To add the current design to the cart, click on the BUY button in the top toolbar.

2. The Your Cart popup will be displayed showing all the items you have in your cart.

   

   You can Remove, Duplicate or Edit products in the cart by clicking on the action links at the bottom right of each item. You can also start a new design by clicking on Start New Design in the bottom toolbar.

3. Click on the Check Out button if you are ready to checkout, otherwise, click on the Back button to close the popup and return to the Designer. If you click Check Out, you will be taken to the Shopping Cart page. From the shopping cart page, you can click on Edit beside an item to load it back up in the Designer for editing.

Save the designed product for later use

You can save the product you have designed for use at a later time.

1. Click on the Save your design for later use icon in the Extra Options Toolbar.

   

   If you are not logged in, the You need to be logged in popup will be displayed.

   

   You will need to login in if you are a registered user, otherwise, you will need to sign up for a new account.

2. The Please enter your Layout name popup will be displayed once you have logged in/registered.

   

   Enter a name for your design and click OK. You will be able to access your saved design from the Saved Layouts page in the My Account area.

   

   Click the image to enlarge.

Email or share the designed product

1. Click on the Email or share your design icon in the Extra Options Toolbar.

   

2. The Share your design popup will be displayed.

   

   You can share your design to the following social media platforms:

   • Pinterest
   • Twitter
   • Facebook

3. Click on the link of the social media platform on which you want to share your design. The website will load the website of the social media platform to allow you to share an image of your design.

   Alternatively, you send an email containing a preview and a link to your design. Enter the details in the fields under the Email a friend section and click Send. Only the Recipient's email address and Email Subject fields are compulsory.

   You can click on the product name to load the page showing a copy of the design being shared. From here, you can copy the link to share it externally.

Best-practice tips

• Encourage templates: Provide pre-built design templates so customers can start from proven layouts rather than designing from scratch.
• Guide color choices: Use the color picker instructions to help customers match brand or team colors, especially for embroidery.
• Check image quality: Remind customers to use high-resolution artwork and pay attention to the Quality bar in the Image Properties panel.
• Use layers deliberately: Show customers how to move text and designs forward or backward so important elements are not hidden.
• Preview before checkout: Encourage customers to use the design preview before adding items to the cart.

Troubleshooting

• The Designer does not load: Ask the customer to refresh the page, try a different browser, or disable browser extensions that may block scripts.
• Customers cannot upload designs: Confirm that the product and store allow customer uploads and that file types meet the supported formats.
• Recolor options are disabled: Some designs may have customization restrictions, or the decoration process may not support color changes.
• The color picker is not visible: Make sure the customer is editing an embroidery color or a color-enabled element, then open the Color popup and switch to the Custom Color tab.
• Design appears cropped on the product: Check that all elements are within the visible decoration area boundaries.

FAQs

Can customers use the Designer on mobile devices?

Yes, the Designer can be used on many mobile devices, but complex designs are often easier to create on a desktop or laptop with a mouse and larger screen.

Can customers upload their own fonts?

No. Customers can only use the fonts that you make available in your DecoNetwork account. To offer additional fonts, add them to your system and enable them in the appropriate decoration processes.

Why can’t I recolor some designs?

Certain stock or licensed designs may restrict color customization. In these cases, the color controls will be disabled for that design.

Does recoloring embroidery in the Designer change my production thread chart?

The colors selected in the Designer provide guidance for production, but you should still map them to the closest available thread colors in your embroidery software or production workflow.

Additional resources

• Manage Decoration Areas
• Using the Designer in your Website Admin
• Embroidery Designer Settings
• Store Designer Settings