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 designed by a web designer (advanced)
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.
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.
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.
Use this method to create template yourself.
- Activate the module (verification code below)
- Use keywords (see table below) to include shop objects
The activation code for this module is MODL.
The code editor has the following features:
- Save via AJAX
- Undo last action
- Redo last action
- Zoom out
- Decrease text size
- Zoom in
- Increase text size
- Switch between white or black background
- Full screen
- Switch between full screen or compact view
- Upload files
With the upload icon, you can upload 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.
- shop.js - compressed
- shop.js - code with comments
- shop.css - compressed
- shop.css - code with comments
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.
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.
|[WEBSHOP_HEADER]||Title and meta tags, depending on the page, required|
|[WEBSHOP_CONTENT]||Page content, required|
|[WEBSHOP_LANGUAGE]||Language selection menu|
|[WEBSHOP_CURRENCY]||Currency selection menu|
|[WEBSHOP_SIDEPANEL]||CMS: Side panel|
|[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.
|[WEBSHOPAPP_AppName]||Insert a HTML5 app|
|[WEBSHOP_PAGEURL]||HTTP address of the current page|
|[WEBSHOP_SLIDESHOW1]||Slideshow 1 (maximum = 25)|
|[WEBSHOP_SOCIAL]||Social networks logos|
- 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.