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.
- 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.
- 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.
The favicon is displayed:
- In the browser tabs
- In the links bar
- In browser bookmarks
- When dragging to the desktop
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:
- Welcome message: see page Home in the next section
- Additional display settings, see the section shop Settings
- Partners and social media: see the marketing section
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.
- 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.
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.
|Template||Dimensions in pixels|
|Clean & Smooth||330x50|
|Fluid Edge Classic||1080x200|
|Flex Edge Classic||1080x200|