Niestety, ta strona nie jest dostępna w Twoim języku. Jakkolwiek można przetłumaczyć tę stronę przy użyciu Google Translate. Możliwe są błędy w tłumaczeniu.
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.
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
| Keyword | Result |
|---|---|
| [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.
| Keyword | Result |
|---|---|
| [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.