Shoper Visual Editor

SVE is a tool for managing the appearance of the store, checking different layouts, selecting modules and preview changes before publication for clients.

Themes development

Skins are graphic templates that are ready-made template modifications of the graphic design of the store. See details.

Theme settings

Theme settings configuration schema is created using a JSON. See details.

The configuration of theme settings consists of two configurations. System configuration and theme configuration. System configuration is built-in and cannot be modified. Theme configuration is provided by theme developer.

Values available in TWIG

You can reach system/theme configuration values in your twig file using variable:

themeConfig - values for theme configuration, different per skin, provided by theme developer

systemConfig - values for system configuration build-in configuration See all values

usage in TWIG

Path to favicon: {{ systemConfig.systemFavicon.paths.original }}
Number of products on page: {{ themeConfig.THEME_ELEMENT_NAME }}

Colors and styles

Theme colors and styles configuration schema is created using a JSON. See details.

The configuration of colors and styles consists of two configurations. System configuration and theme configuration. System configuration is built-in and cannot be modified. Theme configuration is provided by theme developer.

Values available in LESS

You can reach system configuration values in your less using @SYSTEM_ELEMENT_NAME. See all values

To reach theme configuration value in your less you need to add a prefix skin_ to your element name: @skin_THEME_ELEMENT_NAME

For example, assume theme developer defined schema for Colors and styles:

[
    {
        "label": "Another colors for theme",
        "state": "unfolded",
        "elements": [
            {
                "name": "colorOfHeader",
                "type": "colorPicker",
                "label": "Pick color",
                "labelDescription": "Header background color",
                "defaultValue": "#FFFFFF"
            }
        ]
    }
]

usage in LESS

header { background-color:@skin_colorOfHeader; } /* variable from theme */
footer { background-color:@primaryColor; } /* variable from system */

Modules development

A module is an element that allows for the addition of new functionality to the store. See details.

Module template

Module templates use Twig as a template engine. You can change their behaviour calling ObjectApi methods, using twig syntax or html. See details.

Module configuration

The configuration of modules are created using a JSON file. See details.

Values available in TWIG

You can reach configuration values in your twig file using {{ moduleConfig.ELEMENT_NAME }}

usage in TWIG

Path to image: {{ moduleConfig.image.paths.original }}
Number of products in module: {{ moduleConfig.productsInModule }}

Module Translations

Translations for modules are created using a JSON file. Provided locale code must be combining the ISO 639-1/639-2/639-3 language code and the ISO 3166-1 region code, separated by an underscore.

Below you can see example structure.

Module translations JSON

{
  "module": {
    "pl_PL": {
      "Source path": "Ścieżka źródłowa"
    },
    "en_US": {
      "Source path": "Source path"
    },
    "de_DE": {
      "Source path": "Quellpfad"
    },
    "zgh_MA": {
      "Source path": "Njia ya Chanzo"
    }
  },
  "schema": {
    "pl_PL": {
      "Module icon": "Ikona modułu"
    },
    "en_US": {
      "Module icon": "Module icon"
    },
    "de_DE": {
      "Module icon": "Modulsymbol"
    },
    "zgh_MA": {
      "Source path": "Ikoni ya moduli"
    }
  }
}

Phrases included under the module root key are translated in the store, and under the schema key in the SVE in module where it was provided.