HTML5/CSS custom layout

Creating your design (easy)

With the built-in layout editor, you can create a layout by choosing a template and colors. There are plenty of features so that you can distinguish yourself from other web sites. This is the easiest and the most economical option.

Tip: keep the layout simple and upload high quality product photos. Your customers want to see your products, without being distracted by the web site design.

Layout design

Layout designed by a web designer (advanced)

Web design

If you do not achieve the desired result with the layout editor, you can let a web designer create a custom layout for you. EasyWebshop does not offer customized web design, but we have good connections with reliable partners.

You can also look for a web designer yourself. Verify that the person is competent, ask for references!When the web designer module is used without the necessary technical knowledge, then the following problems can occur:

  • Loss of functionality (for example: customers can't order)
  • Navigation problems and/or 404 pages
  • Incorrect display on phones and tablets (horizontal scroll bars)
  • Loss of results in search engines
  • Longer load times due to scripting errors

We can not provide support or customizations in the HTML and CSS codes. We can however get you in touch with a web designer.

Web designers

On this page we collect all useful info and tips for web designers.This page is not meant to learn HTML5 or CSS, you can visit W3Schools for that. (but you already knew that of course, being a web designer)

You find this functionality at Settings > Web designers > Code editor.If Web designers is not displayed in the menu, first adjust the user level to Expert at Settings > User experience level.

The web designer module is an expert module. Prior knowledge of HTML5, CSS and basic Javascript are required.

CSS customization

Use this method to make adjustments to a pre-selected template.

  • Choose a template at Settings > Layout > Template
  • Personalize the layout as much as possible to suit your needs
  • Activate the CSS module (verification code below)

You can now make adjustments to the CSS code.The CSS code you enter here will override the layout settings. As long as this module is active, most of the layout settings will not work.

To start over: clear the text field and click save. The default CSS code of the selected template will then be loaded. Disable the module if you want to use the easy layout settings again.

The activation code for this module is MODCSS.

HTML customization

Use this method to create template yourself.

  • Activate the module (verification code below)
  • Use keywords (see table below) to include shop objects

It is allowed to copy a EasyWebshop template and use it as a starting point. You can use inline CSS or you can include Javascript and CSS files in the HTML code by uploading them in the code editor.

The activation code for this module is MODL.

Code editor

The code editor has the following features:

Save
Save via AJAX
Undo
Undo last action
Redo
Redo last action
Zoom out
Decrease text size
Zoom in
Increase text size
Contrast
Switch between white or black background
Full screen
Switch between full screen or compact view
Upload
Upload files

Uploading custom Javascript, CSS, SVG and photos

With the upload icon, you can upload files:

  • .js - Javascript files
  • .css - CSS files
  • .svg - SVG images
  • .jpg, .gif, .png - Images, logos and backgrounds

After uploading, click Insert to include the file into the HTML code.

The Javascript, CSS and SVG files that you upload, can also be edited with the code editor. These files included automatically in the drop down menu.

Tips

Standard Javascript and CSS

Each shop contains a file shop.js for Javascript and shop.css for CSS.These include the scripting and formatting for all objects.You can use your own CSS by including it after shop.css to override the formatting.

shop.js - compressed
https://www.ewimg.com/scripts/shop.js
shop.js - code with comments
https://www.ewimg.com/scripts/src/shop.js
shop.css - compressed
https://www.ewimg.com/scripts/shop.css
shop.css - code with comments
https://www.ewimg.com/scripts/src/shop.css

Browser tabs

If you want to edit several files at the same time, open multiple browser tabs with the editor and a tab with the shop to see the result.

Create a layout folder

If there are multiple persons managing the webshop, it might be useful to create a folder layout for your scripting, CSS, logos, and backgrounds. This way there is no confusion if someone else uses photos for products or pages.

Make backups

Save the files also on your pc. This way you can restore the layout if a file is deleted by accident, and you can reuse the code for multiple webshops.

HTML keywords

KeywordResult
[WEBSHOP_HEADER]Title and meta tags, depending on the page, required
[WEBSHOP_CONTENT]Page content, required
[WEBSHOP_SHOPNAME]Shop name
[WEBSHOP_SLOGAN]Slogan
[WEBSHOP_SHOPPINGCART]Shopping cart
[WEBSHOP_NAVIGATION]Navigation
[WEBSHOP_CATEGORYLIST]Categories
[WEBSHOP_BREADCRUMB]Navigation: Breadcrumb
[WEBSHOP_LANGUAGE]Language selection menu
[WEBSHOP_CURRENCY]Currency selection menu
[WEBSHOP_SEARCHBOX]Search box
[WEBSHOP_CMSHEADER]CMS: Header
[WEBSHOP_SIDEPANEL]CMS: Side panel
[WEBSHOP_FOOTER]CMS: Footer
[WEBSHOP_BACKLINK]Backlink to EasyWebshop, required
[WEBSHOP_FOOTSCRIPTS]Scripting at the bottom of the page for webshop functionality, required

If you want to remove [WEBSHOP_BACKLINK], use the backlink removal module.

CMS and email keywords

These keywords can be used in CMS. Make sure that the appropriate module is activated.

KeywordResult
[WEBSHOPAPP_AppName]Insert a HTML5 app
[WEBSHOP_BLOG]Blog
[WEBSHOP_FEEDBACK]Customer feedback
[WEBSHOP_GUESTBOOK]Guestbook
[WEBSHOP_PAGEURL]HTTP address of the current page
[WEBSHOP_PAYMENTLOGOS]Payment logos
[WEBSHOP_NEWSLETTER]Newsletter registration
[WEBSHOP_SLIDESHOW1]Slideshow 1 (maximum = 25)
[WEBSHOP_SOCIAL]Social networks logos

Possible problems

The photo zoomer, lazy loading, and shopping gallery don't work
Do not forget the [WEBSHOP_FOOTSCRIPTS] keyword.
The modules are automatically disabled
The CSS and HTML modules cannot be used simultaneously: when one module is activated, then the other module will be disabled automatically. Use CSS for customizing a in-built template, use HTML to create your own template and include your CSS code.
Keywords are displayed in text form on the website
Check whether they are spelled correctly, in capital letters. Do not confuse HTML, CMS and email keywords. Make sure that the module is activated. Obsolete keywords are phased out of the software: [WEBSHOP_PARTNERS], [WEBSHOP_CATEGORYLIST2], [WEBSHOP_LANGUAGE_*], [WEBSHOP_CURRENCY_*]. Use only the keywords in the list above.

Next page: Email and web mail

Starter Wiki

Wiki



Frequently Asked Questions Contact