Mobile Theme
This article will show you how to enable and setup the Mobile theme feature. When enabled, this will allow your customers to view your website in a mobile friendly view on both their phones and tablets.
To “go mobile” on 7cart is extremely easy. When enabled, a streamlined version of your site will be shown to anyone visiting on their mobile device.
Customers will be presented with the new responsive layout without being redirected to a different URL. Responsive design simply means that the theme of the site will adjust automatically to present the most accommodating layout for the mobile device being used.
Your customers also have the ability to switch to the desktop version, should they prefer that.
Proofing Mobile View Before Launching
First, you should view what your site will look like, go to the storefront (while logged in as an Admin) and click on the Menu Icon in the top right corner of the screen.
Select the "Show As Mobile" option, and the page will reload.
Once the page reloads, manually shrink your browser window down to a size comparable to a mobile device. That could be a phone and or a tablet.
Note: There will be at least one area you will want to change before enabling this feature. Instructions are below.
Editing Mobile Theme Content Areas
In the admin, go to Config > General > Mobile Theme Configuration
Under the Content Area Setups box will be a list of Content Areas that are shown/displayed when viewing your mobile site. For the most part, there is no need to change these since information like logo, menu etc won't need to change, but as mentioned above, there is one Content Area you should look at before enabling the Mobile view. Edit the Mobile-HomePageContent by clicking the pencil icon next to it. By default, this has some banners along with a Top Products Content Area instead of a Product grid.
These should typically be changed or edited before going live with this feature. As for the size of the banners, you can use the same size you would use to put on the desktop version of your site; there is no need to shrink the images/banners.
Enabling the Mobile Theme
Once you have your info in place, all that's left to do is enable the feature.
To do so, check Enable Mobile Theme and hit Save Settings.
Render Mode
Once you've enabled the mobile theme, you can select which content block(s) to display by selecting the appropriate option under the Render Mode in the Publish Settings section. For example, if you wanted your website's footer to be hidden while it is being viewed on a mobile device, you would select Desktop Only as the render mode.
For more on the content block settings Click here
