Settings

• Last updated on June 2, 2025
• •
• 6 minutes to read

Settings represent a collection of configurable options that control the behavior and appearance of the Simple Editor. These settings are divided into sections, each focusing on a specific group of related features, like the text editor, design variants, or product details.

Below is a breakdown of these sections and their corresponding configurations.

{
    "settings": {
        "proof": {},
        "inputGroup": [],
        "textEditor": {},
        "designVariants": {},
        "imageSelector": {},
        "validations": {},
        "productDetails": {},
        "imageCropper": {},
        "options": {},
        "designViewer": {},
        "quantity": {},
        "surfacePagination": {}
    }
}

Let's dive into the parameters of each section.

Proof

The proof object configures the settings related to the generation and display of proof images.

{
    "proof": {
        "downloadButtonEnabled": true,
        "openInNewTab": true,
        "proofRenderingConfig": {
            "width": 800,
            "height": 600,
            "format": "Pdf",
            "safetyLinesEnabled": true,
            "watermarkEnabled": true,
            "watermarkOpacity": 0.5,
            "watermarkRepeat": true
        }
    }
}

• downloadButtonEnabled: Determines if the Download button is visible.
• openInNewTab: Specifies if proof images will be displayed in a new tab.
• proofRenderingConfig: Configures the rendering parameters.
  • width: Sets the width of proof images, in pixels.
  • height: Sets the height of proof images, in pixels.
  • format: Specifies the format of proof images (e.g., "Jpeg", "Png", "Tiff", or "Pdf").
  • safetyLinesEnabled: Enables or disables safety lines on proof images.
  • watermarkEnabled: Enables or disables the watermark on proof images.
  • watermarkOpacity: Sets the opacity level of the watermark.
  • watermarkRepeat: Determines if the watermark repeats across the proof.

inputGroup

The inputGroup array configures groups of input fields.

{
    "inputGroupsEnabled": true,
    "inputGroup": [
        {
            "name": 'Alphanumeric',
            "settings": {
                "alphanumericCharactersOnlyMode": true
            }
        },
        {
            "name": 'Capital Letters Only',
            "settings": {
                "capitalCharactersOnlyMode": true,
                "calculateInputWidthMode": true
            }
        }
    ]
}

• inputGroupsEnabled: Enables or disables input groups for the design.
• inputGroup: An array defining the input groups.
  • name: The name of the displayed group, the same as in the design.
  • settings: Input settings for a specific group:
    • alphanumericCharactersOnlyMode: Enables input of only alphanumeric characters.
    • capitalCharactersOnlyMode: Allows entry of uppercase characters only.
    • calculateInputWidthMode: If true, dynamically calculates the input field width based on fontSize, fontWeight, and fontFamily. By default, it's false and is controlled by the variable --se-symbol-input-width.

textEditor

The textEditor object configures the text editing experience.

{
    "textEditor": {
        "defaultRowCount": 3,
        "maxRowCount": 10,
        "scrollbarType": "default",
        "resizeMode": "auto"
    }
}

• defaultRowCount: Sets the initial number of lines displayed without scrolling. The default value is 5.
• maxRowCount: Sets the maximum number of rows available. The default value is 10.
• scrollbarType: Specifies the type of scrollbar ("default" or "custom"). The default value is "custom".
• resizeMode: Defines how the text editor can be resized ("fixed", "manual", or "auto"). The default value is "fixed".

designVariants

The designVariants object configures the selector of design variants, which displays thumbnails of available design variants either in a list on the same page or in a separate modal window.

{
    "designVariants": {
        "type": "List",
        "showLessModeEnabled": true,
        "showLessModeRows": 3,
        "showValueInTitle": true
    }
}

• type: Specifies the type of design variant selector ("Dialog" or "List"). The default value is "Dialog".
• showLessModeEnabled: Enables the Show less / Show all button when displaying design variants in the "list" view.
• showLessModeRows: Sets the number of rows in the ShowLess mode for the "list" view.
• showValueInTitle: If true, displays the title under the design variant preview in the "list" view.

By default, a user must click Change design to select a design variant in a modal window.

{
    "designVariants": {
        "type": "Dialog"
    }
}

imageSelector

When creating an image placeholder in a design, if you define the Allowed Subfolder field with a path to a folder containing images, you can display those images on the option page in ShowLess mode. The imageSelector object controls the appearance of the image list.

{
    "imageSelector": {
        "showLessModeEnabled": true,
        "showLessModeRows": 2
    }
}

• showLessModeEnabled: Enables or disables the Show less / Show all button. The default value is true.
• showLessModeRows: Sets the number of rows in the ShowLess mode. The default value is 2.

validations

The validations object configures validation settings.

{
    "validations": {
        "ignoringFormValidationEnabled": false,
        "approvalCheckboxEnabled": true,
        "approvalWarningModeEnabled": true
    }
}

• ignoringFormValidationEnabled: Allows adding products to the cart even if there are validation errors. The default value is true.
• approvalCheckboxEnabled: If true, shows the checkbox for approving the product. The Add to cart button will be active only if the checkbox is selected. The default value is true.
• approvalWarningModeEnabled: If true, activates the Add to cart button, but shows the approval warning if the approval checkbox is not selected. The default value is false.

productDetails

The productDetails object adjusts the visibility of product details.

{
    "productDetails": {
        "skuVisible": true,
        "priceVisible": true
    }
}

• skuVisible: If true, shows the product SKU. The default value is true.
• priceVisible: If true, shows the product price. The default value is true.

imageCropper

The imageCropper object adjusts the cropping parameters of images when they are inserted.

{
    "imageCropper": {
        "minSide": 100,
        "zoomStep": 0.1,
        "zoomMaxValue": 3,
        "gripsHitboxSize": 10
    }
}

• minSide: Sets the minimum side length for the cropped image. The default value is 100.
• zoomStep: Sets the step value for zooming. The default value is 0.2.
• zoomMaxValue: Sets the maximum zoom value. The default value is 1.8.
• gripsHitboxSize: Sets the size of the hitbox for the grips. The default value is 20.

options

The options object configures the appearance of product options in the editor by applying modifiers to the options by name.

{
    "options": {
        "showSingleValueOptions": false,
        "disableUnavailable": false,
        "modifiers": [{
            "name": "Orientation",
            "type": "Chips",
            "visible": true,
            "priority": 1,
            "preselected": "Portrait",
            "description": "Select page orientation",
            "tooltip": "Option Tooltip"
        }]
    }
}

• showSingleValueOptions: If false, hides options that only have one value. The default value is true.
• disableUnavailable: If true, disables unavailable options. The default value is true.
• modifiers: An array of objects defining the product options.
  • name: The option name used to identify the option for applying modifiers. This mandatory property can be used with any combination of the following properties.
  • type: The display type of the option. For more details, see how those types appear.
  • visible: If true, displays the option even if it has only one value.
  • priority: The numeric priority; options with higher priority values appear higher in the list. The default value is 1.
  • preselected: A string or array of strings specifying values to be preselected when the options are loaded.
  • description: A text description of the option.
  • tooltip: The message that appears when clicking the (i) icon.

designViewer

The designViewer object is responsible for the appearance of the viewer.

{
    "designViewer": {
        "surfaceShadowEnabled": false,
        "previewMode": false
    }
}

• surfaceShadowEnabled: If true, shows a shadow bounding a product page. The default value is true.
• previewMode: If true, shows the actual product size without displaying the bleed zone. The default value is true.

quantity

The quantity object configures how quantities are managed within an order.

{
    "quantity": {
        "type": "List"
    }
}

• type specifies the type of quantity selector. It can be either "List" or "Stepper". The "List" type displays a dropdown list of predefined quantities, while the "Stepper" type uses increment and decrement buttons and accepts arbitrary values.

The "Stepper" is the default type.

To enable the list mode, set the quantity.type property to "List". By default, the quantity list will include predefined values [1, 5, 10, 20]. To customize these values, define them in the quantity.list array within the resources.

surfacePagination

The Simple Editor allows you to display the paginator near the viewer, either vertically or horizontally oriented. You can also define the justification of thumbnails and specify whether titles should be displayed.

{
    "surfacePagination": {
        "showTitle": "false",
        "isVertical": "false",
        "itemsJustify": "center"
    }
}

For the justification, you can specify either "center", "start", or "end".