SEOshop Documentation

Responsive GUI

Version 2.0, last edit: May 06, 2014

Introduction

We created an extra file package regarding the Graphical User Interface (GUI) for SEOshop themes: an approach aimed at reading pages easily and creating an optimal viewing experience on mobile devices. All files are hosted on GitHub so we can monitor, change and add updated files at anytime.

Download: SEOshop-responsive-GUI v2.0 - Github

Changes

By adding the responsive GUI files some changes go into effect. Everything that is hosted on the protected surrounding xxxxx.webshopapp.com will be optimized for mobile (responsive). This includes:

  • The checkout: webshopapp.com/cart/
  • My account: webshopapp.com/account/
  • Customer service: webshopapp.com/service/
  • Blogs: webshopapp.com/blogs/blog

Installing

Upload all files to your Assets folder under GENERAL > Design > Template Editor.

1. Viewport meta tag

Be sure to add the viewport meta tag in the head of your page to control the layout of mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Include the GUI stylesheet files.

As of version 2.0 the responsive GUI does not require the original gui.css. gui-2-0.css is an updated version that works perfectly with the gui-responsive-2-0.css stylesheet file.

<link rel="stylesheet" href="{{ 'gui-2-0.css' | url_asset }}" />
<link rel="stylesheet" href="{{ 'gui-responsive-2-0.css' | url_asset }}" />

3. Include the GUI javascript files.

The gui-responsive.js adds a little adjustments for mobile users in terms of UX.

<script type="text/javascript" src="{{ 'gui.js' | url_core }}"></script>
<script type="text/javascript" src="{{ 'gui-responsive-2-0.js' | url_asset }}"></script>

Help

If you need any help regarding this subject, please do not hesitate to get in touch. You can reach us via support@seoshop.com.

Was this article helpful? Yes No
One moment please
Thanks for your feedback.