Adding a Layout to the Online Designer

If CanvasBase designer is enabled on your storefront you can add your own templates to your storefront for your customers to use in designing the look of their products.

Step-by-Step Guide

1. If you are not already on the manage layouts page, follow the steps listed on Manage Layouts in Online Designer to get there.

2. Click the Create New Design Layout tile to begin creating your new design layout.
   
   

   Open

   

3. Complete the Create New Layout basic info

   Open

   

   1. Enter the Width and Height and select the unit of measure.

   2. Indicate if the design will be scaleable (it isn't locked to the specific size you are making it so a 4x4 could be used for an 8x8 or 6x6 or whatever), and if Yes, select the tolerance percentage (The amount the layout can be distorted to fit another size product. e.g. if you have a 4.25 x 6 and set the tolerance to like 5 percent or something within the difference of those proportions it would let you use it with a 4x6.).

   3. Create a descriptive name for your layout.

   4. Add a brief description..

   5. Press the Save & Proceed button.

4. Establish the various characteristics which will help users when filtering the your designs.

   1. Active defines if the layout is visible to users on your storefront. This can be useful when a design is being created, but not yet ready to use.

   2. Selecting the orientation will allow users to filter designs based on the orientation of their product selection.

   3. Indicate if you plan to include a placeholder in your layout design for a logo or a key photo.

   4. Select one or more layout categories or enter the text to define a new category then press the +Add Category button to add a new selection.

   5. Select a layout style or add a new descriptive style if necessary.

   6. If your design is built around a specific color scheme, select the color or colors.

   7. Assign tags or keywords to your design layout.

   8. Indicate if the design is a Front or Back specific design layout.

   9. Select the appropriate button to continue or cancel.
      
      

5. Build your layout using the CanvasBase design tool. (Here’s a video demonstrating using CanvasBase in Builder Mode to create a design layout template for your customers to use when designing a look for a product.)

    

   1. Hovering over the design element buttons will provide more info about the button or what action it performs. Selecting some design tool buttons will display a tool specific set of options to the left of the design canvas, some will simply toggle the feature, and others will display a sub-menu of items from which to select.
      
      

       

   2. Text Design Tool Button

      1. Insert New Text Field - Just like it sounds. Adds a new single line text element to the canvas.

      2. Insert New Text Menu - Allows you to build a set of text elements from which the designer can select when using the layout. (e.g. cities in your area)

      3. Insert New Text Area - Allows you to add a multi-line text box to your canvas.
         
         

   3. Images Design Tool Button

      1. Browse Our Stock Images - Click this button to browse an extensive library of free stock images.

      2. Upload An Image - Upload your own images. You’ll be prompted to add keywords and a category to help it be found when searching. You can elect to add the image to the stock images library.

      3. My Image Uploads - Clicking this will take you to a library of your own images uploaded to your account.
         
         

   4. Shapes Design Tool Button (shapes or icon uploads must be a .SVG file)

      1. Insert Basic Shapes - Click the appropriate square, circle, or line shape button to effortlessly add that shape to your design layout canvas.

      2. Upload A Shape - If you have a shape file (SVG) on your computer you can use this tool to upload it for use on your design.

      3. Browse Shapes/Clipart - Click to browse the design library for shapes or clipart (SVG).

      4. Browse Icons - Click this button to browse icons in the design library.

   5. Holder Design Tool Button - Inserts to the design canvas a placeholder element that end users can select to upload their image into that spot.

   6. BG (Background) Design Tool Button

      1. Browse Backgrounds - Click this button to browse the large stock background library.

      2. Upload A Background - Click this button to upload a background image from your computer into your image library for use in your layout designs.

      3. My Background Uploads - And this button will allow you to browse and search for your own uploaded background images.

      4. Background Colors - The colors panel will allow you to select existing color swatches or add your own to the library for use in your design layouts.

   7. Snap Design Tool Button - Toggles whether elements placed on the design canvas jump to place on a design grid or can be freely placed anywhere.

   8. Undo/Redo Design Tool Buttons - Perform like normal undo and redo buttons.

   9. History Design Tool Button - Displays a linked list of recent design edits and clicking any edit link will take your design back to that point in the design process.

   10. Reset Design Tool Button - Will remove all design elements and reset the canvas back to its default state.

   11. Tag Design Tool Button - Inserts the storefront logo into the design canvas.

   12. View Design Tool Button - Toggles a sub-menu from which you can select to Preview (opening a small window containing your design without the cut and safe guides) or Full-screen preview (toggles the design canvas to full screen).

   13. Save Design Tool Button - Saves your current design state.

   14. Locks Design Tool - Displays a sub-menu where you can toggle the lock state of all Background elements, Text elements, Image/Shape elements, and hide or show element controls.

6. When you are happy with your design layout, click the Save & Proceed button to review your design.

7. You have the option to Proceed if you are satisfied your design is ready for release or Return To Designer to clean up any issues you see when reviewing.