Design Editor

>> Open Summer Cart admin panel

>> Go to the Website Content menu, under 'Website Layout' click on Design Editor link.

Using Design editor you will be able to change the skin from the admin panel ..s.as.as.

Layout Manager

Here you can change the layout of any page. Start by selecting a page and click Edit layout.

Select the page which layout you want to edit and click on "edit layout" link. Design Editor Page will appear. The editor has 3 main parts - Columns, Page style and Boxes. In this article we will explain how to use them one by one.

Columns

From this part of the design editor, you can set how the main page content will be distributed, ie how many columns there will be for content preview. You can choose from seven preset styles among which those with 1, 2 or 3 columns arranged differently around the main content.

You have 4 styles for boxes in which you can enter the percentage of the total content for each element. If we choose the first style content in the middle and two columns on both sides, we can set the boxes in 30%, 40%, 30%. If the main content of a total width 1000px two columns will have a width of 300px, and will be the main content width 400px. All values must be in % (percent).

Note that in this case only 3 of the boxes are active, this is due to the fact that the style has only 3 items (2 columns and content).
After making the changes, press the save button, to save them.

Page Style

The "page style" page is responsible for the overall look of the page. This part of the design editor is divided into several parts:

Background

Background color choose what is the background of the store. Use the palette and choose a color with the mouse or directly enter hex code of color. You can add texture to the background of the store. To do so, select the "Texture" radio button and select the box located underneath the button. At the option deduction there is another feature - Tilling, which is located at the bottom of the Background box. From there you can choose how the texture is located. You have four options.

The last option is the possibility to upload your own background image in button upload. After clicking it will display a window from which to select the photo you want to apply in the background. By selecting the Fixed image checkbox the image will not scroll when scrolling the page.

Text

From here you can choose the style of the texts. First select which element (type text) will change. Select the type of font from the Font Family, select the text size of the slider or manually set value. From the drop-down menu select the unit for the font - px (pixels), em (equal to the currently specified point size), pt (points) or % (percent). Under this option is Text Character & Font Options. From here you can set the font options such as bold, underline, text alignment, etc. From color, you can change the color of the text. You can also directly specify the color by specifying it's hex code if you have it.

Buttons

This section contains only one button - Change. Click on it and it will open a new window with the button settings. From the drop-down menu - Buttons Types button, select which type you want to modify or change the number of both types of buttons by putting a check mark on each.
IMPORTANT: The difference between Buttons Types and Preview is that if you edit a button and apply a style to it, then save the changes (apply to preview). Put another check mark button and uncheck the already edited one. The changes you made will remain in the editor, but if you replace the button with buttons Types, changes will be returned in its initial form.

Let's move on to an explanation of the settings you can set the buttons.
Preview - real-time preview of the changes you make.
APPLY BACKGROUND - click the button background using the palette. As background, you can add a texture or image to upload from your computer.
BORDER SETTINGS - setting "border-a" button:

• border color - choose a boarder color from the palette or enter the hex code directly in the filed.
• border size - set the size of the border by using the slider or enter the value directly. The units are px, em and pt.
• border radius X и Y - this setting is used to set rounding radius for the corners of the button both horizontally and vertically. If you uncheck the "chained" option you can set different values ​​for X and Y. The units are px and%.

Title Font Settings - assign a style for the text in the button

• font family - choose a font type
  
• set the font size in the slider or enter value, valid units are px, em, pt or %.
• Text Character & Font Options.  You can set the font options such as bold, underline, text alignment, etc.
• Change font color - You can change the color of text in the usual way using the palette. You can also directly specify the color hex code if you have it.