Designing a beautiful layout

Bigger textSmaller text

Webshop layoutA professional layout is important to appear trustworthy in order to win the confidence of your customers. EasyWebshop makes it easy to choose and personalize a layout yourself. No need for an expensive web designer.

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

Add about 10 to products before experimenting with the layout and configuration.

Layout management

Navigate to Settings > Layout. Below we explain how each tab works.

Layout management

Templates, Themes and Designs

Templates and Themes

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.

Choose one of the templates or themes and 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. It will now be live for your visitors.

Logo

Example 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 of 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 25MB. 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.

Browser icon

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

Favicon

For maximum compatibility with all types of devices, it's recommended 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.

It's possible that the browser icon not immediately changes after updating it in layout management. This is because of browser caches. This issue fixes itself after a while when the cache clears. You can also manually clear the browser cache or visit the website with a device you didn't use before.

Colors

The colors interface extracts all the colors from the chosen theme and provides an easy way to change them. The Edit CSS button is an expert feature which provides further options to fine-tune the layout by changing the CSS code.

Some useful links:

After making changes, click the Save button below.

Images

If images are present in the theme, they will be listed here. Click the Edit image icon to update the image. With the designer (see next page) you can add more images.

After making changes, click the Save button below.

If the image doesn't change on the website, this is usually because the old photos are still in the cache of the web browser. A web browser (Firefox, Google Chrome, ...) saves web pages and images on your hard disk. This way, on 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.

Browser cache example

To solve this: 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.

In some web browsers you will have to manually clear the cache in the settings of the web browser. Where to find this depends on the web browser. Consult the help feature of your web browser for this. It's out of the scope of this wiki.

Font type

This interface allows you to change the main font type on your website. Simply choose a font and click the Save button below.

Layout fonts

It's recommended to not mix different font types on the same page.

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.

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 distractions.
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.
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!!!

Hiring a web designer to design your website

HTML - XMLWith 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. When looking for a web designer, please note that there are unfortunately many uneducated web designers on the internet. Ask for references and check the references also by contacting them.

Browser tabs makes switching tasks easier

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 of course not applicable. You can then look at the paper followed by looking at your screen. Yes, this was an insult to your intellect!

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

Tabs

After you have changed 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

Starter Wiki



Frequently Asked Questions Contact