Page status: Up to date | Application version: From 1.3.4.4

Settings & layout - Overview

Settings & layout is the area where the website customization begins:

  • the appearance of the website in frontend can be changed (the look and feel of the website)
  • customize the backend of the website to fit your needs (show / hide options to feel as proprietary application for you)
  • configure the system with your business details

Settings & layout is the first option from Shop configuration. When you click on Settings & layout from left menu, it opens in listing mode.


Area selector (top dropdown menu)

Settings & layout is separated on areas for easy management.
Area selector is the dropdown menu listed on top left side of the working area.
Default position of area selector is closed, waiting for your interaction. By clicking any of these areas, all settings available for that area will be displayed.
The areas are listed in alphabetical order for easy management.


Search area

Alternatively to looking for a specific area to change a setting, you may prefer to search for it by starting to type what you are looking for. The search will display you a list with existing topics in settings.
If any of the suggestions match your search just click on it and then click the green magnifier button. The result will be isolated for you on listing area.
If you want to have displayed the entire list of suggestions, just click on the green magnifier button. The results will be isolated for you on listing area

The search will show you all the results independent of the areas where they are located.

To release the search, click on the red x button.


Settings & layout - Fields types

The editable fields in Settings & layout are: text fields, editor fields, image uploader, color pickers and radio buttons.


Text fields

In text fields you write the required details: email address, name of your company or a phase.

The information you input in text fields will be displayed in one line. The text in these fields cannot be formatted.


Text editor

Insert the required text. You will be using a very basic classic text editor.
You can use simple text formatting by highlighting the text you want to format and click on the appropriate icon for the format you want to apply.
When you put the mouse over an icon, the name of the icon will be displayed for you to know if it is the correct one.

The information you input through text editor will be displayed in more than on multiple lines (if applicable) and will match the format you applied to your text.


Color picker

The color picker has two areas: a text field and a color picker area.
You can write direct into the text field provided the hexa code / rgb code of the color you want to setup. The hexa or rgb codes will have most accurate results.
Alternatively you can name the color in words like "white", "black", "red" so on for standard colors.
Or you can use the color picker for accurate result (results based on your visual ability). To use the color picker, click on the color rectangle at the right side of the box and will open a color map where you can choose with you mouse: pick the color from the color rainbow bar (put the mouse on color you choose and a white line will mark the color chosen). Adjust the color from the square to darken or lighten it up manipulated by mouse. A small circle will indicate the mouse position at release. The bottom color bar will show you the result. Also you can choose a solid color (recommended) or add transparency for your color from the very left transparency bar. When you are happy with the color shown on the bottom color bar, just click enter to validate the color. The color square from the right side will show the color you setup.
Click Update to update the color and close the color window.

The color will be displayed in the zone regulated by current color picker.


Image uploader

Upload the required image by clicking Upload button, browse and choose the image you want to upload from your computer.
Alternatively drag and drop the image in upload rectangle.

After the image is uploaded, the image field will close and an thumbnail of uploaded image will be displayed as data input. If the image was uploaded in wrong place you can edit again that field and delete the image by clicking on red X button.

The image you input will be displayed in full size in zone (position) regulated by current image uploader.

In case you want to delete an image already uploaded, click Edit button and then click the red X button in line with the image thumbnail (just above the image uploader rectangle). The window will close automatically and the field image will be empty.

In case you want to change an image, upload the new image like you did when the field was empty. The new image will replace the previsions one.


Radio buttons

When you select an option in radio buttons, the other option is automatically deselected.

The edit window will close automatically after you choose your answer. In case you did a mistake, edit again and choose the correct answer. The setting will be updated automatically.


NOTES
The search has precedence in front of area selector. If a search has been made, you need to release the search before browsing between areas.

On this page

Snapshots / images

Settings & layout: listing area

Settings & layout: listing area

The Settings & layout opens with listing area. Choose from dropdown menu the area you need to apply settings or change the layout. Or you can search the setting or layout you need to change it.

Settings & layout: display search results

Settings & layout: display search results

The search will suggest you the existing settings or layout names. Choose from suggested topics by clicking on it and then click search green magnifier.
The result(s) will be isolated in listing area.
To release the search click the red X button.

Text field

Settings & layout: edit - Text field

Sample of text field

Text editor

Settings & layout: edit - Text editor

Sample of text editor

Radio buttons

Radio buttons

Sample of radio buttons controls

Image uploader

Settings & layout: edit - Image uploader

Sample of image uploader

Color picker

Settings & layout: edit - Color picker

Sample of color picker

Headings