Navigation

Getting Started

Store Builder

Admin Settings

Business Hub

Customer Account Area

FAQs & Troubleshooting

Other Resources

  1. DecoNetwork Help
  2. Website Editor
  3. Website Pages

Configuring the Designer Page Settings

Avatar
Lee Prazner
Updated
Follow

On the Designer page, accessed via the PAGES tab of the Website Editor, you can edit the page settings of the Designer. These settings allow you to configure the size of the Designer within the screen, set the availability of the Introduction Popup, configure the behavior of the Quote icon, configure the display and search options for products in the Designer, and specify custom labels and icons for the buttons in the Designer.

To configure the Designer page settings:

  1. Click on the PAGES button in the Website Editor Toolbar.
    PagesTab.png
  2. Click on the Designer page tab.
  3. Click anywhere on the Designer page in the content area.

    The Designer Settings popup will be displayed.

    Designer_Settings_Popup.png
  4. Configure the Designer page settings as required.

    FULLSCREEN SETTINGS

    The Fullscreen Settings let you configure whether you want the Designer to cover the full screen and also the exit method for different screen sizes. To configure the Fullscreen settings:

    1. Click on the FULLSCREEN SETTINGS row to expand the section.
      FullscreenSettings.png
    2. Configure the settings for each of the device sizes.
      • Fullscreen on Mobile/Tablet/Desktop: tick the checkbox if you want the Designer to cover the entire screen.
      • Exit Designer Method: allows you to choose the method by which your website visitors can exit the Designer.
        • None: does not include a control for exiting the Designer.
        • Home Icon (links to home): displays a Home icon, which allows the website visitor to exit the Designer by going to the Home page.
        • Logo (links to home): displays the store logo, which allows the website visitor to exit the Designer by going to the Home page.
        • Back Button (links to last page): displays a back icon, which allows the website visitor to exit the Designer by going back to the previous page.
        • Close Button (links to last page): displays a close icon, which allows the website visitor to exit the Designer and go back to the previous page.

    LOADING BEHAVIOR

    The Loading Behavior Settings let you configure the default decoration method that will be selected when the online designer loads. To configure the Loading Behavior settings:

    1. Click on the LOADING BEHAVIOR row to expand the section.
      Loading_Behavior_Settings.png
    2. Configure the Loading Behavior settings.
      • Override designer loading behavior: tick this checkbox if you want to override the Fulfillment Center setting for whether the Get Started Popup will be opened with the cheapest decoration method selected. The Designer opens with the cheapest decoration method selected when no product is chosen checkbox will be enabled when this checkbox is ticked.
      • Designer opens with cheapest decoration method selected when no product is chosen: tick this checkbox if you want the price for the cheapest decoration method to be shown when the Designer is loaded without first choosing a product (i.e. when the Designer is not loaded via the "Start Designing" button for a particular product but directly via the Designer menu item).

    GET STARTED POPUP

    The Get Started Popup Settings let you configure whether you want an introduction popup to be displayed when the Designer loads. To configure the Get Started Popup settings:

    1. Click on the GET STARTED POPUP row to expand the section.
      Get_Started_Popup_Settings.png
    2. Configure the Get Started Popup settings.
      • Override Show Get Started Popup: tick this checkbox if you want to override the Fulfillment Center setting for whether a popup will be displayed prompting the customer to add a decoration to the product. The Show Get Started Popup checkbox will be enabled when this checkbox is ticked.
      • Show Get Started Popup: tick this checkbox if you want the Introduction Popup to be displayed when the Designer loads.

        This is the default Get Started Popup that will be displayed.

        IntroductionPopup.png
      • Override Get Started: tick this checkbox if you want to override the default introduction text.

        A Get Started Title field and a WYSIWYG HTML Editor will be displayed below the checkbox when it is ticked.

        Override_Get_Started.png

        Enter the Get Started Title and Get Started Text and configure the style of the text as required, using the Text Formatting toolbars.

        • Source: lets you toggle the WYSIWYG text and the source code.
        • Clipboard/Undo Toolbar:
          • Cut: removes the selected control or text and places it on the Clipboard.
          • Copy: copies the selected text onto the Clipboard.
          • Paste: inserts the contents of the Clipboard at the current location.
          • Paste as plain text: pastes text as unformatted text.
          • Paste from Word: pastes text while preserving the formatting of the original text.
          • Undo: lets you undo one change each time you click it.
          • Redo: lets you redo one change each time you click it.
        • Font: select a font family from the dropdown list.
        • Size: select a preset font size from the dropdown list.
        • Text Color: Select a font color using the Color popup. Click here for instructions.
        • Basic Styles Toolbar: lets you format the style of the text.
          • Bold: formats the text with thicker lines.
          • Italic: formats the text with a slant to the right.
          • Underline: displays a line underneath the text.
          • Strikethrough: displays a horizontal line through the middle of the text.
          • Subscript: formats the text as small letters below the text baseline.
          • Superscript: formats the text as small letters above the normal line of type.
          • Remove format: removes all formatting applied to the text.
        • Paragraph Toolbar: lets you set the formatting of the paragraph.
          • Insert/Remove Numbered List: starts a numbered list at the cursor position and applies a numbered list to selected text or removes a number point from the current cursor position and removes a numbered list from selected text if a numbered list is applied.
          • Insert/Remove Bulleted List: starts a bulleted list at the cursor position and applies a bulleted list to selected text or removes a bullet point from the current cursor position and removes a bulleted list from selected text if a bulleted list is applied.
          • Decrease Indent: decreases the distance between the start of the paragraph and the left margin.
          • Increase Indent: increases the distance between the start of the paragraph and the left margin.
          • Block Quote: creates a block element to enclose text as an extended quotation. The block is rendered visually by the display of a grey line down the left of the quote container and italicized text that is indented from the left margin.
          • Create Div Container: creates an HTML div container to encapsulate a group of content.
          • Align Left: aligns text to the left margin.
          • Center: centers text horizontally between the left and right margins.
          • Align Right: aligns text to the right margin.
          • Justify: aligns text to both left and right margins.
          • Text direction from left to right: sets the text to start from the left margin and move towards the right margin as you type.
          • Text direction from right to left: sets the text to start from the right margin and move towards the left margin as you type.
        • Links Toolbar: lets you configure hyperlinks on your text.
          • Link: lets you specify a URL to an arbitrary web address.
          • Unlink: removes a previously configured hyperlink.
          • Anchor: lets you specify a name for an anchor point that you wish to link to from elsewhere on the page.
        • Insert Toolbar: lets you insert other elements into the text box.
          • Image: lets you insert an image and configure its appearance.
          • Flash: lets you insert a flash animation.
          • Table: lets you insert a table and specify its properties.
          • Insert Horizontal Line: lets you insert a horizontal line and specify its appearance.
        • Maximize/Minimize: lets you toggle the size of the HTML Editor. Maximize makes the editor the full size of the screen. Minimize reduces it back to its original size.
        • Placeholder: lets you insert your company details into the text block using the data fields in the dropdown list. Details for the data fields are taken from your account information.
          PlaceholderDropdown_TextSettings_.png

    QUOTE LINK

    The Quote Link Settings let you configure the behavior of the Quote icon.

    QuoteIcon.png

    To configure the Quote Link settings:

    1. Click on the QUOTE LINK row to expand the section.
      QuoteLinkSettings.png
    2. Select an option from the Quote Link Type drop-down list.
      • Don't Show: hides the Quote icon.
      • Loads Request a Quote Page: loads the Request A Quote page when the Quote icon is clicked.
      • Custom URL: lets you specify a custom URL that will load when the Quote icon is clicked.

    PRODUCT

    The Product Settings let you configure the display and search options for products in the Designer. To configure the Product settings:

    1. Click on the PRODUCT row to expand the section.
      Product_Settings.png
    2. Choose an option for the display of the product's code from the Product Code drop-down list:
      • Don't Show
      • Show

      This setting shows/hides the product code in both the Designer and the Product Selector.

    3. Configure the Show Product Search in Product Selector option.
      • Tick the checkbox if you want to show the product Search box in the Product Selector.

        The Search box will be displayed at the top right panel of the Product Selector as follows:

        ProductSelectorSearchBox.png
      • Un-tick the checkbox if you want to hide the product Search box in the Product Selector.
    4. Configure the Show Full Product Description option.
      • Tick the checkbox if you want the full blank product description to be visible.
      • Un-tick the checkbox if you want the blank product description to be cropped and a View Description link to be available which will expand the description section when clicked.
        Product_Options.png

    DESIGN

    The Design Setting lets you configure which design category should be selected when opening the Select a design popup in the Designer.

    To configure the Design settings:

    1. Click on the DESIGN row to expand the section.
      Design_Settings.png
    2. Choose an option from the Default Category drop-down list:
      Default_Category_Dropdown.png
      • Automatic (let system choose): will display a category chosen by the system.
      • My Designs: will load the user's own uploaded designs.
      • Stock Designs: will load designs from the stock design collection.
      • Store Designs: will load designs that have been uploaded to the store.

    BUTTONS

    The Buttons Settings lets you specify custom labels and icons for the buttons in the Designer.

    To configure the Buttons settings:

    1. Click on the BUTTONS row to expand the section.
      Buttons_Settings.png
    2. Modify the names/icons of the buttons in the Designer as required.
      • Mobile Product Button Label: lets you modify the name that will appear on the Product button when viewed on a mobile device.
      • Product Button Label: lets you modify the name that will appear on the Product button when viewed on a tablet, monitor, or widescreen monitor.
      • Product Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Product button on a monitor or widescreen monitor.
      • Product Button Icon - Upload Image: lets you upload a custom image that will appear on the Product button.
      • Mobile Add Text Button Label: lets you modify the name that will appear on the Add Text button when viewed on a mobile device.
      • Add Text Button Label: lets you modify the name that will appear on the Add Text button in the Designer when viewed on a tablet, monitor, or widescreen monitor.
      • Add Text Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Add Text button on a monitor or widescreen monitor.
      • Add Text Button Icon - Upload Image: lets you upload a custom image that will appear on the Add Text button.
      • Add Design Button Label: lets you modify the name that will appear on the Add Design button.
      • Add Design Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Add Design button on a monitor or widescreen monitor.
      • Add Design Button Icon - Upload Image: lets you upload a custom image that will appear on the Add Design button.
      • Mobile Add Team Name Button Label: lets you modify the name that will appear on the Add Team Name button when viewed on a mobile device.
      • Add Team Name Button Label: lets you modify the name that will appear on the Add Team Name button when viewed on a tablet, monitor, or widescreen monitor.
      • Add Team Name Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Add Team Name button on a monitor or widescreen monitor.
      • Add Team Name Button Icon: lets you upload a custom image that will appear on the Add Team Name button.
      • Mobile Add Placeholder Button Label: lets you modify the name that will appear on the Add Placeholder button when viewed on a mobile device.
      • Add Placeholder Button Label: lets you modify the name that will appear on the Add Placeholder button when viewed on a tablet, monitor, or widescreen monitor.
      • Add Placeholder Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Add Placehoder button on a monitor or widescreen monitor.
      • Add Placeholder Button Icon - Upload Image: lets you upload a custom image that will appear on the Add Placeholder button.
      • Mobile Location Button Label: lets you modify the name that will appear on the Location button when viewed on a mobile device.
      • Location Button Label: lets you modify the name that will appear on the Location button on a monitor or widescreen monitor.
      • Location Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Location button on a monitor or widescreen monitor.
      • Location Button Icon - Upload Image: lets you upload a custom image that will appear on the Location button.
      • Mobile Close Button Label: lets you modify the name that will appear on the Close button when viewed on a mobile device.
      • Close Button Label: lets you modify the name that will appear on the Close button when viewed on a tablet, monitor, or widescreen monitor
      • Close Button Tooltip: lets you modify the help text that will appear when you hover the mouse pointer over the Close button on a monitor or widescreen monitor.
      • Close Button Icon - Upload Image: lets you upload a custom image that will appear on the Close button.
      • Change Product Button Label: lets you modify the name that will appear on the Change Product button.
      • Buy Button Label: lets you modify the name that will appear on the Buy button.
      • Upload Image Button Label: lets you modify the name that will appear on the Upload Image button.
      • More Product Info Label: lets you modify the name that will appear on the More Product Info button.
      • View Description Label: lets you modify the name that will appear on the View Description button.
      • Hide Description Label: lets you modify the name that will appear on the Hide Description button.

    HELP POPUP

    The Help Popup setting lets you choose whether the Help Popup will be available in the Designer.

    To configure the Help Popup setting:

    1. Click on the HELP POPUP row to expand the section.
      Help_Popup_Setting.png
    2. Configure the Help Popup setting.

      Tick the Show Help Popup checkbox to display the Help icon that will open the Help Popup when clicked. Unticking the checkbox will hide the icon.

    SCREEN COLORS POPUP

    The Screen Colors Popup settings let you edit the text in the Screen Colors Popup that instructs the user on choosing colors for a screen print design when automatic tracking of colors is disabled. (The automatic color tracking setting can be configured via Admin > Decoration Processes > Screen Printing > Designer Settings > Color Management).

    Screen_Colors_Popup.png

    To edit the text the Screen Colors Popup:

    1. Click on the SCREEN COLORS POPUP row to expand the section.
      Screen_Colors_Popup_Settings.png
    2. Tick the Override Default Content checkbox to enable the text that appears in the Screen Colors Popup to be editted. Text boxes will be displayed for each of the default text strings, allowing you to edit them.
      • Select the colors that appear in your design.
      • You need to specify the total number of unique colors used across all the elements in your design.
      • This helps us determine the pricing based on the number of colors in your design.
      • You can also specify the colors used in your design eg "Red", "Blue", "pantone 1809".
      • If you dont tell us, our professional designer will work it out for you.
    3. Enter new text for each string as required.
  5. Click OK.
  6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Related articles

Comments

0 comments

Please sign in to leave a comment.