EasyWebshop

Layout settings

Lay-out design With EasyWebshop it's possible to create a personal layout for your online shop in a user friendly way. The layout manager gives you plenty of functionality to customize and fine tune the look of your website. Layout settings can be found at Settings > Layout.

1. Choose a template to start

Choose a design which you want to start from. You can view an example of the design by clicking on it. Feel free to experiment, no data will be lost if you change the layout.

Mobile version with responsive designs
The templates with the Responsive icon can adapt depending on the screen size of your visitors. These templates work on smartphones and tablets.

2. Choose the color palette

Click Color palette tab. You can choose a preset color palette, or set the color combinations yourself.

Background
This color is used for the background. A background image can cover this color.
Menu background
This color is used for the background of the elements on your web shop.
Menu text
This color is used for text on the elements. Provide adequate contrast with the background menu.
Menu mouse over
This color is used when a visitor moves with the mouse cursor over a menu item.

Experiment with different combinations, you can always undo your changes afterwards. Make sure that the final result is not too flashy and that there is sufficient contrast between texts and backgrounds.

Tips for color combinations:

You also can add a custom color code by clicking on the color code in the color selection popup. Color codes can be found on the above mentioned websites. Enter a hexadecimal color code that stats with #. For example: #FF9900.

You can also customize the display of texts and titles. Values ​​that are commonly used on the internet are set by default. If there is no reason to change this, we recommend to use the default values.

Font: Sans-Serif, Text size: 1em, Text color: Black.

This setting affects all texts on your shop. This way, everything stays consistent. In order to make exceptions to certain texts, you can use the content management system.

A frequently asked question to our support: "The texts in my shop are gone." This is because the text color is set to the same color as the text background color.

You can also change the styling of the buttons that are displayed on your online shop.

3. Choose a background

Upload your own background image
Use a custom background that makes your shop unique. You can delete the background by clicking Upload without uploading a file.
Repeat background
You can choose to repeat a pattern or to spread a large photo on the background.
Opacity
You can make the content of your webpage transparent so the background glows through. 50% = very transparent, 100% (default) = not transparent. Make sure that there is sufficient contrast.
Background patterns
You can use one of our pre-programmed patterns rather than choosing your own background. More patterns can be found here:

4a. Upload a (company) logo

When you upload a logo, the title and slogan on your shop are replaced by the logo. Please check that your logo fits well within the design.

These are free image editors that allow you to edit your logo:

Tip: you can upload transparent images. We recommend the .png format.

You can delete the logo by clicking Upload without uploading a file.

4b. Set browser icon

This allows you to upload a favicon that is visible in the address bar when visiting your shop.

You need a .ico image file, 16x16 pixels and maximum 150Kb.

Favicon

The favicon is displayed:

5. The homepage of your shop

Here you can choose to show or to hide objects on your homepage. There are a lot more objects you can display on your homepage:

By default the last 12 products are displayed on your home page, change it to 0 if you don't want products on your homepage. You can also set for each product if you want to display it on the homepage. See advanced product management for this.

View your shop

After you click Save the changes are effective immediately. Click view your shop to see the result.

Frequently asked questions about layout

There is free space on the left and right of the page, can I also put information there?
Our templates are built up to 1000 pixels wide. This fits perfectly on most computer screens, ultrabooks, netbooks and tablets.

On a large screen, you will see free space left and right. This is "flexible space" which changes depending on the width of the screen. If you would put banners or text in that place, then a horizontal scroll bar will appear on many computers. Your visitors will need to scroll horizontally to read all the information.

If you still want to make the website wider, than it's best to choose for a custom designed layout.

Possible Problems

I still see the old version of the website
This is usually because the old images are still in the cache of the web browser. A web browser (Internet Explorer, Firefox, Google Chrome...) saves web pages and images on your hard disk. This way, at your next visit, the page will load faster. When you visit the page, you will see the old version of the photo on your hard drive and not the live version on your website.

To solve this problem: navigate to the shop page and click Refresh page or Reload page.

You can also use the shortcut keys: F5 or CTRL + R (Command + R on Mac). The most recent version of the web page is now loaded.

Other possible reasons why you don't see changes:
- You're looking at a wrong website or webpage
- There is an advanced layout module (CSS layout or Custom layout) active
My logo is repeated or there is blank space next to it
If your logo does not have the correct dimensions, it will be repeated, or whitespace will occur on the sides.
The favicon is not displayed
Use a recent browser. In some old versions of Internet Explorer no favicon is displayed.
Also connect a domain name to your shop. Some browsers display the favicon of EasyWebshop if no domain name is connected.

Logo sizes

You can choose the dimensions of your logo yourself. This table shows how much space is available for the logo. Larger logos are automatically scaled proportionally.

TemplateDimensions in pixels
Soft Touch200x50
Soft Link200x50
Easy Mobile330x50
Clean330x50
Clean & Smooth330x50
Streamlined1120x200
Streamlined Wide2000x200
Elementary330x50
Elementary Reverse330x50
Fluid1080x200
Flex1080x200
Fluid Classic1080x200
Flex Classic1080x200
Fluid Edge1080x200
Flex Edge1080x200
Fluid Edge Classic1080x200
Flex Edge Classic1080x200

Next page: Edit texts and webpages >>>

Overview

Info

Documentation