Configuring the Designer Page Settings

In 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, and to configure the display and search options for products in the Designer, and to 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.
   
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.

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

   INTRODUCTION POPUP

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

   1. Click on the INTRODUCTION POPUP row to expand the section.
      
   2. Configure the Introduction Popup settings.
      • Override Show Introduction Popup: tick this checkbox if you want to override the Fulfillment Center setting for whether the Introduction Popup will be displayed. The Show Introduction Popup checkbox will be enabled when this checkbox is ticked.
      • Show Introduction Popup: tick this checkbox if you want the Introduction Popup to be displayed when the Designer loads.

        This is the default Introduction Popup that will be displayed.

        
      • Override Introduction: tick this checkbox if you want to override the default introduction text.

        An Introduction Title field and a WYSIWYG HTML Editor will be displayed below the checkbox when it is ticked.

        

        Enter the Introduction Title and Introduction 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 both.
          • 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.
          

   QUOTE LINK

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

   

   To configure the Quote Link settings:

   1. Click on the QUOTE LINK row to expand the section.
      
   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.
      
   2. Choose an option for the display of the product's code from the Product Code drop-down list:
      • Don't Show
      • Show
   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:

        
      • Un-tick the checkbox if you want to hide the product Search box in the Product Selector.

   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.
      
   2. Choose an option from the Default Category drop-down list:
      
      • 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.
      
   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 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 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 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 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 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 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 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.
5. Click OK.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.