Help

Back to: www.summercart.com
Language: EN

Help Categories

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.

After making the desired changes click Update style, to save them. Now you can switch to change another button / buttons. If there are no more buttons to edit, click the Apply button in the lower right corner.

Header

From here you can define the layout of the header-a in your store. You can choose from five preset layouts.

More

FOOTER: change the layout of the footer. You can choose from five pre-set layouts.

FACEBOOK, TWITTER и GOOGLE+  enter the link to your profile on the social networks. From here you can set the links for the buttons.

NEWSLETTER: select the newsletters for the corresponding box.

COLUMNS - The whole design is divided into top, bottom, left, middle, right and further right column. Select what will be the background of each section.

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 this, select the Texture radio button and select the box located underneath the button. There is one more option - Tilling, which is located at the bottom of the Background box. From there you can choose where the texture is located. You have four options.


The last possibility is to upload your own background image in button upload. After clicking it a window will be displayed from which you can selecta a photo you want to upload and apply to the background. By selecting the Fixed checkbox , the image is fixed and does not move when scrolling the page.

Boxes

From here you can add new boxes to the layout of the store. Here is a detailed list of all boxes in the store.

Banners

Bestsellers - 

Box Style - 
  • saved styles - You can choose a predefined style from the dropdown menu below or you can create a completely new style of your own.
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Options

  • Consider orders placed in the last
  • Number of best sellers to display
  • List by 

Categories

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Currency

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Custom Products

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Options

  • add product

Dropdown Categories

  - template not found.

Login

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Manufacturers

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Options
  • Display manufacturers

Menu

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Options
  • select menu

Mini Cart

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

New Products

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title
Options

News

Box Style - 
  • saved styles
  • header background
  • font settings
  • content background

Name and title

  • Box name
  • Box title

Newsletter


Page Contents

Product Comparison

Recently Viewed

Search

Shopping Cart

XHTML Box