- Is it free?
- Features
- New-POS
- Clients
- Help
- Forum
- Login / Sign up
-
English
AfrikaansAfrikaansTagalogTagalogBahasa IndonesiaIndonesianTiếng ViệtVietnameseBasa JawaJavaneseTürkçeTurkishCatalàCatalanΕλληνικάGreekČeštinaCzechРусскийRussianDanskDanishСрпскиSerbianDeutschGermanукраї́нська мо́ваUkrainianEesti keelEstonianБългарскиBulgarianEnglishEnglishالعربيةArabicEspañolSpanishفارسیPersianFrançaisFrenchاردوUrduHrvatskiCroatianעבריתHebrewItalianoItalian한국어KoreanLatviešu valodaLatvian中文(简体)Simplified ChineseLietuviųLithuanian中文(香港)Traditional ChineseMagyarHungarian日本語JapaneseNederlandsDutchहिन्दीHindiNorsk (bokmål)Norwegianਪੰਜਾਬੀ ਭਾਸ਼ਾPunjabiPolskiPolishमराठी भाषाMarathiPortuguêsPortugueseతెలుగుTeluguRomânăRomanianગુજરાતી ભાષાGujaratiSlovenčinaSlovakதமிழ்TamilSlovenščinaSlovenianবাংলাBengaliSuomiFinnishภาษาไทยThaiSvenskaSwedishհայերենArmenian
 Help |
||
|
Configuration and appearance of my website | |
 |
How to configure the mobile version of my site? | |
How to configure the mobile version of my site?
From the moment you create an online store KingEshop, it is automatically enabled for smartphones and tablets.
However, for best results, it is important to take a little time to configure some graphics aspects to personalize the mobile version of your site.
1 - Benefits of mobile version
Increasingly, users use their smartphone and their tablet to browse and buy on the internet.
While demand is growing, there are very few online stores (and very few platforms) that have the chance to offer their customers a mobile version of their site. With your shop KingEshop, you have a great advantage over your competitors.
Also, some platforms that offer this type of function, working with a technology that we consider obsolete. In fact, the old logic is to detect the type of device and lead the visitor to the corresponding version.
The problem with this mechanism is that due to the increasing number of mobile device models, it is impossible to detect all. Often the visitor who arrives on site with its smartphone see a version mobile site completely unsuitable.
The mobile version of your shop KingEshop is based on a different technology. In fact, the system does not look the type of mobile devices that visit the site. When a visitor arrives, the system sends a page that automatically adapts to the type of screen (smart phone, tablet or regular version). Regardless of screen size or device type, your site will always be perfect in the eyes of your customer.
Another significant advantage of your shop KingEshop is that your entire site will be present in the mobile version. This gives you a big edge over your competitors, as most sites have a mobile version contains only the bare minimum, offering visitors a very incomplete version of their shops.
Finally, your shop KingEshop offers the ability to customize the look of the mobile version according to your tastes and needs. This will result to give a nice browsing experience to all visitors who are never separated from their mobile devices.
2 - How to test the mobile version
For testing, you can use your mobile devices (smartphones and tablet) or browser (not Internet Explorer).
2.1 - Make tests with your smartphone and your tablet
If you have access to these devices, we strongly advise you to check the result of each of your changes, taking care to refresh the pages of your site.
Smartphone
Tablet
2.2 - To test with your browser (not Internet Explorer)
You can also use your browser to simulate how your website will be visible for all types of mobile devices. Given the huge amount of models of mobile devices, this method gives you the advantage of testing your site by simulating all possible screen sizes.
To make your tests you must use one of the following browsers : Chrome, Mozilla Firefox, Opera or Safari (this test method does not work with Internet Explorer).
Procedure :
- Open a browser (not Internet Explorer).
- Make sure the browser is floating on your screen (not full screen).
- View your site on the client side and place your cursor on the right side of the browser.
- Click and hold the left button of your mouse and drag your mouse to the right.
- Keep moving the mouse to the left until you see the ''tablet'' version
- Keep moving the mouse to the left until you see the ''smartphone version''
IMPORTANT: Whenever you make a change, do not forget to refresh your site by clicking the F5 button on your keyboard.
3 - How the texts and images are placed in the static pages and articles (''liquid version'')
When we talk about mobile version, we often hear the term ''liquid version''.
To understand this, we must see the regular version of the static pages and sections like a frozen version, where each text and image has a well determined pixel.
Different brands and models of mobile devices is far too many, it is impossible to predict the size of the screen where the mobile version will be displayed. This has the consequence that it is impossible to structure text and images in a fixed way, so these elements must flow into the mobile screen as a liquid adapts to the shape of its container.
In the mobile version or ''liquid'', texts and images will place in the natural order. You must do many tests in order to construct pages enjoyable to watch in regular and mobile versions.
4 - How to configure texts in the statics pages and articles
Note : To understand the explanations that follow, you should be familiar with inserting texts in static pages and articles. For full details, please see the FAQ on the subject.
When you insert a text in a static page or a article, the text IS VISIBLE in the regular version and the mobile version.
If you want to hide text in the mobile version of a static page or a article, in the editor, you must follow the following procedure :
- Double click on the text in question. The frame to change the text will appear.
- Click in the circle next to the field ''No'' under the question ''This text will be displayed in the mobile version?''.
When you have hidden the text in the mobile version, you will notice that in the editor, the text will be preceded by the characters [X]. These special characters are used to tell you that the text follows is only visible in the regular version.
Special characters [X] are not visible in the editor. They will never be seen by your visitors.
If you want to display the text in the mobile version of a static page or a article in the editor, you must double click on the text in question and then click in the circle next to the field ''Yes'' under the question ''This text will be displayed in the mobile version?''.
5 - How to configure images in the statics pages and articles
Note : To understand the explanations that follow, you should be familiar with inserting images in static pages and articles. For full details, please see the FAQ on the subject.
When you insert an image into a static page or a article, the image will be visible only in the regular version of your site and invisible in the mobile version.
If you do not change the images and text it will be displayed in the regular version of your site, and in the mobile version, your visitors will see only the text.
So, you must first select the images that appear in the mobile version of your site. To do this, you must open your images one by one with the editor of statics pages and articles.
Then double click on the image. The framework ''Manage this image'' will appear :
For the image was visible in the mobile version of your site, click on the circle next to the field ''Yes'' under the question ''This image will be displayed in the mobile version?'' .
6 - How to configure the order of texts and images in the statics pages and articles
In the mobile version of your site, images and text are displayed in logical order, that is to say, the elements that are higher are displayed above those lower.
If you have elements (text or images) that are exactly the same distance from the top of the page, the order of appearance will be random in the mobile version. To avoid this, you only have to remove one pixel of the element that you want to appear first.
For example, here you have two texts on the same line to the naked eye in the regular version. If you want the ''text 2'' was the first in the mobile version, you only have to up it of one pixel relative to the other text.
7 - How to configure the colors and other graphic aspects of the mobile version of my site
Go to the function ''Configuration elements of the mobile version of the site'' located in ''My website'' - ''Look'' - Mobile phone icon.
7.1 - Function ''Header for mobile :''
For this function, you have two choices : ''Text banner(highly recommended)'' or ''Image banner''.
Text banner(highly recommended) :
It is highly recommended to choose the option ''Text banner(highly recommended)'' because the image is lighter and takes up less space on the page.
Here are the results if you choose the option ''Text banner(highly recommended)'' :
For this option, you must configure the fields in the frame ''Header text'' :
Text : Enter the text you want to appear in the header. Example : My online store.
Text color : Choose the color of the text.
Weight : if you want that the text to be bold choose ''Bold''. If you do not want the text to be bold, choose ''Normal''.
Font : select the font of the text.
Type : if you want your text to be in small caps, select ''Small-caps''. Otherwise, choose ''Normal''.
Shadow : you can set the shadow to the text. Choose a number between 1 and 5. The higher is the number, the higher the shadow will be pronounced. Choose the number ''0'' if you do not want to add a shadow to the text.
Shadow color : choose the color of the shadow.
Background : select the background color of the header.
Top line : choose the color of the top line of the header.
Image banner :
Here are the results if you choose the option ''Image banner'' :
If you choose this option, the header can take up to 1/3 of the space visible depending on the type of smartphone you use, which is not recommended.
By using the option ''Image banner'', you must consider that your logo will not necessarily be at the same location in the header in the mobile version and the normal version. You need to adjust the location of your logo according to versions.
To adjust the location of your logo in the mobile version of your site, you must configure the fields in the frame ''Header picture''.
Do not confuse the location of the logo in the regular version and the mobile version (the one we are talking about in this FAQ). To place your logo in the regular version, please, see the FAQ.
7.2 - 1 to 42 functions :
You can customize the mobile version of your site in 39 points. Simply choose the color by clicking the down arrow next to the number.
IMPORTANT : If you find some functions are blocked, it is because you need to enable the history, the articles, the search or the cart in '' My website'' - ''General Settings'' - ''Configurations of the options and the static pages'' of your administration. This is not mandatory, but if these features are not enabled, they will not appear in the mobile version of your site.
