Designing a beautiful layout

Webshop layout A professional layout is important to appear trustworthy in order to win the confidence of your customers. With EasyWebshop it's very easy to choose and personalize a layout yourself.

Changing the layout has no impact on the operation of the shop. Any change can be undone or modified later. So take your time to experiment with colors, images and fonts to obtain the desired result.

Updating the layout

Navigate to Settings > Layout.

The fastest and easiest method is to choose a theme and upload a logo. This method is suitable for entrepreneurs with limited time or for users who don't want to dive into the designer.

Templates, Themes and Designs

Templates are basic designs that are first in the list and do not include colors. They are suitable for business websites where the focus is on the products.

Themes are based on a template and are further refined with color combinations and backgrounds. They are suitable for websites where the design needs to be attractive.

Designs are templates or themes that are personalized by you, the user, using the designer. This method is suitable for users who want to personalize the details of their website.

All templates and themes are mobile-friendly and optimized for fast load times and optimal indexing in search engines.

Customizing a Template or Theme

Choose one of the templates or themes in the Theme tab by clicking on the screenshot.

Click Example to view an example. This example is not visible to your visitors.

Click Publish to set the template or theme for your website.

Click Update to personalize the template or theme with the designer. The following documentation page describes the functions of the designer.

Uploading a logo

Under the Logo tab, you can upload a (company) logo by selecting it and clicking Save.

If you don't have a logo yet, you can have it designed by a logo designer. At EasyWebshop we do not design logos. An interesting website to have a logo designed is 99designs.

Adjusting the logo dimensions after uploading

Scale
This is the default setting: the logo will be proportionally scaled to maximum 300x100 pixels.
Crop
This will cut off the part of the logo that is too large.
No changes
No modifications will be made to the logo after uploading. Choose this option if you have the logo at the correct size yourself.

We recommend not making logos too large. This makes it difficult for visitors with smartphones. If the logo is too wide, a horizontal scroll bar will appear. If the logo is too tall, more scrolling will have to be done vertically.

The default setting of 300x100 pixels is ok in most situations. With some themes it is better to make the logo larger or smaller.

The maximum size of the logo is 5MB. The possible file formats are .gif, .jpg, .png and .svg. For transparent logos, use the PNG or SVG format. GIF animations are possible, but we don't recommend using them as logos.

Uploading browser icons

The browser icon or Favicon is an icon associated with your website. You can have it designed by your logo designer.

Favicon

For best compatibility with all types of devices, it is best to upload a .ico, .png and .svg version.

.ico
A standard favicon has the dimensions 16x16, 32x32 or 64x64 pixels, and contains 16 colors. The file size is a maximum of 150Kb.
.png
The recommended dimensions for a .png favicon are 196x196 pixels.
.svg
For higher resolutions, SVG favicons can be used. Please note that not all devices support SVG favicons.

Personalize your template or theme with the designer

With the designer, the chosen template or theme can be personalized. The designer offers a lot of possibilities to personalize and is therefore less easy to use than standard layout management. The next page describes the functions of the designer.

Tips to design a beautiful layout yourself

Keep it simple
Your customers do not purchase a product depending on the layout of the website. A simple functional layout will perform better than a busy layout with lots of unnecessary decoration.

Compare these two websites: Bing and Google. Which one is the most beautiful? Which one is the most used?
Stay consistent
Choose a color palette and keep using the same colors. Use the same font unless you know what you are doing.
Get inspiration
There is nothing wrong with watching how others do it. You can find inspiration in our examples or our directory.
Photos bring a website to life
A recognizable logo, clear product photos and a matching background make your website really come alive.
Get advice from friends, family and colleagues
Ask different people what they think of your layout. A beautiful layout is subjective. You will see that there are many conflicting opinions.
Provide adequate contrast, avoid style errors

Some common mistakes:

  • Text with low contrast
  • Text that is irritating to read
  • Effects from the 90s are no longer up to date
  • Large blocks of text in italics are difficult to read
  • AVOID USING CAPITAL LETTERS
  • Avoid repeating punctuation!!!

Asking a web designer to design your layout

HTML - XML With the built-in designer, you can personalize you layout yourself. There are plenty of options so you can distinguish your shop from other websites. This is the easiest and least expensive option.

If you don't achieve the desired result, you can ask a web designer to build a custom made layout. We do not provide web design services, but we have good contacts with reliable partners for this. Please contact us for a web designer, we will be happy to help you further.

You can also look for a web designer yourself. Please note, there are unfortunately many uneducated web designers on the internet. Ask for references and check the references also by contacting them.

The average cost for a custom layout is between € 500 and € 1,500, depending on what your needs are. Start with a clear description of what you expect.

Your web designer can customize the existing layout (CSS customization) or design a complete new layout. (Layout customization)

Navigate faster with tabs

Create two tabs in your browser: a tab with these instructions and a tab where you will manage your shop. This way you can easily switch from one tab to another and navigate faster. If you print this documentation, this is off course not applicable.

Press CTRL + T (or choose "File > New Tab") to open a new tab in your browser. In the new tab, navigate to our website: www.easywebshop.com.

Tabs

Every time you change something in the backend, navigate to the tab of your website and press Reload page, Refresh page or F5 to see the last update.


Next page: Designer >>>

Overview